事件委托与事件冒泡

最新推荐文章于 2024-11-28 11:28:03 发布

原创最新推荐文章于 2024-11-28 11:28:03 发布 · 468 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文深入探讨了事件委托的概念及其实现方式，通过事件机制让祖籍元素处理子元素的事件，避免了为多个子元素单独绑定事件的繁琐。同时，解析了事件冒泡的原理，即从目标元素开始，向上触发所有祖籍元素绑定的相同事件。

事件委托:将事件处理委托给祖籍元素

事件委托的实现方式：通过事件机制来实现事件委托

// 给几个元素绑定了点击事件
      var wrap = document.querySelector(".wrap");
      wrap.onclick = function (e) {
        //   console.log(this)
        console.log(e.target);
        // 明明给wrap 绑定点击事件；为什么可以 更改子元素样式呢？
        // 因为 触发事件的目标元素是p ,利用事件机制实现的事件委托
        e.target.style.color = "red";
      };在这里插入代码片

事件冒泡

在【目标元素el】上触发事件,如果el的【祖籍元素】绑定了相同的事件，那么也会被触发。直到找到 root 跟元素为止。
执行顺序：目标元素—> 父元素—>祖籍元素

addEventListener() 监听某个元素的事件

参一：事件类型
参二：事件处理函数
参三：事件机制冒泡或者不同默认值 false 冒泡（true 捕获）

 //   child.addEventListener("click", function () {
      //       console.log('child')
      //   }, false);

      //   box.addEventListener("click", function () {
      //       console.log('box')
      //   }, false);
      //   wrap.addEventListener("click", function () {
      //       console.log('wrap')
      //   }, false);
在这里插入代码片