JavaScript中的事件冒泡是指,当一个元素上的事件被触发后,该事件会向父级元素逐层冒泡,直至冒泡至document对象为止。在事件冒泡过程中,可以通过事件对象的currentTarget属性获取当前处理事件的元素。
要使用事件冒泡,只需要将事件绑定在父级元素上即可,父级元素上的事件会一直向上层元素冒泡。
要避免意外触发事件,可以通过停止事件冒泡或阻止默认行为来避免。停止事件冒泡可以使用事件对象的stopPropagation()方法,而阻止默认行为可以使用preventDefault()方法。
以下是一个示例代码:
<html>
<head>
<title>事件冒泡</title>
</head>
<body>
<div id="outer">
<div id="inner">
<button id="btn">Click Me!</button>
</div>
</div>
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var btn = document.getElementById("btn");
// 点击按钮会触发三次事件冒泡
// 依次为<button> -> #inner -> #outer
btn.addEventListener("click", function(e) {
alert(e.currentTarget.id);
});
// 停止事件冒泡
inner.addEventListener("click", function(e) {
e.stopPropagation();
});
// 阻止默认行为
outer.addEventListener("click", function(e) {
e.preventDefault();
});
</script>
</body>
</html>