语法
addEventListener()
方法的语法如下:
element.addEventListener(event, function, useCapture);
- element:表示要添加事件监听器的元素。
- event:表示要监听的事件类型,如
click
、mouseover
等。 - function:表示在事件发生时要执行的函数。
- useCapture:一个可选的布尔值,指定事件是在捕获阶段还是冒泡阶段执行,默认为
false
(在冒泡阶段执行)。
示例
让我们来看一个简单的示例,当用户点击一个按钮时,在控制台输出一条信息:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ---------- ------- ------ ------- -------------------------- -------- ----- ------ - ------------------------------------ -------------------------------- ---------- - ----------------------- --- --------- ------- -------
在这个示例中,我们首先获取了一个按钮元素,然后使用addEventListener()
方法在按钮上添加了一个点击事件监听器。当用户点击按钮时,控制台会输出按钮被点击了!
。
多个事件监听器
addEventListener()
方法还可以多次调用,以添加多个事件监听器。这些事件监听器将按照它们被添加的顺序依次执行。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ ------- ------ ------- -------------------------- -------- ----- ------ - ------------------------------------ -------------------------------- ---------- - ------------------------ --- -------------------------------- ---------- - ------------------------ --- --------- ------- -------
在这个示例中,我们为按钮添加了两个点击事件监听器。当用户点击按钮时,控制台会依次输出第一个事件监听器
和第二个事件监听器
。
总结
addEventListener()
方法是 web 前端开发中常用的方法之一,它可以方便地为页面元素添加事件监听器,实现页面与用户的交互。希望本文对你理解这个方法有所帮助!