极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
山月训练营之面试直通车 服务上线了,从准备简历、八股文准备、项目经历准备、面试、面经、面经解答、主观问题答复、谈薪再到入职的一条龙服务。

# 关于事件捕获和冒泡,以下代码输出多少

更多描述

代码见: 事件捕获和冒泡 - Codepen (opens new window)

以下代码输出多少:

<div class="container" id="container">
  <div class="item" id="item">
    <div class="btn" id="btn">Click me</div>
  </div>
</div>
document.addEventListener(
  "click",
  (e) => {
    console.log("Document click");
  },
  {
    capture: true,
  }
);

container.addEventListener(
  "click",
  (e) => {
    console.log("Container click");
    // e.stopPropagation()
  },
  {
    capture: true,
  }
);

item.addEventListener("click", () => {
  console.log("Item click");
});

btn.addEventListener("click", () => {
  console.log("Btn click");
});

btn.addEventListener(
  "click",
  () => {
    console.log("Btn click When Capture");
  },
  {
    capture: true,
  }
);

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 559 (opens new window)

Document click
Container click
Btn click When Capture
Btn click
Item click

html

<div id="s1">
  s1
  <div id="s2">s2</div>
</div>

css

#s1 {
  width: 200px;
  height: 200px;
  background-color: burlywood;
  overflow: hidden;
}
#s2 {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 50px;
}

js

let s1 = document.getElementById("s1");
let s2 = document.getElementById("s2");

s2.onclick = function () {
  console.log("s2 click1");
};
s1.addEventListener(
  "click",
  function (e) {
    console.log("s1 冒泡事件");
  },
  false
);
s2.addEventListener(
  "click",
  function (e) {
    console.log("s2 冒泡事件2");
  },
  false
);
s2.addEventListener(
  "click",
  function (e) {
    console.log("s2 冒泡事件1");
  },
  false
);
s1.addEventListener(
  "click",
  function (e) {
    console.log("s1 捕获事件");
  },
  true
);
s2.addEventListener(
  "click",
  function (e) {
    console.log("s2 捕获事件");
  },
  true
);
s2.onclick = function () {
  console.log("s2 click2");
};

结果输出

s1 捕获事件
s2 捕获事件
s2 click2
s2 冒泡事件2
s2 冒泡事件1
s1 冒泡事件

小结: 总顺序:捕获事件 ==> 冒泡事件(addEventListener) 或 on 事件 冒泡事件 addEventListener 和 on 事件的执行顺序:按照定义时的顺序执行(书写代码的先后) 并且,冒泡事件 addEventListener 不会覆盖,有多少个事件就执行多少个,按顺序执行 而,相同的 on 事件会覆盖,后面的覆盖前面的

Last Updated: 9/27/2022, 2:39:59 PM