普通事件,是指直接对元素进行事件注册,然后触发
而事件绑定是将事件注册到元素上
两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个)
而事件绑定是可以重复绑定多个事件,而且都可以触发
<html>
<a class="ack1">点击触发绑定事件</a><br><br>
<a class="ack2">点击触发普通事件</a>
</html>
<script>
function foo1(){
alert('触发点击1');
}
function foo2(){
alert('触发点击2');
}
var ack1=document.getElementsByClassName("ack1");
ack1.addEventListener('click',foo1);
ack1.addEventListener('click',foo2);
//弹出 触发点击1 和 触发点击2
var ack2 = document.getElementsByClassName("ack2");
ack2.onclick = foo1;
ack2.onclick = foo2;
//只会弹出 触发点击2
</script>
而在jQuery中则有点不同,而且jQuery本身允许通过普通事件添加多个触发函数
function foo1(){
alert('触发点击1');
}
function foo2(){
alert('触发点击2');
}
//都会触发两个函数 弹出 触发点击1 触发点击2
$(".ack1").on('click',foo1);
$(".ack1").on('click',foo2);
$(".ack2").click(foo1);
$(".ack2").click(foo2);
//都会触发两个函数 弹出 触发点击1 触发点击2
jQuery中事件绑定是指为动态创建的元素绑定上事件触发,不只是为元素绑定多个事件
注意对元素动态绑定事件,一般需要通过父类元素为其绑定,才会使该子类(刚刚添加的元素)可以被触发
$(document).on('click','.ack1',foo1);
$(".ack1").click(function(){
var ele=$(this).clone();
$(this).after(ele); //后克隆的元素依旧可以触发foo1事件函数
});
$(".ack2").click(foo2);
$(".ack2").click(function(){
var ele=$(this).clone();
$(this).after(ele); //无法触发foo2事件函数
});
事件委托:
$("要绑定标签的上级标签").on("click","要绑定的标签",function) $("要绑定标签的上级标签").delegate("要绑定的标签","click",function)