1.绑定所有的<p>元素
// 为所有P元素分别绑定click事件处理函数handler
$("p").on("click", handler);
2.为div中所有的P元素绑定click事件
// 为div中的所有p元素绑定click事件处理程序,对后面append添加的p也有用
$("div").on("click", "p", function(){
// 这里的this指向触发点击事件的p元素(Element)
alert( $(this).text() );
});
// 在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler
$(document.body).on("click", "p", handler);
注意:"focus"、"blur"等部分事件不支持冒泡,使用事件委托机制将无效。不过,他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin",与"blur"对应的"focusout"。此外,我们也可以使用event.stopPropagation()方法,让当前触发的事件停止冒泡。
3.为元素绑定多个事件并为其传入附件数据
<p id="n5">Google</p>
var data = { id: 5, name: "张三" };
var events = {
"mouseenter": function(event){
$(this).html( "你好," + event.data.name + "!");
},
"mouseleave": function(event){
$(this).html( "再见!");
}
};
//为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data
$("body").on(events, "#n5", data);