事件传播

最新推荐文章于 2022-04-08 08:24:39 发布

Add_a_cat

最新推荐文章于 2022-04-08 08:24:39 发布

阅读量256

点赞数

分类专栏： js学习

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

此示例演示了如何以非常简单的方式触发和处理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>

Add_a_cat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件传播

此示例演示了如何以非常简单的方式触发和处理DOM中的事件。加载此HTML文档的BODY时，会在TABLE的顶行注册事件侦听器。事件侦听器通过执行函数stopEvent来处理事件，该函数更改表的底部单元格中的值。但是，stopEvent还会调用事件对象方法event.stopPropagation，该方法可以防止事件进一步冒泡到DOM中。请注意，表本身有一个onclick事件处理程序，在单击表时...
复制链接

扫一扫