事件委托

110 阅读1分钟

上一篇说到事件冒泡的不好的地方,其实事件冒泡也有优点,举个栗子:

<ul>
    <li>知否知否,应是绿肥红瘦</li>
    <li>知否知否,应是绿肥红瘦</li>
    <li>知否知否,应是绿肥红瘦</li>
    <li>知否知否,应是绿肥红瘦</li>
    <li>知否知否,应是绿肥红瘦</li>
    <li>知否知否,应是绿肥红瘦</li>
</ul>

若想点击每个li都会弹出对话框,在以前需要给每个li注册事件,是非常辛苦的,而且访问DOM的次数越多,就会延长整个页面的交互就绪时间。

为了解决这个问题,我们采用事件委托的方式。

事件委托的原理: 不要每个子节点单独设置事件监听器,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡搭配ul上,ul有注册事件,就会触发事件监听器。

事件委托的作用: 只操作了一次DOM对象