JS事件基础 事件流

一、事件基础
添加侦听、回调函数、事件抛发
事件的侦听需要在抛发之前定义，事件类型有分为系统事件与自定义事件，系统事件由系统自动抛发，不需要我们写代码抛发，而自定义事件是需要的。
1.添加侦听
element.addEventListener("事件类型",事件回调函数);这是IE8及以上的写法。
给DOM元素添加一个事件侦听（监听），只能收到对应事件类型的消息，当收到这个消息，执行事件回调函数。
2.回调函数

function clickHandler(e){
      console.log(e);
}

事件回调函数有且仅有一个参数，就是e，它是一个事件对象，侦听事件收到消息时获得的事件对象。
在回调函数中this是侦听事件的对象e.target 事件的目标 真实点击到最终得目标对象，e.currentTarget 和this相同,都是事件侦听的对象。
3.事件抛发
document.dispatchEvent(X); X就是自定义的事件类型。
自定义事件可以用来解耦，比如说a对象中的局部变量想传递到b对象的方法中，就可以用自定义事件的方法来降低耦合，通过事件来传播。
二、事件流
捕获阶段、目标阶段、冒泡阶段
事件执行的顺序原理，举个例子来说明：

<div class="div0">
    <div class="div1">
        <div class="div2"></div>
    </div>
</div>

三个div：
当点击div1时，首先document先收到click事件，然后向下传播，一直传播到被点击的div1为止，这之前是捕获阶段，触发目标的处理程序，达到目标阶段，再从div1向上传播，再传递回document，冒泡阶段。
JS：

var div0=document.querySelector(".div0");
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
div0.addEventListener("click",clickHandler0);
div1.addEventListener("click",clickHandler1);
div2.addEventListener("click",clickHandler2);
function clickHandler0(e){
    console.log("点击div0")
}
function clickHandler1(e){  
    console.log("点击div1")
}
function clickHandler2(e){
    console.log("点击div2")
}

当点击div1时：（前两行是谷歌插件造成的，不用管它）
当点击div2时：

侦听方法是有三个参数的：div2.addEventListener(事件类型,事件回调函数,是否捕获时执行);
事件类型：必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型。
事件回调函数：指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数。
是否捕获时执行：默认值是false，在冒泡时执行，捕获时不执行，设置为true时，在捕获时执行，（也可以传递个对象）。例如这么写：div1.addEventListener("click",clickHandler1,true); 点击div2时，div1会先执行。

可以设置在捕获阶段执行，也可以设置让其停止传播：e.stopPropagation(); IE8及以上，写在回调函数中，这样就不会继续传递了。
事件委托就是这个原理，给被委托元素的父元素添加侦听，当点击被委托元素时，它会冒泡传递到父元素，这时可以用e.target获取被点击（操作）的元素。