事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景∶

事件委托：

事件委托也称为事件代理。在jQuery里面称为事件委派。

事件委托的原理：

不是每个子节点单独设查事件监听器，而是事件监听器设置在其父节点上，然后利用百泡原理影响设置每个子节点。

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

事件委托的作用：

我们只操作了一次DOM提高了程序的性能

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
    </ul>
</body>
<script>
    // 事件委托的核原理：给父元素添加侦听器，利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
        // alert('111')
        // e.target这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink'
    })
</script>

</html>

 

posted @ 2022-04-11 16:15  今天穿秋裤了吗  阅读(36)  评论(0)    收藏  举报