DOM事件

事件的传播机制

• 事件捕获： 通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
• 事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

Dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

demo

DOM标准事件流

onclick与addEventLisenterr的区别

• 功能上addEventLisenter存在布尔类型的usecCpatrue参数，可以指定事件的传播方式，onclick只能采用标准的先捕捉在冒泡的方式。

addEventListener(event,funtionName,useCapture)
useCapture(可选)：布尔值，指定事件是否在捕获或冒泡阶段执行。
true :事件句柄在捕获阶段执行。
false :默认。事件句柄在冒泡阶段执行。

• 同一元素的onclick事件会被后面的onclick覆盖，而addEventLisenter则不会。

阻止传播、阻止默认事件

• preventDefault()；preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。
• stopPropagation()；stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是不会阻止默认行为。

demo

事件代理

事件代理是利用事件的冒泡机制，将子元素的事件，放到父元素甚至document上，这样就不需要给每个子元素添加事件。当页面存在很多元素需要绑定相同事件时，利用事件代理可以提高网页的性能，减少内存占用。

demo