DOM —— 事件代理

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

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

事件代理主要是用来解决静态的事件绑定问题；解决业务相同，而性能消耗却更高的问题。

事件代理的优点：

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

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

缺点：

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

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

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

适合用事件代理的事件：

click、mousedown、mouseup、keydown、keyup、keypress

比如：不使用事件代理，用普通方式给box2设置click事件，当点击box2这个div时，打印出内容。

    <style>

        .box1 {
            background-color: bisque;
        }
        .box2 {
            width: 120px;
            height: 40px;
            background-color: aqua;
            margin: 10px;
        }

    </style>

    <div class="box1">
        <div class="box2">box1</div>
        <div class="box2">box2</div>
        <div class="box2">box3</div>
        <div class="box2">box4</div>
    </div>

    <script>

        var box2 = document.querySelectorAll(".box2")
        box2.forEach(el => {
            el.addEventListener("click",function(e) {
                console.log(this.innerHTML);
            })
        })

        var box1 = document.querySelector(".box1")
        var box2 = document.createElement("div")
        box2.className = "box2"
        box2.innerHTML = "hello"
        box1.appendChild(box2)
    </script>

上面这种设计有两个缺点：

        1.静态的事件绑定：如果动态的添加元素进去  添加进去的元素没有这个事件

        2.性能消耗更高 但业务却相同

但是相同的需求我们可以使用事件代理来解决：

  <style>

        .box1 {
            background-color: bisque;
        }
        .box2 {
            width: 120px;
            height: 40px;
            background-color: aqua;
            margin: 10px;
        }

    </style>

    <div class="box1">
        <div class="box2">box1</div>
        <div class="box2">box2</div>
        <div class="box2">box3</div>
        <div class="box2">box4</div>
    </div>

    <script>

        var box1 = document.querySelector(".box1")
        var box2 = document.createElement("div")
        box2.className = "box2"
        box2.innerHTML = "hello"
        box1.appendChild(box2)
        
         // 事件代理
        var box1 = document.querySelector(".box1")
        box1.addEventListener("click",function(e) {
            console.log(e.target.innerHTML);
        })

        
    </script>

 用事件代理的方式，直接将box2的业务绑定到它的父元素box1上去执行，不仅提高了性能，并且即使是后面添加的新元素，也能执行这个事件。