JS DOM 事件流

3 DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
比如我们给一个div 注册了点击事件:

DOM事件流分为3个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

●事件冒泡：IE最早提出,事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
●事件捕获：网景最早提出,由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意：

1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick和attachEvent 只能得到冒泡阶段。
3. addEventListener (type, listener[, useCapture] )第三个参数如果是true ,表示在事件捕
   获阶段调用事件处理程序：如果是false (不写默认就是false) ，表示在事件冒泡阶段调用事件处理
   程序。
   4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
   5.有些事件是没有冒泡的，比如onblur、onfocus. onmouseenter. onmouseleave

// dom事件流三个阶段
//1.JS代码中只能执行捕获或者冒泡其中的一个阶段。
// 2. onclick 和attachEvent (ie) 只能得到冒泡阶段。
// 3.捕获阶段如果addEventListener 第三个参数是true 那么则处于捕获阶段document -> html - >
body -> father -> son
var son = document. querySelector(' .son' );
son. addEventListener('click'，function() {
    alert('son');
}, true);
var father = document . querySelector(' . father' );
father . addEventListener('click，function() {
alert( 'father');
}, true);

// 4.冒泡阶段如果addEventListener 第三个参数是false 或者省略那么则处于冒泡阶段 son ->father ->body -> html -> document
var son = document . querySelector(' . son' );
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 ' ) ;
})