关于es6:JS深挖事件机制答疑注册事件监听事件响应操作冒泡和捕获

目录：1、事件机制概念
2、注册事件监听的办法
3、事件操作
4、冒泡和捕捉

1、事件机制

问题形容：
1）事件机制是如何起作用的？它跟事件循环机制有何区别？

答：
事件机制辨别于事件循环，它是用户交互层面的，依附的是事件流。

Dom 事件流分为 3 个阶段：事件捕捉、达到指标和事件冒泡。事件捕捉最先产生，为提前拦挡事件提供了可能。而后，理论的指标元素接管到事件。最初一个阶段是冒泡，最迟要在这个阶段响应事件。

所以是浏览器时刻监听用户操作，一旦触发了事件，就会触发对应的事件流，这时候如果注册了事件监听函数，就会被触发。如果有多个事件同时触发，就会顺次执行事件响应。

用户通过对固定元素注册事件监听的办法，来手动增加事件响应函数。

2、事件监听的办法

问题形容：
1）几种办法？有何区别？
2) addEventListner 的第三个参数？

1）有三种事件监听办法
HTML 事件处理办法：特定元素反对的每个事件都能够应用事件处理程序的名字以 HTML 属性的模式来指定。此时属性的值必须是可能执行的 JavaScript 代码，失常会绑定为事件处理函数。这种办法最大的缺点就是将 HTML 代码和 JS 代码混用，且当须要事件处理的元素十分多时，不实用。

<input type="button" value="Click Me" onclick="console.log('Clicked')"/>

Dom0 事件处理办法：把一个函数赋值给一个事件处理程序属性，它的最大局限是，一个事件只能绑定一个事件处理，若绑定多个，那么前面的会笼罩后面的。

let btn = document.getElementById("myBtn"); 
btn.onclick = function() {console.log(this.id); // "myBtn" 
};

Dom2 事件处理程序：定义了两个办法：addEventListener()和 removeEventListener()。这两个办法裸露在所有 DOM 节点上，它们接管 3 个参数：事件名、事件处理函数和一个布尔值，true 示意在捕捉阶段调用事件处理程序，false（默认值）示意在冒泡阶段调用事件处理程序。

与办法 2 不同，addEventListener 能够给一个事件注册多个 listener。

let btn = document.getElementById("myBtn"); 
btn.addEventListener("click", () => {console.log(this.id); 
}, false);

须要留神的是，removeEventListener 的几个参数，必须与 addEventListener 的保留完全一致，才可能勾销监听。

let btn = document.getElementById("myBtn"); 
let handler = function() {console.log(this.id); 
}; 
btn.addEventListener("click", handler, false); 
// 勾销
btn.removeEventListener("click", handler, false); // 有成果！

2）addEventListener 的第三个参数
在旧版本的 DOM 规定中，第三个参数默认规定为设置以后事件监听是在冒泡（默认）/ 捕捉阶段执行，它是一个 boolean 值，默认为 false。然而理论目前第三个参数曾经有更简单的配置，它设置为一个叫 option 的对象，可用选项如下：

3、事件操作

问题形容
1）事件处理的 event 对象是什么？能获取哪些信息？

答：
无论是哪种监听办法，event 是传给事件处理程序的惟一变量，称为事件对象。事件对象蕴含与特定事件无关的属性和办法，其内容视状况不同。然而 event 事件对象固定蕴含一些公共属性和办法。

4、冒泡和捕捉

问题形容：
1）如果先人元素的事件处理曾经被捕捉，那么子孙还会触发事件监听嘛？
2）捕捉和冒泡各自解除默认行为的办法？

1）答案是必定的
因为事件流三个阶段是固定的，也就是无论是否绑定事件监听和解决，事件都会在事件流的三个阶段通过所有波及到的元素，阻止的办法只有手动的增加阻止默认行为。

2）阻止默认行为的办法
应用 event.stopPropagation（）能够阻止冒泡和捕捉阶段的默认行为，让后续的元素不受影响。

<script>
    let ul = document.getElementsByClassName('ulList');
    let li1 = document.getElementsByClassName('first');

    console.log('ul', ul);
    ul[0].addEventListener('click', (event) => {event.stopPropagation();
    }, false)

    li1[0].addEventListener('click', (event) => {console.log(event.target);
    }, false)
</script>

另外补充一下，想要阻止元素自身的默认事件响应行为，得用 event.preventDefault()，如标签的跳转行为等。

let a = document.getElementById('alink');
a.addEventListener('click', (e) => {e.preventDefault();
})