javascript事件之捕获阶段和冒泡阶段
我们学习javascript的时候，都会接触到事件，我们今天就来说说事件的捕获和冒泡。事件冒泡阶段：事件开始的时候由事件发生的元素接受，然后逐级向上传播，触摸相对的事件。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div {
padding: 20px;
}
#div1 {
background: blue;
}
#div2 {
background:red;
}
</style>
<script type="text/javascript">
window.onload = function () {
var Div1 = document.getElementById('div1');
var body = document.getElementsByTagName("body");
var html = document.getElementsByTagName("html");
function fn1() {
console.log(this.tagName);
}
Div1.addEventListener('click', fn1, false);
body[0].addEventListener('click', fn1, false);
html[0].addEventListener('click', fn1, false);
}
</script>
</head>
<body id="body">
<div id="div1"></div>
</body>
</html>结果：
事件捕获阶段：这个跟冒泡事件的顺序则是相反的，是从顶部往下一直传播到具体的事件发生元素，我们把上面的代码小小修改一下。
代码：
Div1.addEventListener('click', fn1, true);
body[0].addEventListener('click', fn1, true);
html[0].addEventListener('click', fn1, true);结果：
注意：事件捕获在事件冒泡之前发生
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年11月06日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读