事件委托用法

Posted 2021-02-04

当需要在大量元素上绑定事件的时候，特别是在动态更新的元素上，这个绑定是既麻烦又消耗性能的一件事。比较好的做法是在它们共同的父级元素上绑定一个事件，在事件冒泡阶段触发相应的效果。这种把一个元素的响应事件函数委托给另一个元素的用法便叫事件委托。

// DOM 元素
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

// 利用 ul 元素做事件委托
document.querySelector(‘ul‘).addEventListener(‘click‘, (e) => {
    const event = e || window.event
    const target = event.target || event.srcElement
    console.log(target.innerText) // 0 1 2 3 4
})

　　实际使用时往往不是每一个子元素都需要被委托，这时候可以用到 DOM 元素的一个方法 matches()，这个方法接收一个 CSS 选择器字符串，如果匹配成功返回 true，否则返回 false，例如：target.matches(‘li‘) // true。

// DOM 元素
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li class="mazey">3</li>
    <li>4</li>
</ul>

// 只委托类名为 mazey 的元素
document.querySelector(‘ul‘).addEventListener(‘click‘, (e) => {
    const event = e || window.event
    const target = event.target || event.srcElement
    if (target.matches(‘li.mazey‘)) {
        console.log(target.innerText) // 3
    }
})

　　

注意：

不是所有事件都能用事件委托来完成，例如 focus、blur 就没有冒泡，但有相应的支持冒泡的事件 focusin 和 focusout 来代替。

原文地址：https://www.jianshu.com/p/550320823026