此示例演示了如何以非常简单的方式触发和处理DOM中的事件。加载此HTML文档的BODY时,会在TABLE的顶行注册事件侦听器。事件侦听器通过执行函数stopEvent来处理事件,该函数更改表的底部单元格中的值。
但是,stopEvent还会调用事件对象方法event.stopPropagation,该方法可以防止事件进一步冒泡到DOM中。请注意,表本身有一个onclick事件处理程序,在单击表时应该显示一条消息。但是stopEvent方法已停止传播,因此在更新表中的数据后,事件阶段将有效结束,并显示一个警告框以确认这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event Propagation</title>
<style>
#t-daddy { border: 1px solid red }
#c1 { background-color: pink; }
</style>
<script>
function stopEvent(ev) {
c2 = document.getElementById("c2");
c2.innerHTML = "hello";
// this ought to keep t-daddy from getting the click.
ev.stopPropagation();
alert("event propagation halted.");
}
function load() {
elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent, false);
}
</script>
</head>
<body onload="load();">
<table id="t-daddy" onclick="alert('hi');">
<tr id="tbl1">
<td id="c1">one</td>
</tr>
<tr>
<td id="c2">two</td>
</tr>
</table>
</body>
</html>