dom事件模型
2018-09-05 本文已影响15人
阿亮2019
先捕获，再冒泡
第三个参数为false 冒泡的时候执行
第三个参数为true 捕获的时候执行
不传则默认为false
注意点: 如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的。
dom事件模型
一直冒泡到body。。。
e.stopPropagation() : 阻止事件传递，不阻止默认行为
说明: 如果捕获阶段stopPropagation，则后续捕获冒泡都不会触发。
e.preventDefault是事件对象Event的一个方法，作用是取消一个目标元素的默认行为如链接<a href="xxx">点我</a>，提交按钮<input type=”submit”>等
e.preventDefault() : 阻止默认行为，不阻止事件传递
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="grand">
爷爷
<div id="father">
爸爸
<div id="son">
儿子
</div>
</div>
</div>
</body>
</html>
/*
先捕获，再冒泡
第三个参数为false 冒泡的时候执行
第三个参数为true 捕获的时候执行
不传则默认为false
注意点: 如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序是由监听顺序决定的。
*/
document.getElementById('son')
.addEventListener('click', function() {
console.log('son clicked');
}, false);
document.getElementById('son')
.addEventListener('click', function() {
console.log('son clicked 2');
}, true);
document.getElementById('father')
.addEventListener('click', function() {
console.log('father clicked');
}, true);
document.getElementById('grand')
.addEventListener('click', function() {
console.log('grand clicked');
}, false);
document.addEventListener('click', function() {
console.log('document clicked');
}, false);
