什么是事件代理

一、什么是事件代理

事件代理又叫事件委托，是在网页设计中的一种设计思想，即把一个或者一组元素（目标元素）的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素，⽽不是⽬标元素。

当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元素上去执⾏函数。

举个例子——疫情封寝的时候，一个寝室大家都要买饭，如果每个人都出去就很麻烦，这时就委托一个志愿者帮忙给寝室每个人带饭，然后把饭分给每个人，这个就是事件代理。

二、案例

点击x号的饭，在下方获得随机4位数的手机尾号

<style>
        /* *{
            margin: 0;
            padding: 0;
        } */
        .box1 {
            width: 150px;
            height: 500px;
            background-color: antiquewhite;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
​
        .box2 {
            width: 100px;
            height: 80px;
            background-color: azure;
            margin-top: 10px;
            text-align: center;
            line-height: 25px;
        }
​
        .add {
            height: 50px;
            margin-bottom: 20px;
        }
 </style>
​
    <button class="add">点击添加带饭</button>
    <div class="box1">志愿者带饭
        <div class="box2">1号的饭</div>
        <div class="box2">2号的饭</div>
        <div class="box2">3号的饭</div>
        <div class="box2">4号的饭</div>
        <div class="box2">5号的饭</div>
    </div>
​
    <script>
        var add=document.querySelector(".add"),
        box1=document.querySelector(".box1"),
        box2s=document.querySelectorAll(".box2");
​
        // 给button按钮绑定点击事件：点击添加带饭
        add.addEventListener("click",function(){
            // 创建一个新的div
            var box2=document.createElement("div");
            // 获取box1的子元素个数
            var n=box1.children.length+1;
            // 给新创建的div添加类名
            box2.className="box2";
            // 给新div添加内容
            box2.innerHTML=`${n}号的饭`
            // 把box2添加进box1的子元素
            box1.appendChild(box2);
            // 同时需要把box1的高度也增加
            box1.style.height=parseFloat(window.getComputedStyle(box1).height)+90+"px"
        })
​
        // 先不用事件代理，给box2绑定点击事件：点击x号的饭，在下方获得手机尾号（4位随机数）
        // box2s.forEach(el=>{
        //     el.addEventListener("click",function(){
        //         // 产生四位数的手机尾号
        //         var sjwh=parseInt(Math.random()*(9999-1000+1000));
        //         // 在下方显示手机尾号
        //         el.innerHTML=`${el.innerHTML}<br>手机尾号是${sjwh}`;
        //     })
        // })
​
        // 用事件代理，绑定到父元素box1上
        box1.addEventListener("click",function(el){
            // 产生四位数的手机尾号
            var sjwh=parseInt(Math.random()*(9999-1000+1000));
                // 在下方显示手机尾号
                el.target.innerHTML=`${el.target.innerHTML}<br>手机尾号是${sjwh}`;
        })
    </script>

三、小结

• 优点：

（1）降低性能的消耗，减少整个⻚⾯所需的内存，提升整体性能（减少冗余，节约资源）

（2）可以实现动态绑定，减少重复⼯作

• 局限性：

（1）有些事件（没有冒泡特性的）不可以用事件代理进行绑定，比如focus、blur

（2）mousemove 、 mouseout 这样的事件，虽然有事件冒泡，但是需要不断计算位置定位，对性能消耗高，也是不适合用事件代理的

（3）如果把所有事件都⽤事件代理，可能会出现事件误判，即本不该被触发的事件被绑定上了事件

• 主要解决的问题：

  解决静态的事件绑定问题；解决业务相同，而性能消耗却更高的问题。

• 适合用事件代理的事件：

click、mousedown、mouseup、keydown、keyup、keypress