DOM EventListener学习笔记

什么是DOM EventListener？

DOM EventListener是一种用于处理JavaScript事件的API。它允许您将一个或多个事件附加到特定的DOM元素上，以便在事件发生时触发相应的行为。

EventListener的语法

事件监听器通常使用addEventListener()方法添加到元素中。

javascriptCopy Code
element.addEventListener(event, function, useCapture);

其中：

element：要添加事件的DOM元素
event：要监听的事件类型（比如"click"、"mouseover"等）
function：事件发生时所要执行的代码
useCapture：可选参数，指定事件是否在捕获或冒泡阶段处理

举例说明

示例1：

以下是一个简单示例，演示如何使用DOM EventListener处理按钮的点击事件：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>Button Click Example</title>
	<script>
		document.getElementById("myButton").addEventListener("click", function() {
			alert("Hello world!");
		});
	</script>
</head>
<body>
	<button id="myButton">Click me!</button>
</body>
</html>

当用户单击该按钮时，将弹出一个包含消息“Hello World!”的对话框。

示例2：

下面是一个稍微复杂的示例，演示如何使用事件委托和DOM EventListener来处理表格中的单元格单击事件。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>Table Click Example</title>
	<script>
		document.getElementById("myTable").addEventListener("click", function(event) {
			if (event.target.tagName === "TD") {
				alert("You clicked on cell " + event.target.innerHTML);
			}
		});
	</script>
</head>
<body>
	<table id="myTable">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
	</table>
</body>
</html>

当用户单击表格中的任何单元格时，将弹出一个对话框，其中包含单元格的内容。

以上两个例子仅是DOM EventListener处理事件的冰山一角，实际应用中还有很多更为复杂的情形。但是只要掌握了基础知识，基本上就可以满足大部分的需要。