addEventListener() 事件监听方法指南

2023-12-12 09:56:54

addEventListener() 方法的语法

addEventListener(type, listener, options);

type ：事件类型，例如 "click" 或 "mouseover"。
listener ：事件触发后调用的函数。
options ：可选参数，用于指定事件是冒泡还是捕获。

事件类型

addEventListener() 方法可以监听的所有事件类型如下：

click：鼠标单击事件
dblclick：鼠标双击事件
mouseup：鼠标松开事件
mousedown：鼠标按下事件
mousemove：鼠标移动事件
mouseover：鼠标移入事件
mouseout：鼠标移出事件
keypress：键盘按下事件
keydown：键盘松开事件
keyup：键盘松开事件
focus：元素获得焦点事件
blur：元素失去焦点事件
change：元素值改变事件
submit：表单提交事件
reset：表单重置事件
scroll：元素滚动事件
resize：窗口大小改变事件
load：页面加载完成事件
unload：页面卸载事件

事件监听器

事件监听器是一个函数，当指定的事件在该元素上发生时，该函数将会被调用。事件监听器可以是匿名的，也可以是具名的。

事件流

事件流定义了元素事件触发的顺序。有两种类型的事件流：冒泡和捕获。

冒泡：事件从最具体的元素触发，然后逐级向上传播到祖先元素。
捕获：事件从最具体的元素触发，然后逐级向下传播到后代元素。

addEventListener() 方法的示例

// 为元素添加一个单击事件监听器
element.addEventListener("click", function() {
  alert("你点击了元素！");
});

// 为元素添加一个键盘按下事件监听器
element.addEventListener("keypress", function(event) {
  alert("你按下了 " + event.key + " 键！");
});

// 为元素添加一个页面加载完成事件监听器
window.addEventListener("load", function() {
  alert("页面加载完成！");
});