事件：事件流、事件对象、事件委托、如何先冒泡后捕获

事件

事件流

事件流描述的是页面接收事件的顺序（比如点击）

可以理解为向水底扔了石头，石头向下为捕获阶段，向上冒泡为冒泡阶段，同理鼠标点击后DOM先向下捕获这次点击事前，捕获后再向上冒泡，中间经过的对应事件处理函数都会被触发

• 实际开发过程都用冒泡，即没有参数
• 有些事件没有冒泡，如onblur，onfocus，onmouseenter，onmouseleave
• 事件冒泡有时会带来麻烦，比如给son和father添加点击事件，点击son，会先弹出son，再弹出father，但我们只想弹出son；但是也有好处（事件委托），给father注册点击事件，然后利用target找到点击的son，再冒泡到ul上触发事件

事件对象

事件监听函数里自带的一个形参，可以自己命名，一般用e

div.onclick=function(e){
    //输出看看对象e的内容
    console.log(e);//有很多鼠标的相关信息
    //兼容IE
    e=e||window.event;
}

e.target与this的区别

e.target返回的是触发事件的对象（点击的对象）

this返回的是绑定事件的对象

阻止冒泡

e.stopPropagation() //stop停止Propagation传播

element.addEventListener(event, function, useCapture);

useCapture默认为false即冒泡，true时为捕获

事件委托（代理、委派）

拯救用for循环给元素绑定事件

这样可以只操作一次dom，提高程序性能

原理

不是给每个子节点单独设置监听器，而是事件监听器都设置在父节点上，然后利用冒泡影响设置每个子节点。

例子：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

如何先冒泡后捕获

在正常事件流中，都是先捕获后冒泡，这是不可更改的

我们只能给这个元素绑定两个事件监听addEventListener第一个参数设置为冒泡，第二个参数设置为捕获，以此达到先冒泡后捕获。