前端（十四）-DOM

事件冒泡机制

时间传播机制，这个机制天生就带有；
当触发底层元素的某一个事件行为，那么它的上级元素的对应事件行为也会一级一级的触发，一直发到我们的document中；（具有相同的事件类型才会触发）；
从底层一级一级往上传播的机制叫做冒泡；
false代表的是冒泡阶段执行。；
true代表的是在捕获阶段执行；
同一个元素既可以在捕获阶段处理，也可以在冒泡阶段处理；

事件委托

利用DOM的传播机制（点击任意元素，document的click都要触发），我们给document绑定一个点击事件，在事件中我们只需要获取事件源，根据不同的事件源做不同的事件就可以，这样就可以不用给元素一个一个的绑定事件。
当事件发生在子元素中的时候，通常会引起连锁反应，就是在他祖先元素上也会发生这个事件，比如说你点击了div也就相当于点击了body，同样相当于点这个html，同样相当于点击了document。

理解事件传播的时候需要的注意

1. 是事件本身在传播，而不是绑定在事件上的方法会传播。
2. 并非所有的事件都会传播，像onfocus onblur事件就不传播，onmousrenter，onmouseleave事件也不会传播。
   我们要知道常见的事件默认行为有哪些，并且要知道组织默认行为，只要绑定到这个行为事件的方法，最后加一句return false就可以了。
   需要强调的是，如果你的事件绑定是由addEventListener来实现的，那么组织默认行为必须用e.preventDefault=true
   阻止事件冒泡

function(e){
e,peventDefault();
}

事件委托：事件委托就是用事件的传播机制，无论哪一个网页元素，它的click事件最终都会传到document上，这样只需要在document上处理，click事件即可。

document.onclick = function(e){
	e=e||window.event;
	var target = e.target || e.srcElement;//获取事件源
	alert(target.nodeName)
	return false
}

事件兼容性问题有哪些？怎么解决？

1. 事件对象本身，标准浏览器是事件发生时自动给方法传一个实参，这个实参就是事件对象，IE是全局的window.event,解决方法是e=e||window.event。
2. 事件源：e.target,IE下是e.srcElement。解决方法是var target=e.target||e.srcElement。
3. DOm2级事件绑定:ele.addEventListener,IE:ele.attachEvent
   解决方法：if（ele.addEventListener）{}else if（ele.attachEvent）{}
4. 3中的IE的attachEvent绑定的方法上

• 第1点，this不是当前元素了，而是变成了window。
• 第2点事件的执行顺序是混乱的。
• 第3点，同一个函数可以重复绑定的同一个事件上。

5. 阻止事件传播。
6. 阻止默认行为。
7. 相对于文档的鼠标坐标IE，不支持这两个属性。

事件流

1. IE的事件流：事件冒泡。
   由事件的目标event.srcElement接受事件，然后逐级向上传播事件，直到文档节点到document。
2. 其他浏览器支持的另一段事件流：事件捕获
   与事件冒泡正好相反，文档节点document先监听到事件，然后把事件逐级向下传递事件爱你，直到目标节点event.target
   3.doM事件流：Dom2事件规范的事件流就是综合了以上两种，把事件流分为了以下三个阶段：事件捕获阶段：不涉及事件目标，或者说这个阶段在目标之前就结束了。处于目标阶段：被看作冒泡阶段的一部分，所以可以在冒泡阶段在目标事件上操作事件。事件冒泡阶段。
   规范和浏览器实现的差别：
   Dom2级事件规范的捕获阶段，事件从文档节点document开始传播，现在浏览器大多都是从window对象开始传播事件的。
   Dom2级事件规范的捕获阶段，不涉及事件目标，现在浏览器大多数都在这个阶段包含事件目标。

我们如何给一个DOM同时绑定两个点击事件，一个用捕获，一个用冒泡。

先捕获后冒泡；
addEventListener绑定几次就执行几次，即便绑定的函数一样也会多次执行，结果应该是先显示捕获，再显示冒泡。
冒泡，需要先冒泡到根节点，再向下碰到有绑定dom就执行，而捕获是直接从根节点开始。
任何发生在w3c事件模型中的事件，首先进入捕获阶段，直到达到目标元素在进入冒泡阶段。
无论是冒泡事件，还是捕获事件，元素都会先执行捕获阶段。