事件代理

事件代理是网页设计的一种设计思想，利用事件冒泡的原理和无论事件触发时触发事件执行的元素（事件触发源）是不是事件绑定的元素，在事件处理函数内部的事件对象event都可以访问这个事件绑定的元素。这样就可以将本应该绑定在子元素上的处理事件绑定在其父元素上，使用父元素来代理多个子元素的事件。

    <style>
        .box1{
            background-color: darkgray;
        }
        .box2{
            width: 120px;
            height: 40px;
            background-color: firebrick;
            margin: 10px;
        
        }
    </style>
    <div class="box1">
        <div class="box2">AO</div>
        <div class="box2">TU</div>
        <div class="box2">YYDS</div>
        <div class="box2">maomao</div>
    </div>
    <script>
        let box2=document.querySelectorAll(".box2");
        box2.forEach(el=>{
              el.addEventListener("click",function(e){
                    console.log(this.innerHTML)
				});
			});
    </script>

在元素上绑定点击事件，点击元素就打印元素的值。

此方法有缺点： 1.是静态的事件绑定，如果动态创建的新元素添加进去，添加进去的新元素没有这个事件，需要重新绑定。

2.性能消耗更高每重新执行一次回调函数就会重新创建一个事件处理函数，事件处理函数的业务却是相同的

事件代理注意点:

1.不能使用this: this指向父元素

2.需要使用e.target : 真正点击的子元素(事件触发源)

    <div class="box1">
        <div class="box2">AO</div>
        <div class="box2">TU</div>
        <div class="box2">YYDS</div>
        <div class="box2">maomao</div>
    </div>
    <button onclick="load1()">动态添加新的元素</button>
    <script>
        let box1=document.querySelector(".box1");
		box1.addEventListener("click",(event)=>{
            console.log(event.target.innerHTML);
        });
        function load1(){
				let box2=document.createElement("div");
				box2.innerHTML="gloria";
				box2.className="box2";
				box1.appendChild(box2);		
			};
    </script>

事件代理的优点

1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件，所占用的内存空间更少。

2.动态监听:使用事件代理可以自动给动态添加的元素绑定事件，即新增的节点不需要再单独绑定事件也可以具有和其他元素一样的事件。