|
本实例以一种非常简单的方式演示了事件是如何在 DOM 中启动和处理的。当这个 HTML 文档的 BODY 加载时，一个事件监听器被注册在 TABLE 的顶行。事件监听器通过执行函数 stopEvent 来处理事件，它改变了表格底部单元格的值。
然而，stopEvent 也调用了事件对象方法 event.stopPropagation，它使事件不再向 DOM 中冒泡。请注意，表格本身有一个 onclick 事件处理器，当表格被点击时应该显示一条信息。但是 stopEvent 方法已经停止了传播，所以在表格中的数据被更新后，事件阶段实际上已经结束，并且显示了一个警报框来确认这一点。
html doctype html>
事件传播
#t-daddy {
border: 1px solid red;
}
#c1 {
background-color: pink;
}
function stopEvent(event) {
const c2 = document.getElementById("c2");
c2.textContent = "hello";
// 这应该阻止 t-daddy 接收点击事件
event.stopPropagation();
alert("事件传递终止");
}
function load() {
const elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent, false);
}
一
二
|