1. 事件传播的另一种形式是事件捕获。这就像事件冒泡，但顺序是相反的：事件是先在最小嵌套元素上发生，然后在连续更多的嵌套元素上发生，直到达到目标。
2. 事件捕获默认是禁用的，你需要在 addEventListener() 的 capture 选项中启用它。
在HTML文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container">
<button>按钮</button>
</div>
<pre id="output"></pre>
<script src="scripts/main1.js" defer></script>
</body>
</html>在JS文件中:
const output = document.querySelector("#output");
function handleClick(e){
output.textContent += `你在${e.currentTarget.tagName}元素上进行了点击\n`;
}
const container = document.querySelector("#container");
const button=document.querySelector("button");
document.body.addEventListener("click",handleClick,{capture:true});
container.addEventListener("click",handleClick,{capture:true});
button.addEventListener("click",handleClick);结果展示：
发现消息出现的顺序发生了颠倒：<body> 事件处理器首先触发，然后是 <div> 的，最后是 <button>。
const output = document.querySelector("#output");
function handleClick(e){
output.textContent += `你在${e.currentTarget.tagName}元素上进行了点击\n`;
}
const container = document.querySelector("#container");
const button=document.querySelector("button");
document.body.addEventListener("click",handleClick);
container.addEventListener("click",handleClick,{capture:true});
button.addEventListener("click",handleClick);结果展示：
扫一扫
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
