本文共 1490 字，大约阅读时间需要 4 分钟。

1、事件流

事件流指的是从页面中接收事件的顺序。分为冒泡流和捕获流。

DOM二级事件规定事件流包括三个阶段：

1、事件捕获阶段 2、处于目标阶段 3、事件冒泡阶段

DOM在触发事件后，会经历事件捕获和事件冒泡两个最重要阶段。

2、事件冒泡

由最里层向最外层触发事件的过程，叫事件冒泡。

例1：事件冒泡测试

  
     
     
         
   
    
    
     Please click me!
    
  
   

如果单击了div，事件会按child->parent->body->document->window顺序触发，相当于逐级向上触发，这种情况叫事件冒泡。

 

3、事件捕获

由最外层向最里层触发事件的过程，叫事件捕获。

语法：DOM.addEventListener('事件名',callback,true)

  
     
       
   
    
    
     Please click me!
    
  
   

由最外层向最里层触发事件的过程，叫事件捕获，这个过程与事件冒泡的过程是相反的，如果想要把事件冒泡改为事件捕获，要用addEventListener去写事件监听，不要直接用onXXX事件去写，将触发的子元素的父元素以上的元素的事件后用true实现。

 

4、阻止冒泡

var e = e || window.event;

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; // 阻止事件冒泡兼容写法

e.stopPropagation(); // 不考虑兼容的写法

例3：测试阻止冒泡

  
     
     
         
   
    
    
     Please click me!
    
  
   

5.事件委托

将所有子元素的事件写到（委托）父元素上，这样的过程叫事件委托。

使用场景：

1、将多个子元素的事件委托给父元素完成（基于性能优化的考虑） 2、在动态加进来元素上绑定事件

例4：测试事件委托

  
     
       
   
    
    
li01
    
    
li02
    
    
li03
    
    
li04
    
    
li05
  
   

 event.js中的代码

var eventDeal = {  //event对象兼容处理  getEvent: function (event) {    return event || window.event  },  //目标对象兼容处理  getTarget: function (event) {    return event.target || event.srcElement  },  //绑定事件兼容处理  addHandler: function (element, type, handler) {    if (element.addEventListener) {      element.addEventListener(type, handler, false)    } else if (element.attachEvent) {//兼容IE低版本      element.attachEvent('on' + type, handler)    } else {      element['on' + type] = handler    }  }}

 

转载地址：http://ifvrn.baihongyu.com/