关于事件流的简单理解

JS事件

1、首先，什么是事件？

​ JavaScript和Html发生交互是通过事件来实现的，事件，就是文档或浏览器窗口发生一些特定的交互的瞬间

2、什么是事件流？

事件流就是，事件传播的过程。

DOM中完整的事件流包括了三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段

事件通过捕获到达目标元素，这个时候就是目标阶段，从目标节点元素将事件上传到根节点的构成阶段，冒泡阶段

3、关于事件冒泡以及事件捕获

• 事件冒泡，也就是自下而上，从目标触发的元素逐级向上传播，直至window对象

• 事件捕获：

​ 也就是从document逐级向下传播到目标元素，但是有与IE浏览器的限制，很少使用到事件捕获

后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。

DOM2级事件规定的事件流包括三个阶段： （1）事件捕获阶段 （2）处于目标阶段 （3）事件冒泡阶段

3、关于DOM事件的处理

​ 当我们在DOM节点中添加了事件之后，就需要对事件进行处理，而DOM事件的处理主要是分为4各级别：

1. DOM0级事件
2. DOM1级事件
3. DOM2级事件
4. DOM3级事件

• DOM0级处理程序

​ 把一个函数赋值给一个事件处理程序属性

    var btn2 = document.getElementById("btn2");
    btn2.onclick = function() {
        alert("hello world");
    }
    btn2.onclick = null;    //移除事件处理程序

• DOM2级处理程序

DOM2事件机制

同样的事件和事件流机制下的相同方法只会触发一次。

为当前元素创建一个事件池,把所有需要绑定的方法存储到事件池中，当事件触发的时候,到对应的事件池中找到对应的方法 依次执行 即可

 let oDiv = document.getElementById("div1");
 
  function fn() {
        console.log("fn");
        return "100"
    }
    
    oDiv.addEventListener("click",  function () {
        console.log("fn");
    }, false);
   
    oDiv.addEventListener("click", fn1, false);
    
    oDiv.removeEventListener("click",  function () {
        console.log("fn");
    }, false);

备注：

其中DOM1级事件处理标准中并没有定义相关的内容，所以没有所谓的DOM1事件处理；

DOM3级事件是在DOM2级事件的基础上添加了更多的事件类型。