讲讲JS中的事件机制

解决页面中事件流（事件发生顺序）

事件冒泡与事件捕获

事件冒泡是从下往上，也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

事件捕获与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

addEventListener的第三个参数就是为冒泡和捕获准备的。

element.addEventListener(event, function, useCapture)

第一个参数是需要绑定的事件
第二个参数是触发事件后要执行的函数
第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
事件冒泡与事件捕获应用:事件代理

注册事件的3种形式

1、onlick -->事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题

// html 页面中内联事件写法οnclick="xxx()"
ele.onclik = null;   //解绑单击事件，将onlick属性设为null即可

2、addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖

//事件类型没有on，false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执行一次。
ele.addEventListener('click', function(){ }, false);  
//解绑事件，参数和绑定一样
ele.removeEventListener(event.type, handle, boolean);

3、attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段

//如果handle是同一个方法，绑定几次执行几次，这点和addEventListener不同,事件类型要加on,例如onclick而不是click
ele.attachEvent('onclick', function(){ }); 
//解绑事件，参数和绑定一样
ele.detachEvent("onclick", function(){ });

事件机制的应用

事件代理（事件委托），利用事件冒泡的特性，将里层的事件委托给外层事件，根据event对象的属性进行事件委托，改善性能。
使用事件委托能够避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

钩子函数和回调函数的区别

一般认为，钩子函数就是回调函数的一种，其实还是有差异的，差异地方就是：触发的时机不同。

钩子函数

先说钩子函数：
钩子（Hook）概念源于Windows的消息处理机制，通过设置钩子，应用程序对所有消息事件进行拦截，然后执行钩子函数。

let btn = document.getElementById("btn");
btn.onclick = () => {
    console.log("i'm a hook");
}

上面的例子，在按钮点击时候立即执行钩子函数。而看下面的例子：

回调函数

btn.addEventListener("click",() =>{
    console.log(this.onclick);//undefined
});

给btn绑定了一个监听器，只有消息捕获完成之后才能触发回调函数。

很明显的差别就是：钩子函数在捕获消息的第一时间就执行，而回调函数是捕获结束时，最后一个被执行的。

回调函数其实是调用者将回调函数的指针传递给了调用函数，当调用函数执行完毕后，通过函数指针来调用回调函数。而钩子函数在消息刚发出，没到达目的窗口前就先捕获了该消息，先得到控制权执行钩子函数，所以他可以加工改变该消息，当然也可以不作为，还可以强行结束该消息。

https://www.cnblogs.com/tangjiao/p/10007707.html

JavaScript事件的捕获阶段（Capture phase）