在浏览器中使用 JavaScript 操作 DOM 的事件基础

在上一篇文章中，我们初步了解了 WebApi 这些接口，知道了支撑 WebApi 的两个核心点 DOM 和 BOM，并且聊了如何获取元素的这些方法。这一篇中，我们将着重讨论操作元素的这些方法。

事件基础

在 JavaScript 中，事件是一种由用户或系统触发的动作，比如单击按钮、鼠标移动、键盘输入等。当事件发生时，浏览器会触发相应的事件处理程序来响应该事件。

事件类型

事件类型是指事件的种类，不同的事件有不同的类型。常见的事件类型包括：

• click：单击事件
• dblclick：双击事件
• mousedown：鼠标按下事件
• mousemove：鼠标移动事件
• mouseup：鼠标松开事件
• keydown：键盘按下事件
• keypress：键盘按下并释放事件
• keyup：键盘松开事件

等等，此处就不一一列举了，可以在MDN上查询。

事件处理程序

事件处理程序是指当事件发生时要执行的代码。事件处理程序可以是函数或匿名函数。

添加和移除事件监听器

使用 addEventListener() 方法可以为元素添加事件监听器。addEventListener() 方法的语法如下：

element.addEventListener(event, listener, useCapture);

其中，

• element：要添加事件监听器的元素。
• event：要监听的事件类型。
• listener：当事件发生时要执行的函数或匿名函数。
• useCapture：可选参数，指定是否在捕获阶段触发事件处理程序。

使用 removeEventListener() 方法可以移除事件监听器。removeEventListener() 方法的语法如下：

element.removeEventListener(event, listener, useCapture);

其中，

• element：要移除事件监听器的元素。
• event：要移除的事件类型。
• listener：要移除的事件处理程序。
• useCapture：可选参数，指定是否在捕获阶段移除事件处理程序。

事件冒泡和捕获

事件冒泡是指事件从目标元素一直向上冒泡到文档根元素的过程。事件捕获是指事件从文档根元素一直向下捕获到目标元素的过程。

默认情况下，事件会先触发捕获阶段，然后触发目标阶段，最后触发冒泡阶段。可以通过在 addEventListener() 方法的第三个参数中指定 true 来改变事件的触发顺序，使事件先触发冒泡阶段，然后触发目标阶段，最后触发捕获阶段。

结语

以上就是 JavaScript 在浏览器中操作 DOM 的事件基础知识。希望这篇文章能帮助你更好地理解和使用 JavaScript 事件。