JavaScript事件01——事件流
2019-07-24 本文已影响0人
葵自渡_
大纲：
- 概念（事件、事件流）
- 事件流模型（事件冒泡、事件捕获、DOM事件流）
一、概念：
1、事件：
事件就是用户或浏览器自身执行的某种动作。比如click，load等
2、事件流：
事件流描述的是从页面中接收事件的顺序
二、事件流模型
1、事件冒泡流
- 什么是事件冒泡：
事件冒泡是由IE开发团队提出来的事件流。简单来说，就是事件开始的子级元素一层一层向父级元素传播。
- 思路：
1、给button，div，body都绑定了click事件
2、点击button时，依次向上弹出
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body>
<div id="box">
<button id="btn">按钮</button>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var body = document.body;
btn.onclick = function(){
alert('这是按钮');
}
box.onclick = function(){
alert('这是box');
}
body.onclick = function(){
alert('这是body');
}
</script>
</html>
- 结果：
依次弹出“这是按钮”，“这是box”，“这是body”
2、事件捕获流
- 什么是事件捕获：
事件捕获是由Netscape团队提出的事件流。与事件冒泡相反，它是事件开始从根元素一层一层向子级元素传播。
- 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕获</title>
</head>
<body>
<div id="box">
<button id="btn">按钮</button>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box = document.getElementById('box');
var body = document.body;
btn.addEventListener('click',function(){
alert('这是按钮');
},true)
box.addEventListener('click',function(){
alert('这是box');
},true)
body.addEventListener('click',function(){
alert('这是body');
},true)
</script>
</html>
- 结果：
依次弹出“这是body”，“这是box”，“这是按钮”
- 注意：
1、在IE9+的浏览器也支持事件捕获，结果如上。在IE8之前都不支持事件捕获，只支持事件冒泡。
2、当addEventListener的第三个参数为true时，开启事件捕获。参数为false，开启事件冒泡
3、DOM事件流
- 什么是DOM事件流
DOM2级事件规定事件流有三个阶段：
1、事件捕获阶段
2、处于目标阶段
3、事件冒泡阶段
-
DOM2级事件规定的阶段
1、捕获（document——>html——>body）
2、处于目标（div） （在事件处理中被看成冒泡阶段的一部分）
3、冒泡阶段 -
IE9+，chrome、firefox等浏览器
都会在捕获阶段触发事件对象上的事件
