on()函数用于为指定元素的一个或多个事件绑定事件处理函数。
从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。
on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。
要删除通过on()绑定的事件,请使用off()函数。
请参考下面这段初始HTML代码:
<div id="main">
<p>测试代码</p>
<p>测试代码</p>
<em>测试</em>
</div>
<p>测试代码</p>
我们为div中的所有p元素绑定点击事件:
此种写法有两个特点(1.目标元素可以支持祖辈元素上委托绑定 2.执行on()函数之后新添加的元素符合条件)
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
alert( $(this).text() );
});
selector参数:一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。
on() 如果不传selector参数,那么就是直接绑定,不是事件委托机制;如果加了selector参数,那就是事件委托,之后新添加的元素,只要符合条件,绑定事件依然有效。
比如要对页面中所有的p标签绑定click事件,应该这样写: $(document.body).on("click", "p", function(){ });
这样,新添加的p元素也会绑定click事件。
深入点说,这个click事件实际上是绑定到 document.body 上面的,而不是每个p标签上,不过它的所有子孙节点发出了click事件,都会冒泡传递到 document.body,并触发其绑定的click事件。jQuery再检测这个click事件在冒泡的过程中是否”经过”了”p”标签,如果是,就执行我们指定的回调函数。