事件捕获、冒泡、委托的深入学习

最新推荐文章于 2024-07-26 11:41:15 发布

秃头的科比

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量83

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43933771/article/details/118302628

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件捕获、冒泡、委托

先来看一段代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件捕获、事件冒泡</title>
    <style>
      .wrapper {
        width: 300px;
        height: 300px;
        background-color: blue;
      }

      .outer {
        width: 200px;
        height: 200px;
        background-color: green;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="outer">
        <div class="inner"></div>
      </div>
    </div>
    <script>
      let wrapper = document.getElementsByClassName("wrapper")[0],
        outer = document.getElementsByClassName("outer")[0],
        inner = document.getElementsByClassName("inner")[0];
      //   console.log(wrapper, outer, inner);
      wrapper.addEventListener(
        "click",
        function () {
          console.log("wrapper");
        },
        false
      );

      outer.addEventListener(
        "click",
        function () {
          console.log("outer");
        },
        false
      );

      inner.addEventListener(
        "click",
        function () {
          console.log("inner");
        },
        false
      );
    </script>
  </body>
</html>

在上面的事件监听中，我并没有对addEventListener方法的第三个参数作出解释，可以看到第三个参数都设置的是false，但是如果将其改为true，则事件由默认的冒泡变为捕获（即false意味着为事件冒泡，true意味着为事件捕获）

那么捕获和冒泡的执行顺序是？对于事件源的父级元素是先捕获再冒泡，而对于事件源本身的事件则按照顺序正常执行。需要注意的是：IE提出的事件冒泡流，Netscape提出的事件捕获流。

如何取消事件冒泡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件捕获、事件冒泡</title>
    <style>
      .wrapper {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: blue;
      }

      .apply {
        position: absolute;
        bottom: 20px;
        right: 15px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        text-align: center;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="apply">立即申请</div>
    </div>
    <script>
      var wrapper = document.getElementsByClassName("wrapper")[0],
        apply = document.getElementsByClassName("apply")[0];

      wrapper.addEventListener(
        "click",
        function () {
          console.log("我是详情");
        },
        false
      );

      apply.addEventListener(
        "click",
        function (e) {
          var e = e || window.event;
          //阻止事件冒泡
          //方法一：
          //   e.stopPropagation();
          //方法二：
          //   e.cancelBubble = true;

          //测试一下封装的方法
          stopBubble(e);
          console.log("申请");
        },
        false
      );

      //兼容性封装
      function stopBubble(e) {
          //因为IE8时event是位于window上面的
        let e = e || window.event;
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
      }
    </script>
  </body>
</html>

事件源：指的是作用于谁身上谁便是事件源，而当触发事件源时，只要它的父级拥有相同的事件类型，那么父级的事件也会被触发。

事件流：指的是从页面中接收事件的顺序，主要与冒泡和捕获事件相关。

事件委托

事件委托和事件代理是一个意思，下面我们通过案例来逐步详细深入的学习事件委托，案例：我们需要实现一个为每个li元素添加点击事件的案例。

基本布局如下：

<button>按钮</button>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

常规实现

<script>
    //我们需要为每一个li元素都添加点击事件
    let oList = document.getElementsByTagName("ul")[0];
    let oLi = document.getElementsByTagName("li");
    let oBtn = document.getElementsByTagName("button")[0];

    for (let i = 0; i < oLi.length; i++) {
        oLi[i].onclick = function () {
            console.log(oLi[i].innerText);
        };
    }
</script>

在这里我们可以思考一下：目前这里只有10个li需要添加点击事件，但是如果以后碰到上千个呢? 我们还是使用for循环去一个一个添加事件的话，必然会带来性能上的问题。

假设还有这样一个需求：当点击button按钮时, 便给我在下面再去添加一个li元素并自动添加上点击事件。

//实现新提出的另外需求
oBtn.onclick = function () {
    let newLi = document.createElement("li");
    newLi.innerText = oLi.length + 1;
    oList.appendChild(newLi);
};

当我们完成这个需求后, 你会发现你所新增加的li元素并没有自动添加上点击事件，而以上便是使用常规方法在实现这个案例过程中所带来的问题。

借助事件委托再次实现这个案例

<ul>
    <li>1</li>
	<li>2</li>
</ul>
<button>新需求</button>

//我们需要为每一个li添加点击事件
let oList = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");
let oBtn = document.getElementsByTagName("button")[0];

//这里我们使用事件委托：注意是在其父元素上面添加点击事件
oList.onclick = function (event) {
    //这里我们需要考虑一下事件源对象的兼容性
    let tar = event.target || event.srcElement;
    //之所以给li元素的父元素ul添加监听, 是因为事件捕获的原因, 当我们点击li元素后, 便会触发它的父元素去通过target或者srcElement从而寻找到事件源对象
    console.log(tar.innerText);
};

//实现新提出的另外需求
oBtn.onclick = function () {
    let newLi = document.createElement("li");
    newLi.innerText = oLi.length + 1;
    oList.appendChild(newLi);
};

以上便是使用事件委托不仅解决了for循环所带来的性能消耗问题并且解决了新增需求的问题，而这也正是使用事件委托的好处所在。

额外补充：最后再说一个开发中常遇见的问题：那么如何获取到它的下标值呢？这里也是使用两种方法。

//这是我们绝大对数人会采用的方式，但是依然会带来性能消耗问题，所以不推荐使用
for (let i = 0; i < oLi.length; i++) {
    if (tar === oLi[i]) {
        console.log(i);
    }
}
//所以推荐使用下面的方法
let index = Array.prototype.indexOf.call(oLi, tar);
console.log(index);

秃头的科比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获、冒泡、委托的深入学习

事件委托事件委托和事件代理是一个意思。下面我们通过案例来逐步详细深入的学习事件委托。我们需要实现一个为每个li元素添加点击事件的案例。案例的基本布局如下：<button>按钮</button><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li&
复制链接

扫一扫

专栏目录