上一篇说到事件冒泡的不好的地方,其实事件冒泡也有优点,举个栗子:
<ul>
<li>知否知否,应是绿肥红瘦</li>
<li>知否知否,应是绿肥红瘦</li>
<li>知否知否,应是绿肥红瘦</li>
<li>知否知否,应是绿肥红瘦</li>
<li>知否知否,应是绿肥红瘦</li>
<li>知否知否,应是绿肥红瘦</li>
</ul>
若想点击每个li都会弹出对话框,在以前需要给每个li注册事件,是非常辛苦的,而且访问DOM的次数越多,就会延长整个页面的交互就绪时间。
为了解决这个问题,我们采用事件委托的方式。
事件委托的原理: 不要每个子节点单独设置事件监听器,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡搭配ul上,ul有注册事件,就会触发事件监听器。
事件委托的作用: 只操作了一次DOM对象