JS 事件捕获与事件冒泡
事件捕获与事件冒泡
<script>
function showTagName() {
alert("事件捕获: " + this.tagName);
}
var elems = document.querySelectorAll("div, p, a");
for (let elem of elems) {
//addEventListener(event, function, useCapture);
//useCapture ：false冒泡（默认）， true捕获
elem.addEventListener("click", showTagName, true);
}
</script>
<body>
<div id="wrap">
<p class="hint">
<a href="#"></a>
</p>
</div>
</body>
点击a时, 同时触发p div
冒泡 触发事件顺序 a -> p -> div
捕获 触发事件顺序 div -> p -> a
阻止事件捕获和冒泡
1 event.stopPropagation(); [ˌprɒpəˈɡeɪʃən] 传递
会阻止事件捕获和事件冒泡，但是无法阻止标签的默认行为，例如点击链接任然可以打开对应网页。
function showAlert(event) {
alert("您点击了 "+ this.tagName + " 标签");
//阻止事件捕获和冒泡
event.stopPropagation();
}
var elems = document.querySelectorAll("div, p, a");
for(let elem of elems) {
elem.addEventListener("click", showAlert);
}
2 event.stopImmediatePropagation() [ i mi: diət] 立刻的,之后的
阻止同一节点的同一事件的其它事件处理程序，例如为某个节点定义了多个点击事件，当事件触发时，这些事件会按定义顺序依次执行，如果其中一个事件处理程序中使用了 stopImmediatePropagation() 方法，那么剩下的事件处理程序将不再执行。
function sayHi(event) {
alert("事件处理程序 1");
event.stopImmediatePropagation();
}
function sayHello() {
alert("事件处理程序 2");
}
// 为 id 为 link 的标签定义多个点击事件
var link = document.getElementById("link");
link.addEventListener("click", sayHi);//阻止下面的点击事件sayHello
link.addEventListener("click", sayHello);
3 event.preventDefault();
阻止默认操作, 某些事件具有与之关联的默认操作，例如当您单击某个链接时，会自动跳转到指定的页面
var link = document.getElementById("link");
link.addEventListener('click', function(event){
event.preventDefault(); // 阻止链接跳转
});
