JavaScript事件机制，也有让人深思的东西。在一开始未深入了解，我头脑里有几个问题发出：

1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？

2. 捕获型和冒泡型同时设置，谁生效？

3. 冒泡能够阻止，那捕获能够阻止吗？

4. jquery的on或bind是冒泡，还是捕获？

5. 两种事件方式的应用场景是？

示例

                    
     
                     0
      
          
     
          
     
                     1
      
          
     
          
     
                     2
      
          
     
          
     
                     3
      
          
     
          
     
                     4
      
          
     
          

}          function hello() {               console.log("i am " + this.id);          }     

这里关键的是第三个参数。W3CSchool解释为“指定事件是否在捕获或冒泡阶段执行”，我觉得这个说明会让人误会，搞得像捕获或冒泡都可以不选的样子。但其实不是，只是二选一，所以最好解释为“指定事件是在捕获阶段还是冒泡阶段执行”。

定义

JavaScript的事件是以一种流（回环流）的形式存在的，一个事件会有多个元素同时响应。如下图：

PS：图例来自

这个图非常清楚的说明的事件的执行顺序，完全可以解释示例中的结果。事件一直从window往触发目标元素流，当父或祖先捕获事件时，就先执行，不然就在冒泡阶段执行，直到window。

Q&A

1. 自下而上（冒泡）事件怎么写，自上而下（捕获）又是怎么写？

当需要冒泡时，第三参数设为false就行；

当需要捕获时，第三参数设为true就行；

2. 捕获型和冒泡型同时设置，谁生效？

按第三参数的设置，只有二选一，并不存在可以同时设置情况。

3. 冒泡能够阻止，那捕获能够阻止吗？

冒泡事件是能够阻止，e.stopPropagation();，大家是比较清楚的，同样的捕获事件也是能阻止的。

其实就是当先触发的事件是在捕获过程的，阻止了事件传播，就是捕获阻止，当在冒泡过程中阻止，就是冒泡阻止。

结果就是，事件流不再继续流了，无论是往下还是往上。

4. jquery的on或bind是冒泡，还是捕获？

经过上面示例可以验证， jquery的on或bind是冒泡执行的。

另外在jquery3.0.0的源码4943行地方：

// Init the event handler queue if we're the firstif ( !( handlers = events[ type ] ) ) {     handlers = events[ type ] = [];     handlers.delegateCount = 0;     // Only use addEventListener if the special events handler returns false    if ( !special.setup ||         special.setup.call( elem, data, namespaces, eventHandle ) === false ) {         if ( elem.addEventListener ) {               elem.addEventListener( type, eventHandle );         }    }}

这里可以很明显看到，事件的注册并没有传第三个参数，所以 jquery的on或bind肯定是冒泡执行的。

5. 两种事件方式的应用场景是？

额，这个问题并不好回答，就具体问题，具体分析了。

 

总结

小小的往细处想，竟然发现我其实有些细节并没明白，共勉。

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址 ：