前端学习--事件冒泡

Mar 21, 2017 | 技术 | 阅读

文章目录

1. 概念
2. 注意
3. 阻止事件冒泡
4. addEventListener
5. 其他

概念

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

注意

1、浏览器对事件的处理方式有三种，事件冒泡只是其中一种

IE从里到外（inside→outside）的冒泡型事件。
Netscape4.0从外到里（outside→inside）的捕获型事件。
DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法

2、不是所有事件都能冒泡，这几个事件不可以: blur、focus、load、unload。

3、不同浏览器事件处理方式细节不同

阻止事件冒泡

function stopBubble(e) {
  if (e && e.stopPropagation) {
    e.stopPropagation(); // W3C
  } else {
    window.event.cancelBubble = true; // IE
  }
}

addEventListener

支持W3C标准的浏览器的addEventListener(event, fn, useCapture)，第三个参数是Boolean值，true为事件捕获，false为事件冒泡。默认为false,即事件冒泡

其他

阻止浏览器的默认行为

1 2	e.preventDefault(); // W3C window.event.returnValue = false; // IE

event.stopImmediatePropagation():
如果某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.

前端 DOM