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区域:

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

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

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

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

(二)事件捕获

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

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

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

(三)先捕获后冒泡

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

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

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

二、阻止冒泡和捕获

IE和Netscape的阻止方式

  • IEevent.stopPropagation()

  • Netscapee.cancelBubble = true;

(一)阻止冒泡

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

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

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

(二)阻止捕获

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

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

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

三、补充

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

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

看例子:
照理说我点击了t1, 那应该会正常跳转才对
js手札--关于事件冒泡与事件捕获
js手札--关于事件冒泡与事件捕获

但加了下面的代码之后,就跳不动了。
js手札--关于事件冒泡与事件捕获

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

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