JavaScript HTML DOM EventListener（事件监听器）（秒懂事件监听）

一、事件监听介绍

1.概念

2.步骤

3.示例代码

二、addEventListener() 方法

1.实例

2.语法

3.向原元素添加事件句柄

4.向同一个元素中添加多个事件句柄

5.向 Window 对象添加事件句柄

6.传递参数

7.事件冒泡或事件捕获

8.removeEventListener() 方法

三、监听实例

1.点击按钮改变标题颜色

2.待办事项

四、事件监听应用场景

五、总结

一、事件监听介绍

1.概念

JavaScript HTML DOM EventListener（事件监听器）是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器，可以在特定的HTML元素上注册监听器函数，以便在事件发生时执行相应的操作。

2.步骤

选择目标元素： 首先，需要选择要添加事件监听器的HTML元素。可以使用JavaScript中的DOM方法（如getElementById()、getElementsByClassName()、querySelector()等）来选择元素。
创建事件监听器函数： 接下来，需要创建一个事件监听器函数，该函数将在事件发生时被调用。这个函数通常会接收一个事件对象作为参数，可以在函数中访问事件的相关信息，比如事件类型、目标元素等。
注册事件监听器： 使用addEventListener()方法向目标元素注册事件监听器。该方法接受三个参数：事件类型（如click、mouseover等）、事件监听器函数和一个可选的布尔值，用于指定事件是否在捕获阶段或冒泡阶段触发。通常将其设置为false以在冒泡阶段触发事件。
处理事件： 在事件监听器函数中编写处理事件的代码。可以访问事件对象的属性和方法，根据需要执行相应的操作。

3.示例代码

// 选择目标元素
var button = document.getElementById("myButton");

// 创建事件监听器函数
function handleClick(event) {
    console.log("Button clicked!");
    console.log("Event type: " + event.type);
}

// 注册事件监听器
button.addEventListener("click", handleClick);

// 处理事件
function handleClick(event) {
    console.log("Button clicked!");
    console.log("Event type: " + event.type);
}

// 注册事件监听器
button.addEventListener("click", handleClick);

二、addEventListener() 方法

1.实例

在用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

2.语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

3.向原元素添加事件句柄

当用户点击元素时弹出 "Hello World!" :

element.addEventListener("click", function(){ alert("Hello World!"); });

你可以使用函数名，来引用外部函数:

element.addEventListener("click", 
		myFunction);function myFunction() {    
		alert ("Hello World!");}

4.向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同个元素添加不同类型的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>
</html>

5.向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

当用户重置窗口大小时添加事件监听：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

6.传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

7.事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

8.removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

三、监听实例

1.点击按钮改变标题颜色

HTML结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener Example</title>
    <style>
        #title {
            font-size: 24px;
            color: black;
        }
    </style>
</head>
<body>
    <h1 id="title">Welcome to my page</h1>
    <button id="changeColorBtn">Change Color</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

// 选择按钮元素和标题元素
var changeColorBtn = document.getElementById("changeColorBtn");
var title = document.getElementById("title");

// 创建事件监听器函数
function changeColor() {
    // 生成随机颜色
    var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    
    // 改变标题元素的颜色
    title.style.color = randomColor;
}

// 注册事件监听器
changeColorBtn.addEventListener("click", changeColor);

2.待办事项

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
        }
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="todoInput" placeholder="Add new todo">
    <button id="addBtn">Add</button>
    <ul id="todoList">
    </ul>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

// 选择输入框、按钮和待办事项列表元素
var todoInput = document.getElementById("todoInput");
var addBtn = document.getElementById("addBtn");
var todoList = document.getElementById("todoList");

// 添加待办事项
function addTodo() {
    var todoText = todoInput.value.trim();
    if (todoText !== "") {
        var li = document.createElement("li");
        li.textContent = todoText;

        // 添加点击事件监听器
        li.addEventListener("click", function() {
            toggleTodoStatus(li);
        });

        todoList.appendChild(li);
        todoInput.value = "";
    }
}

// 标记待办事项为已完成或取消标记
function toggleTodoStatus(todoItem) {
    todoItem.classList.toggle("completed");
}

// 添加按钮点击事件监听器
addBtn.addEventListener("click", addTodo);

// 添加回车键事件监听器
todoInput.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        addTodo();
    }
});

四、事件监听应用场景

交互式用户界面: 事件监听器用于创建交互式用户界面，例如点击按钮执行特定操作，拖放元素进行排序或重排等。
表单验证: 通过事件监听器，可以在表单提交之前验证用户输入的数据，确保其符合要求，例如检查邮箱地址的格式、密码强度等。
响应式设计: 使用事件监听器来捕获窗口大小调整或设备方向改变等事件，以便根据不同的设备尺寸和方向调整页面布局。
动画和效果: 通过监听特定的事件，如鼠标悬停、滚动等，实现动画效果，例如当鼠标悬停在按钮上时显示提示信息，或者在页面滚动时触发特定的动画效果。
键盘操作: 事件监听器可以捕获键盘事件，例如按下某个键或组合键时执行相应的操作，如快捷键操作。
数据更新: 在单页应用程序中，事件监听器可用于监视数据的变化，并在数据更新时更新UI，以确保用户界面与数据保持同步。
媒体控制: 通过事件监听器控制媒体元素的播放、暂停、停止等操作，例如音频播放器或视频播放器。
页面加载和卸载: 可以使用事件监听器来执行在页面加载完成或卸载之前需要执行的操作，例如初始化页面内容、执行清理操作等。

五、总结

事件监听是在网页开发中常用的技术，用于捕获特定的用户操作或系统事件，并在事件发生时执行相应的代码。以下是事件监听的要点总结：

事件类型: 事件可以是用户操作，如点击、悬停、键盘输入等，也可以是系统事件，如窗口加载、滚动、大小调整等。
事件目标: 每个事件都有一个触发它的目标元素，例如点击按钮时的按钮元素、键盘输入时的输入框元素等。
事件监听器: 通过事件监听器（也称为事件处理程序或事件回调），可以将特定的事件与相应的处理函数关联起来。当事件发生时，关联的处理函数会被执行。
事件绑定: 事件监听器可以通过多种方式绑定到目标元素上，包括使用DOM方法（如addEventListener）、HTML属性（如onclick）、jQuery库等。
事件处理: 事件处理函数可以执行各种操作，例如更新页面内容、执行动画效果、验证用户输入、控制媒体播放等，以响应用户操作或系统事件。
事件流: 在DOM中，事件会按照事件流（从目标元素向上传播）的顺序传播。事件流分为捕获阶段、目标阶段和冒泡阶段，可以利用事件流机制对事件进行更精确的控制。
事件对象: 每个事件都会生成一个事件对象，其中包含了关于事件的详细信息，如事件类型、目标元素、触发时间等。事件处理函数可以通过事件对象来访问这些信息。
事件委托: 通过事件委托，可以将事件监听器绑定到父元素上，以处理其子元素触发的事件。这种方式可以减少事件监听器的数量，提高性能，并且在动态生成的元素上也能正常工作。

总的来说，事件监听是网页开发中非常重要的一部分，它使得网页可以与用户进行交互，并实现各种功能和效果，从而提升用户体验。