我们学习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);
结果:
注意:事件捕获在事件冒泡之前发生