JavaScript 浏览器中的事件

1、事件的基本概念

　　事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发 load 事件，当鼠标悬浮于某一个元素上时会触发 hover 事件，当鼠标点击某一个元素时会触发 click 事件等等。

　　事件处理就是当事件被触发后，浏览器响应这个事件的行为，而这个行为所对应的代码即为事件处理程序。

2、事件操作：监听与移除监听

2.1 监听事件

　　浏览器会根据一些事件作出相对应的事件处理，事件处理的前提是需要监听事件，监听事件的方法主要有以下三种：

2.1.1 HTML 内联属性

　　即在 HTML 元素里直接填写与事件相关的属性，属性值为事件处理程序。示例如下：

<button onclick="console.log('You clicked me!');"></button>

　　这种方式将 HTML 代码与 JavaScript 代码耦合在一起，不利于代码的维护，所以应该尽量避免使用这样的方式。

2.1.2 DOM 属性绑定

　　通过直接设置某个 DOM 节点的属性来指定事件和事件处理程序，上代码：

const btn = document.getElementById("btn");
btn.onclick = function(e) {
    console.log("You clicked me!");
};

　　首先获得 btn 这个对象，通过给这个对象添加 onclick 属性的方式来监听 click 事件，这个属性值对应的就是事件处理程序。这段程序也被称作 DOM 0 级事件处理程序。

2.1.3 事件监听函数

　　标准的事件监听函数如下：

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    console.log("You clicked me!");
}, false);

　　上面的示例表示先获得表示节点的 btn 对象，然后在这个对象上面添加了一个事件监听器，当监听到 click 事件发生时，则调用回调函数，即在控制台输出 "You clicked me!"，这段程序也被称作 DOM 2 级事件处理程序。

2.2 移除事件监听

 
 　　在为某个元素绑定了一个事件后，如果想接触绑定，则需要用到 removeEventListener 方法。如下列代码所示： 

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

　　需要注意的是，绑定事件的回调函数不能是匿名函数，必须是一个已经被声明的函数，因为解除事件绑定时需要传递这个回调函数的引用。

3.事件触发过程

　　事件流描述了页面接收事件的顺序。事件流包含三个过程，分别是捕获阶段、目标阶段和冒泡阶段，下图形象地说明这个过程：

3.1 捕获阶段

　　当我们对 DOM 元素进行操作时，比如鼠标点击、悬浮等，就会有一个事件传输到这个 DOM 元素，这个事件从 Window 开始，依次经过 docuemnt、html、body，再不断经过子节点直到到达目标元素，从 Window 到达目标元素父节点的过程称为捕获阶段，注意此时还未到达目标节点。

3.2 目标阶段

　　捕获阶段结束时，事件到达了目标节点的父节点，最终到达目标节点，并在目标节点上触发了这个事件，这就是目标阶段。

　　事件触发的目标节点为最底层的节点。

<div>
    <p>你猜，目标在这里还是<span>那里</span>。</p>
</div>

　　上面代码中，当我们点击“那里”的时候，目标节点是<span></span>，点击“这里”的时候，目标节点是<p></p>，而当我们点击<p></p>区域之外，<div></div>区域之内时，目标节点就是<div></div>。

3.3 冒泡阶段

JavaScript 浏览器中的事件

猜你喜欢