事件委托的概念和作用

事件委托的作用

• 支持为同一个DOM元素注册多个同类型事件 不会覆盖
• 可将事件分成事件捕获和事件冒泡机制

事件捕获和事件冒泡机制

• 事件捕获

当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件。

• 事件冒泡

当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件。addEventListener的默认情况，第三个参数为false

事件委托和新增节点绑定事件的关系

事件委托的优点:

• 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
• 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

事件委托和onclick的区别

事件委托绑定在父元素上，根据冒泡机制监听子元素的事件，减少函数个数

事件委托可以给元素绑定多个同类型事件，相互间不会覆盖

事件委托绑定在父元素上，向内部动态添加的子元素也和其他元素一样，可以监听发到

onclick事件会覆盖，以最后一个函数为准

onclick只能绑定在特定的元素上，监听这一个元素的事件

例子：

   let div = document.getElementById("div")
    let div1 = document.getElementById("div1")
    // div1.onclick = function () {
    //   console.log("第一次点击")
    // }
    // div1.onclick = function () {
    //   console.log("第二次点击")
    // }
    div1.addEventListener('click', (e) => {
      console.log("第一次点击")
    }, false)
    div1.addEventListener('click', (e) => {
      console.log("第二次点击")
    }, false)

    div.addEventListener('click', (e) => {
      console.log(e.target.innerHTML)
    })
    let div3 = document.createElement("div")
    div3.setAttribute("class", "div3")
    div3.innerHTML = "div3"
    div.appendChild(div3) //新添加的div3也可以被div监听到