当前位置：首页 > article >正文

事件处理程序

article 2026/1/30 22:06:27

事件处理程序

一、事件处理程序的定义

事件处理程序是一段代码，用于响应特定的事件。在网页开发中，事件是在文档或浏览器窗口中发生的特定交互瞬间，如用户点击按钮、页面加载完成等。事件处理程序则是针对这些事件执行的函数，它能让网页实现交互性和动态性。

二、事件处理程序的绑定方式

2.1 HTML 内联事件处理程序

原理：

直接在 HTML 标签中使用事件属性来绑定事件处理程序，事件属性的值是 JavaScript 代码。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> <button onclick="alert('你点击了按钮！')">点击我</button> 
</body> 
</html>

优缺点：

优点是简单直接，适合简单的交互。
缺点是 HTML 和 JavaScript 代码耦合度高，不利于代码的维护和复用。

2.2 DOM0 级事件处理程序

原理：

通过 JavaScript 获取 DOM 元素，然后将一个函数赋值给元素的事件属性。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> <button id="myButton">点击我</button> <script> const button = document.getElementById('myButton');  button.onclick  = function() { alert('你点击了按钮！'); }; </script> 
</body> 
</html>

优缺点：

优点是兼容性好，所有浏览器都支持。
缺点是一个元素的一个事件只能绑定一个处理程序，如果多次绑定，后面的会覆盖前面的。

2.3 DOM2 级事件处理程序

原理：

使用 addEventListener() 方法来绑定事件处理程序，它可以为元素的同一个事件绑定多个处理程序。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> <button id="myButton">点击我</button> <script> const button = document.getElementById('myButton');  button.addEventListener('click',  function() { alert('第一次点击响应'); }); button.addEventListener('click',  function() { alert('第二次点击响应'); }); </script> 
</body> 
</html>

上述代码，当用户点击按钮时，会依次弹出两个警告框，先显示“第一次点击响应！”，再显示“第二次点击响应！”。如果用户的意图是只让其中一个处理程序响应，那么这段代码会导致两个处理程序都被触发。

下面对事件处理逻辑进行调整

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body> <!-- 创建一个按钮 --> <button id="myButton">点击我</button> <script> // 获取按钮元素 const button = document.getElementById('myButton');  // 初始化点击次数为 0 let clickCount = 0; // 为按钮添加点击事件监听器 button.addEventListener('click',  function () { // 点击次数加 1 clickCount++; if (clickCount === 1) { // 第一次点击时显示相应信息 alert('第一次点击响应'); } else if (clickCount === 2) { // 第二次点击时显示相应信息 alert('第二次点击响应'); } }); </script> 
</body> 
</html>

优缺点：

优点是可以为同一个事件绑定多个处理程序，并且可以控制事件的捕获和冒泡阶段。
缺点是部分旧浏览器（如 IE8 及以下）不支持，需要使用
attachEvent() 方法作为替代。

三、事件对象

定义：

当事件触发时，会自动创建一个事件对象，它包含了与该事件相关的信息，如事件类型、触发事件的元素、鼠标位置等。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');button.addEventListener('click', function (event) {console.log(' 事件类型：', event.type);  // 事件类型： clickconsole.log(' 触发事件的元素：', event.target); // 触发事件的元素：<button id="myButton">点击我</button>}); </script>
</body>
</html>

常见事件属性和方法：

type：返回事件的类型，如 click、mouseover 等。
target：返回触发事件的元素。
preventDefault()：阻止事件的默认行为，如阻止链接的跳转、表单的提交等。
stopPropagation()：阻止事件的冒泡或捕获。

四、事件流

定义：

事件流：描述了事件在页面中触发的顺序，主要有事件捕获和事件冒泡两种机制。
事件捕获：事件从文档的根节点开始，依次向下查找触发事件的元素，直到找到目标元素。在这个过程中，如果元素绑定了相应的捕获阶段的事件处理程序，会依次执行。
事件冒泡：事件从目标元素开始，依次向上传播到文档的根节点。如果元素绑定了相应的冒泡阶段的事件处理程序，会依次执行。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> <div id="outer"> <div id="inner">点击我</div> </div> <script> const outer = document.getElementById('outer');  const inner = document.getElementById('inner');  outer.addEventListener('click',  function() { console.log(' 外层 div 冒泡阶段触发'); }, false); outer.addEventListener('click',  function() { console.log(' 外层 div 捕获阶段触发'); }, true); inner.addEventListener('click',  function() { console.log(' 内层 div 冒泡阶段触发'); }, false); inner.addEventListener('click',  function() { console.log(' 内层 div 捕获阶段触发'); }, true); </script> 
</body> 
</html>

这段代码的主要功能是展示事件在DOM中的捕获和冒泡机制。当你点击inner div时，首先会触发outer div的捕获阶段事件处理程序，然后是inner div的捕获阶段事件处理程序。接着，事件开始冒泡，首先触发inner div的冒泡阶段事件处理程序，最后是outer div的冒泡阶段事件处理程序。通过这种方式，可以控制事件处理程序的执行顺序。

五、事件委托

原理：

利用事件冒泡的原理，将事件处理程序绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素上，从而触发父元素上的事件处理程序。通过判断事件的 target 属性，可以确定是哪个子元素触发了事件。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> <ul id="myList"> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul> <script> const list = document.getElementById('myList');  list.addEventListener('click',  function(event) { if (event.target.tagName  === 'LI') { console.log(' 你点击了列表项：', event.target.textContent);  } }); </script> 
</body> 
</html>

优缺点：

优点：是可以减少事件处理程序的绑定数量，提高性能；便于动态添加和删除子元素，无需为新添加的子元素重新绑定事件处理程序。
缺点：是需要对事件的 target 属性进行判断，增加了代码的复杂度。