js手札--关于事件冒泡与事件捕获

一、冒泡和捕获

事件执行：子元素在执行某个事件的前后，会引起上层元素触发相同事件。例：我点击了div，那么不光div会执行click事件，上层的body和html等等也会执行click。

冒泡与捕获解决了：事件执行顺序由谁开始，由谁结束

• 事件冒泡：click执行顺序（div -> body -> html -> document）

• 事件捕获：click执行顺序（document -> html -> body -> div）

冒泡与捕获方法

• IE < 9：只冒泡

      target.attachEvent(eventName, callback)  //只能冒泡
      target.detachEvent(eventName, callback)

• IE9+ | chrome | firefox | safari：冒泡+捕获

      target.addEventListener(eventName, callback) // 冒泡方式
      target.removeEventListener(eventName, callback)
      
      target.addEventListener(eventName, callback, true)  // 捕获方式
      target.removeEventListener(eventName, callback, true)
  

（一） 事件冒泡

啥也不说，看例子，点击t2区域：

很明显的，由内而外，没啥可说的。我这边没装IE，所以所以测试都是在（chrome，firfox，safari中测试的）。

（二）事件捕获

同样点击t2区域，可以见到变成由外而内：

（三）先捕获后冒泡

这次点击t1区域，先捕获，后冒泡

二、阻止冒泡和捕获

IE和Netscape的阻止方式

• IE：event.stopPropagation()

• Netscape：e.cancelBubble = true;

（一）阻止冒泡

同样点击t2区域，可以见到t3的click事件就不会被触发了。

（二）阻止捕获

同样点击t2区域，可以见到t2的click事件没有被触发。因为我们在触发t3的时候，让捕获停止了，那样t2也就接受不到要触发click的消息了，也就over了。

三、补充

关于Netscape: preventDefault()和IE: event.returnValue

这两个其实和捕获与冒泡一点关系都没有，是用来阻止事件的默认行为的。如：我点击<a>标签，正常说会执行跳转相应网页。但加入preventDefault()后就不会跳转了。

看例子：
照理说我点击了t1, 那应该会正常跳转才对

但加了下面的代码之后，就跳不动了。

总算结束了，每次去查捕获和冒泡的资料都发现会附带着preventDefault，也是懵了。一开始我以为preventEvent是阻止捕获的，stopPropagation是阻止冒泡的，后来发现其实压根就不是这样，也是我看的不仔细啊。唉，路还长着，继续，前行。