<div class="hello" id="hello1">点我呀</div>
<div class="hello" id="hello2">点我呀</div>
<div class="hello" id="hello3">点我呀</div>
1.node.bind("click", callback);
$(".hello").bind("click",function(){
alert("Hello World! bind(click, callback1)");
});
$(".hello").bind("click",function(){
alert("Hello Baby! bind(click, callback2)");
console.log(this);
});
运行结果是绑定的两个事件处理函数都能执行。
2.node.click(callback);
$(".hello").click(function() {
alert("Hello World!");
});
$(".hello").click(function() {
alert("Hello Baby!");
console.log(this);
});
运行结果是绑定的两个事件处理函数都能执行。
3.node.on("click", callback);
$(".hello").on("click",function(){
alert("Hello World! on(click, callback1)");
});
$(".hello").on("click",function(){
alert("Hello Baby! on(click, callback2)");
console.log(this);
});
运行结果是绑定的两个事件处理函数都能执行。
由此可见：jquery对事件处理做了很好的封装，绑定事件的方法都不会覆盖之前已绑定的处理函数。可以实现一次对多个DOM结点绑定多个处理函数。
4.总结
bind()已在jquery1.7以上版本中不推荐使用了，click()和on()可以酌情选择使用。
bind()和click()属于静态加载，当页面加载完后，就不再为新增加的元素添加点击事件，on()属于动态加载，可以为新增加的元素添加事件。
如：
$("body").on("click", ".hello", function() {
alert("Hello! body.on...");
})
$("body").append("<div class=\"hello\" id=\"hello4\">点我呀</div>");
会发现动态 append到页面的元素，也绑定了点击事件。
值得注意的是：，on(events,[selector],[data],fn)， on()如果不传selector参数，效果与其他两种方式一样，如果传selector参数，就可实现动态加载，on()前面的元素必须在页面加载的时候就存在DOM里面，可使用$("body").on("click", selector, callback)或$("ul").on("click", "li", callback)等，该种方法实现对动态append到页面的元素绑定事件，其本质是事件代理。
网友评论