JavaScript-事件委托(事件代理)
最编程
2024-08-07 14:55:42
...
今天给自己的知识结构填个坑,再复习下JS的事件代理。
事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件监听了。
事件的监听器,是被添加到了它们的父元素上,监听器会分析从新生成的子元素上冒泡上来的事件,并找到是哪个子元素的事件。
现在,有一个ul、li的列表了,,
<ul id="ulId">
<li id="li-1">li 1</li>
<li id="li-2">li 2</li>
<li id="li-3">li 3</li>
<li id="li-4">li 4</li>
<li id="li-5">li 5</li>
<li id="li-6">li 6</li>
</ul>
那么,当每个子元素被点击的时候,会发生不同的事件。而且这些Li的数量是不定的,因为它们是根据后端返回的JSON生成的。
那么这时,你需要把事件监听器放在它们的父容器 ulId 上面。
这时,当子元素被点击的事件,冒泡到父元素Li上的时候,你就可以通过检查事实的target,从而获取真正被点击的节点元素的引用。
看例子截图:
现在大部分JS都会使用jQuery等工具库来处理DOM事件,但对于事件委托的背后原理,我们还是要了解的。
浅谈数据结构 - 字典
上一篇: 理解JavaScript中的事件代理机制