dom 事件流 三个阶段
- JS 代码中只能执行捕获或者冒泡其中的一个阶段;
- onclick 和 attachEvent(ie) 只能得到冒泡阶段;
- 捕获阶段: 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son;
- 冒泡阶段 :如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
案例体会:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
var son = document.querySelector('.son');
//冒泡阶段:false 或者省略
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
</html>
阻止冒泡行为
- 阻止冒泡,stop 停止 Propagation 传播
- e.stopPropagation()
对以上案例阻止冒泡:
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
//阻止冒泡,stop 停止 Propagation 传播
e.stopPropagation()
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
阻止默认行为
- 普通浏览器 e.preventDefault(); 方法e.preventDefault();
- 低版本浏览器 ie678 returnValue 属性 e.returnValue;
- 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
<!DOCTYPE html>
<body>
<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 常见事件对象的属性和方法
// 1. 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
// 2. 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
})
// 3. 传统的注册方式
a.onclick = function(e) {
return false;
alert(11);
}
</script>
</body>