事件冒泡、事件捕获与事件监听

事件冒泡与事件捕获

页面和互动是通过事件来完成的，
事件捕获是指从document一直到触发事件的节点
事件冒泡则是从触发事件的事件源一直向上到document(好比气泡一直往水面冒，事件往父级元素方向冒)[^冒泡的只是事件，并不事件绑定的处理函数。]不管是父级以上元素是否绑定了事件，冒泡都是存在的,只有人为手动的添加代码去阻止。

**阻止事件冒泡的方法：**在执行函数中添加代码event.stopPropagation( );
**阻止默认事件的方法：**在执行函数中添加代码event.preventDefault

---

事件监听

事件监听与普通时间绑定的区别：

1. 普通的事件绑定只能给元素的相同事件绑定一个函数，如果绑定第二个则会将前一个覆盖，而事件监听可以给元素绑定多个函数
2. 事件监听可以控制事件的传播方式（事件冒泡/事件捕获）
3. 事件监听可以通过删除来取消事件监听，普通事件只能使用null取消

绑定事件监听的方法：

元素.addEventListener(事件类型，执行函数，执行阶段);
box.addEventListener("click",move,false);

执行阶段：true表示事件捕获，false表示事件冒泡，默认使用事件冒泡

删除事件绑定的方法：

元素.removeEventListener(事件类型，绑定的执行函数，执行阶段);
box.removeEventListener("click",move,false)

删除事件监听需要注意：

1. 元素与想要删除的元素相同，即相同的元素调用
2. 删除的事件名称要与绑定的事件名称一致
3. 函数名需要相同（匿名函数不行，需要全局函数）
4. 相同的执行阶段

以上同时满足，才能删除事件绑定