看了就明白的DOM事件流

Dom事件流

DOM事件流包括三个阶段。


1，事件捕获阶段：从最上层元素，直到最下层元素。路过的所有节点都可以捕捉到该事件。

2，处于目标阶段：事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

3，事件冒泡阶段：事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。

demo演示

html 代码：

<div class="a">
      <li class="b">
        <a href="#" class="c">点我</a>
      </li>
    </div>

js代码：

var div = document.getElementsByClassName('a')[0];    
var li = document.getElementsByClassName('b')[0];
var a = document.getElementsByClassName('c')[0];

//冒泡阶段
div.addEventListener('click',function(event){
  console.log('div');
});
li.addEventListener('click',function(event){
  console.log('li');
});
a.addEventListener('click',function(event){
  console.log('a');
});

//事件捕获过程处理，第三个参数设为true
div.addEventListener('click',function(event){
  console.log('div');
},true);
li.addEventListener('click',function(event){
  console.log('li');
},true);
a.addEventListener('click',function(event){
  console.log('a');
},true);

结果：

div  li  a  a  li  div   首先捕获阶段执行，再是冒泡阶段

 

 addEventListener最后一个参数，为true则代表使用事件捕获模式，false则表示使用事件冒泡模式。

阻止事件冒泡

 function cancelBubble(event){
        var event = event || window.event;
        if(event.stopPropagation()){
            event.stopPropagation();
        }else if(event.cancelBubble){
            event.cancelBubble = true;
        }else{
            return false;//用于处理使用对象属性注册的事件处理程序
        }
    }

return false其实做了三件事：

1.stopPropagation()：阻止事件传播 

2.preventDefault()：禁止浏览器默认行为，比如a标签被点击后页面会跳转 

3.立即结束当前函数并返回，

事件委托

JavaScript事件代理可以把事件处理器添加到一个父元素上，这样就避免了把事件处理器添加到多个子元素上。