下面就来详细讲解 "JavaScript 事件冒泡简单示例" 的完整攻略。
什么是事件冒泡？
事件冒泡是指当一个元素上的事件被触发时，该事件将会从被点击的元素一直向上冒泡到祖先节点直至到达文档根节点。
举个例子，假如你在一个文档中单击了一个按钮，那么事件会以如下顺序传递：
- 单击按钮。
- 按钮触发 click 事件。
- 事件开始在按钮上触发并向上传播到父元素，然后继续传递到父元素的父元素，直到传递到 html 元素为止。
- 然后，在执行完毕 html 元素上的事件后，该事件将传递到文档对象。
事件冒泡示例1
接下来我们来看一个 JavaScript 事件冒泡的基本示例。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 事件冒泡简单示例</title>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
Click me!
</div>
</div>
</div>
<script>
// 获取三个div元素
var outer = document.getElementById("outer");
var middle = document.getElementById("middle");
var inner = document.getElementById("inner");
// 为三个div元素添加点击事件
outer.addEventListener("click", function() {
console.log("outer clicked");
});
middle.addEventListener("click", function() {
console.log("middle clicked");
});
inner.addEventListener("click", function() {
console.log("inner clicked");
});
</script>
</body>
</html>
上面的代码：
- 给三个
<div>元素绑定了 “click” 事件监听器 - 子元素 “inner” 冒泡到父元素 “middle” 上，然后又继续冒泡到最外层的 “outer”
- 点击 “inner” 元素会输出如下信息：
inner clicked
middle clicked
outer clicked
因为所有三个元素都有 "click" 事件监听器，并且当事件从元素 "inner" 冒泡到它们上方时，都会触发这些监听器。
事件冒泡示例2
下面是一个更复杂的示例，可以派生出多个子元素来进一步说明冒泡事件机制：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 事件冒泡简单示例</title>
</head>
<body>
<ul id="myList">
<li>
<a href="#">Link 1</a>
<ul>
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li>
<a href="#">Link 4</a>
<ul>
<li><a href="#">Link 4.1</a></li>
<li><a href="#">Link 4.2</a></li>
</ul>
</li>
</ul>
<script>
var myList = document.getElementById("myList");
// 为所有的li元素添加点击事件监听器
myList.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
console.log("li clicked");
} else if (event.target.tagName === "A") {
event.preventDefault();
console.log("a clicked");
}
});
</script>
</body>
</html>
上面的代码：
- 给
<ul>添加了 “click” 事件监听器 - 点击
<li>元素会输出 "li clicked"，点击<a>元素会输出 “a clicked”（因为调用了event.preventDefault()取消默认的链接行为）
由于所有的 "li" 元素都位于 "ul" 元素之内，因此当我们单击任何一个 "li" 元素或其子元素时，“click” 事件都会冒泡到祖先元素 "ul" 上并被捕获。最后的输出结果如下：
li clicked
a clicked
a clicked
li clicked
a clicked
a clicked
结论
通过这两个示例，我们可以总结出事件冒泡的规律：
- 当点击一个元素时，该元素的所有祖先元素上的事件监听器都将会依次被调用。
- 如果祖先元素也注册了相同类型的事件监听器，则先调用它自己的监听器，再调用它父元素的监听器。
- 监听器中可以通过
event.target属性来判断当前事件是由哪个元素触发的。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript事件冒泡简单示例 - Python技术站
微信扫一扫 
支付宝扫一扫 