当前位置:首页 > Web开发 > 正文

进而绑定它下面的其他子元素的事件;使用事件委托来避免需要频繁的添加和删除事件处理程序的操作 3.除了可以处理尚未创建的内

2024-03-31 Web开发

原文链接:https://blog.csdn.net/aiolos1111/article/details/52047380

简单以jQuery的 on() 要领为例说明:

API: 

.on( events [, selector ] [, data ][, handler])

 

如果on()要领的selector 参数为空,事件措置惩罚惩罚措施就被称为直接绑定。每当在被绑定元素上(如下例中被绑定的document元素,译者注)产生事件时,无论这个事件产生在这个元素上还是从内层元素经冒泡而来,该措置惩罚惩罚措施城市被挪用。

并且,如果on()要领的selector 参数为空,它与bind()要领不异——只能绑定页面已有元素的事件

事件绑定:

代码:

<body> <div> 这是一个div <button>点击</button> </div> <script type="text/javascript"> $(function(){ //将click事件绑定在document东西上, //页面上任何元素产生的click事件都冒泡到document东西上得处措置惩罚惩罚 //从而挪用事件措置惩罚惩罚措施 //本例为了简单绑定到了document,实际上绑定到阿谁元素上都有类似效果 $(document).on("click",function(e){ console.log(e.target.tagName + " is clicked") }) }) </script> </body>

  表示:

技术图片

事件委托:

如果on()要领的selector 参数不为空,事件措置惩罚惩罚措施就被称为委托。当事件直接产生在被绑定的元素上(如下例中绑定到document上,译者注)时,该措施不会被挪用,而只有当事件产生在与选择器匹配的内部元素上(如下例中click事件产生在button上,译者注)时,才会挪用该措施。

jQuery的事件委托是将事件从事件的产生者(即event target)一直向上冒泡到绑定了事件措置惩罚惩罚措施的元素上(例如从最内层元素向上冒泡到最外层元素),并为冒泡“沿路”过程中匹配的所有选择器执行事件措置惩罚惩罚措施。

<body> <div> 这是一个div <button>点击</button> </div> <script type="text/javascript"> $(function(){ //将click事件绑定在document东西上,qq空间回答问题破解 , //并传入第二个可选参数:selector //当事件冒泡到document东西时,检测事件的target, //如果与传入的选择符(这里是button)匹配,就挪用事件措置惩罚惩罚措施即触发事件,否则不触发。 $(document).on("click","button",function(e){ console.log(e.target.tagName + " is clicked") }) }) </script> </body>

  表示:

技术图片

事件措置惩罚惩罚措施只会被绑定到当前已当选定的元素上(如上例中的document元素上,译者注),这些元素在挪用on()要领时必需已经存在——同bind()。

为了确保这些元素已经存在并能当选中,请将代码安排到</body>标签之前或者在$(function(){ ... })内执行事件绑定。或者,使用事件委托来绑定事件措置惩罚惩罚措施 

事件委托的长处

1.能措置惩罚惩罚来自内层子元素的事件,且子元素可以是稍后时间生成在dom中的;

2.通过选择一个在绑定事件委托措置惩罚惩罚措施时,已经存在的元素,进而绑定它下面的其他子元素的事件;使用事件委托来制止需要频繁的添加和删除事件措置惩罚惩罚措施的操纵

3.除了可以措置惩罚惩罚尚未创建的内层子元素的事件,事件委托的另一个长处是:当需要监听很多元素时,事件委托的性能更好

jQuery 的事件绑定和事件委托(事件代办代理)

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/29300.html