JS深钻：事件机制问答——注册事件监听器、事件响应操作、冒泡和捕获事件机制问题描述：1）事件机制是如何工作的？它与事件循环机制有何不同？答：事件机制不同于事件循环。它处于用户交互级别并依赖于事件流。Dom事件流分为3个阶段：事件捕获、目的地到达、事件冒泡。事件捕获先发生，可以提前拦截事件。然后，实际的目标元素接收事件。最后一个阶段冒泡，最晚这个阶段要响应一个事件。因此，浏览器时刻监控着用户的操作。一旦一个事件被触发，相应的事件流就会被触发。这时候如果注册了事件监听函数，就会被触发。如果同时触发多个事件，则事件响应将依次执行。用户通过为固定元素注册事件监听器来手动添加事件响应函数。2.事件监听的方法问题描述：1）有几种方法？有什么不同？2）addEventListner的第三个参数？1）事件监听方法和HTML事件处理方法有3种：特定元素支持的每个事件都可以使用事件处理程序的名称以HTML属性的形式指定。这时属性的值必须是可以执行的JavaScript代码，一般会绑定为事件处理器。这种方式最大的缺陷是HTML代码和JS代码混合在一起，当需要事件处理的元素较多时不适用。Dom0事件处理方式：将一个函数赋值给一个eventhandler属性，它最大的限制是一个事件可以只绑定一个事件处理程序，如果绑定多个，后者将覆盖前者。让btn=document.getElementById("myBtn");btn.onclick=function(){console.log(this.id);//"myBtn"};Dom2事件处理程序：定义了两个方法：addEventListener()和removeEventListener()。这两个方法暴露在所有DOM节点上，接收3个参数：事件名称、事件处理函数和一个布尔值，true表示在捕获阶段调用事件处理函数，false（默认值）表示在捕获阶段调用事件冒泡阶段处理程序。与方法2不同，addEventListener可以为一个事件注册多个监听器。让btn=document.getElementById("myBtn");btn.addEventListener("click",()=>{console.log(this.id);},false);需要注意的是，removeEventListener的几个参数，必须和addEventListener的保存完全一样，才能取消监听。让btn=document.getElementById("myBtn");让handler=function(){console.log(this.id);};btn.addEventListener("click",handler,false);//取消btn.removeEventListener("click",handler,false);//有效！2）addEventListener的第三个参数在旧版DOM规定中，第三个参数默认设置当前事件监听器在冒泡（默认）/捕获阶段执行。它是一个布尔值，默认为false。但实际上，第三个参数已经有了更复杂的配置。它被设置为一个名为option的对象。可用选项如下：3.事件操作问题描述1）事件处理的事件对象是什么？可以获得哪些信息？答：无论采用何种监控方式，事件都是传递给事件处理程序的唯一变量，称为事件对象。事件对象包含与特定事件相关的属性和方法，这些属性和方法因情况而异。但是事件对象固定包含一些公共属性和方法。4.冒泡和捕获问题描述：1）如果祖先元素的事件处理已经被捕获，后代是否会触发事件监听？2）捕获和冒泡是各自撤销默认行为的方法？1）答案是肯定的。由于事件流的三个阶段是固定的，即无论事件是否绑定监听和处理，事件都会经过事件流三个阶段涉及的所有元素。防止它的唯一方法是手动添加防止默认行为。2）防止默认行为的方法使用event.stopPropagation()来防止冒泡和捕获阶段的默认行为，这样后续的元素就不会受到影响。另外要补充的是，如果要阻止元素本身的默认事件响应行为，就得使用event.preventDefault()，比如标签的跳转行为。让a=document.getElementById('alink');a.addEventListener('click',(e)=>{e.preventDefault();})
