js中的DOM事件之冒泡和捕获事件详解

DOM中的事件是一个很中要的东西，它可以让用户和浏览器之间进行交互，以此来实现人机交互效果

DOM事件

DOM事件分为DOM0级事件和DOM2级事件。DOM0级其实不存在，我们把DOM最初的版本叫0级。在DOM2级的时候更新了一种新的事件绑定的方式，所以才有了所谓DOM0级和DOM2级事件。

• click
• keyup keydown keypress
• scroll
• mouseover

DOM事件在去使用的过程中，语法很简单。

DOM0级事件绑定：

DOM.on事件名 = function () {
  
}

// 该方法绑定时无法同时给同一个元素绑定多个相同的事件
DOM.onclick = function () {}
DOM.onclick = function () {} // 这个会覆盖上面的

DOM2级事件绑定:

DOM.addEventListener("事件名", 事件句柄, isCapture)

// 一般这么写
DOM.addEventListener("事件名", function () {}, false)

IE8及以下版本需要使用attachEvent()了解即可

DOM.attachEvent('on事件类型', function () {})

事件流

最早的时候，浏览器市场被网景公司netscape占据，后来微软推出了IE抢占市场，后来网景就倒闭了。

两个浏览器有不同的思想。netScape浏览器，在事件执行操作上，推崇事件捕获。而IE浏览器推崇事件冒泡

事件流在最早有两种相对的事件流：冒泡事件流和捕获事件流。

冒泡事件流

当我们触发一个元素的事件时，会从这个这个元素沿着DOM树向上冒泡，有相同事件的元素会执行对应元素上的事件，没有则继续冒泡，直到到document结束。图中红色部分。

捕获事件流

当我们触发一个元素的事件时，会从document沿着DOM树向下捕获， 直到找到这个元素位置，途径的元素有对应事件，则执行，和冒泡顺序相反

DOM2级事件有了标准事件流

在标准的事件流中，先捕获，到达事件源元素，再冒泡。具体实在捕获阶段执行事件还是在冒泡阶段执行事件，需要看第三个参数是true还是false

DOM.addEventListener("事件", function () {}, false) // 在冒泡阶段执行事件
DOM.addEventListener("事件", function () {}, true) // 在捕获阶段执行事件

事件流带来的好处和坏处

事件委托（事件代理）

把本该自己执行的事件添加到自己的父元素或者祖先元素上，然后利用事件对象限制执行的条件。

e.target // 具体的事件作用的元素

• 可以给后续添加的元素绑定事件
• 节省内存

祖先元素.on事件类型 = function (e) {
  if (e.target.xxx === "xxx") {
    // 执行对应的操作
  }
}

// 当元素代理的事件过多时，可以使用switch
祖先元素.on事件类型 = function (e) {
  switch(e.target.xxx) {
    case 值1: 
      
      break
    case 值2:

      break
    case 值3:

      break
  }
}

阻止冒泡

冒泡在有些时候需要被阻止，当元素本身和内部元素有相同类型的事件执行时，一般需要阻止冒泡

dom.onclick = function (e) {
  e.stopPropagation()
}

阻止冒泡在IE低版本浏览器中，可以使用

e.cancelBubble = true