js事件委托（事件代理）机制

最新推荐文章于 2023-02-19 10:00:00 发布

要努力_

最新推荐文章于 2023-02-19 10:00:00 发布

阅读量391

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/qq_36647492/article/details/99480002

版权

对于这个概念，看一次忘一次，这次把它记下来，看还会不会忘。

在讲事件委托之前，先补充两个概念：事件冒泡与时间捕获。

事件捕获
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
事件冒泡
当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件

1、什么是事件委托，JS高级程序上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。举个例子，就拿取快递来说，有两种方法，一种是自己去拿，另一种是委托给门岗代为签收，现实生活中，我们都是采用的第二种方法，这种方法的好处是，就算小区有新住户，门岗也可以代为签收。

用代码说话：

公共代码:

<body>
    <div id="div">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </div>
</body>

非事件委托

<script>
    window.onload = function(){
        let div1 = document.getElementById('div1');   
        div1.addEventListener('click',function(e){
            console.log(e.currentTarget);
        })
        let div2 = document.getElementById('div2');
        div2.addEventListener('click',function(e){
            console.log(e.currentTarget);
        })    
    }
</script>

有事件委托


<script>
    window.onload = function(){
        let div = document.getElementById('div');
        
        div.addEventListener('click',function(e){
            console.log(e.target)
        })
        
        let div3 = document.createElement('div');
        div3.setAttribute('class','div3')
        div3.innerHTML = 'div3';
        div.appendChild(div3)
    }
</script>

对比可以看出，无事件委托的时候，每次新增的节点需要主动添加和其他元素一样的事件。

事件委托后，虽然没有给div1和div2添加点击事件,但是无论是点击div1还是div2,都会打印当前节点。因为其父级绑定了点击事件,点击div1后冒泡上去的时候,执行父级的事件。这样无论后代新增了多少个节点,一样具有这个点击事件的功能。

事件委托的优点: