jQuery中on方法的详细说明

开(事件类型、[儿童选择器]、[数据]、fn)

使用事件委托机制绑定事件的优点是动态添加子元素时不需要再次绑定。

On方法可以传入childSelector指定的事件处理程序的特定子元素，也可以传入对象格式的数据，fn函数可以通过event.data.XXX获取特定参数传入事件处理程序的数据需要在事件绑定时确定。与trigger('eventType '，[data])不同，传递到tirgger方法中的数据(以对象或数组的形式)是在事件发生时计算的值。

如果同一个事件处理程序多次绑定到同一个元素，它将在被触发时执行多次。因此，在绑定之前，您需要在：之前解除同一事件的绑定

$(“选择器”)。关闭(' click.xxx ')。on('click.xxx '，function(){…})；

如果要将不同的事件处理程序绑定到同一个元素，可以通过事件的命名空间来区分它们

delegate()的源代码是调用on()方法，但是参数的顺序发生了变化，所以统一使用on()。

事件触发序列：

目标是触发事件的元素，不会改变；CurrentTarget是事件处理程序当前所在的元素，并将动态更改。DelegateTarget是由事件处理程序绑定的对象，不会更改。

on方法利用事件冒泡机制，事件将从事件源冒泡到文档，并触发相应元素(如果有)的事件处理程序。

事件处理队列：从触发事件的元素开始，遍历delegateTarget，找到childSelector指定的元素节点，将事件处理函数推入事件处理队列handlerQueue，最后将delegateTarget元素直接绑定的事件处理推入队列(委托事件在直接绑定之前)。

在on方法的冒泡过程中，具有事件处理函数的是delegateTarget元素，而不是childSelector元素。

$(“div”)。on('click '，' span ')，function(event){ alert(' span元素被单击');});$('p ')。click(function(event){ alert(' p元素被单击了'));});$(“div”)。单击(function(){ alert(' div元素被单击。');});单击span元素时，span元素上没有绑定的事件处理程序，气泡传递给p元素，p元素有直接绑定的事件处理程序，先弹出p；然后传递给最外面的div元素，该元素具有事件委托。jQuery将从target (span)遍历到delegateTarget (div)，找到childSelector节点，并将其推入事件处理队列。最后，按delegateTarget (div)元素直接绑定的事件处理程序。因此，将弹出Span，然后弹出Div。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！