Dom事件委托

什么是事件委托

1. 事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。
   
2. 事件委托能处理的问题。
   (1)处理多个按钮,如果有多个按钮的情况下,那么我们在写代码的时候就需要用到多个点击事件,那么这样就会导致代码的臃肿以及内存的消耗过多。所以我们可以通过事件委托监听祖先元素来解决这样的问题。
   

<!--HTML结构-->
	<div class="btn">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <!--此处有100个按钮-->
      <button>100</button>
	</div>

//创建事件委托
const btn = document.querySelector(".btn");
    btn.addEventListener("click", (e) => {
        const t = e.target;
        if (t.tagName.toLowerCase() === "button") {
            console.log("button内容", e.target.textContent);
        }
    })

代码效果 当我们点击任意一个按钮时,控制台效果 (2)可以处理不存在的按钮

<!--HTML结构-->
	<div class="div1">

    </div>

 const div1 = document.querySelector(".div1")
    setTimeout(() => {
        const button = document.createElement("button");
        button.textContent = "click";
        div1.appendChild(button);
    }, 1000)
    div1.addEventListener("click", (e) => {
        const t = e.target;
        if (t.tagName.toLowerCase() === "button") {
            console.log("被点击了");
        }
    })

在按钮还没创建的时候,把监听放到他的祖先元素,当生成按钮的时候再去配对是否出现了button标签。