掌握HTML DOM事件监听添加技巧提升网页交互体验从基础addEventListener到高级事件委托全面解析

引言

在现代网页开发中，交互性是提升用户体验的关键因素。用户与网页的每一次互动，如点击按钮、滚动页面、填写表单等，都是通过DOM事件来实现的。掌握DOM事件监听技术，能够让开发者创建出响应迅速、交互流畅的网页应用。本文将从基础的addEventListener方法开始，逐步深入到高级的事件委托技术，全面解析HTML DOM事件监听的添加技巧，帮助开发者提升网页交互体验。

DOM事件基础

什么是DOM事件

DOM（Document Object Model）事件是用户或浏览器自身执行的某种动作，例如点击、加载、鼠标移动等。这些事件可以被JavaScript监听并作出响应，从而实现交互功能。

事件类型

DOM事件可以分为以下几类：

鼠标事件：click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout等
键盘事件：keydown, keyup, keypress等
表单事件：submit, change, focus, blur等
文档/窗口事件：load, resize, scroll, unload等
触摸事件：touchstart, touchmove, touchend等（移动设备）

事件流

事件流描述的是从页面中接收事件的顺序。主要有两种事件流模型：

事件冒泡（Event Bubbling）：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获（Event Capturing）：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

addEventListener基础用法

基本语法

addEventListener是DOM元素提供的方法，用于添加事件监听器。其基本语法如下：

element.addEventListener(event, function, useCapture);

参数说明：

event：字符串，表示要监听的事件类型（如”click”、”mouseover”等）
function：事件触发时执行的函数，也称为事件处理函数
useCapture：布尔值，可选参数，指定事件是在捕获阶段还是冒泡阶段处理，默认为false（冒泡阶段）

基本示例

下面是一个简单的点击事件监听示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>addEventListener基础示例</title> <style> button { padding: 10px 15px; font-size: 16px; cursor: pointer; } </style> </head> <body> <button id="myButton">点击我</button> <p id="message"></p> <script> // 获取按钮元素 const button = document.getElementById('myButton'); const message = document.getElementById('message'); // 添加点击事件监听器 button.addEventListener('click', function() { message.textContent = '按钮被点击了！'; }); </script> </body> </html>

在这个示例中，当用户点击按钮时，会触发一个匿名函数，该函数会在页面上显示一条消息。

事件处理函数的多种形式

使用命名函数

除了匿名函数，我们还可以使用命名函数作为事件处理函数：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>命名函数作为事件处理函数</title> <style> button { padding: 10px 15px; font-size: 16px; cursor: pointer; } </style> </head> <body> <button id="myButton">点击我</button> <p id="message"></p> <script> // 获取按钮元素 const button = document.getElementById('myButton'); const message = document.getElementById('message'); // 定义命名函数 function handleClick() { message.textContent = '按钮被点击了！'; } // 添加点击事件监听器 button.addEventListener('click', handleClick); </script> </body> </html>

使用命名函数的好处是可以在需要时移除事件监听器，也可以在其他地方重用这个函数。

使用箭头函数

ES6引入的箭头函数也可以作为事件处理函数：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>箭头函数作为事件处理函数</title> <style> button { padding: 10px 15px; font-size: 16px; cursor: pointer; } </style> </head> <body> <button id="myButton">点击我</button> <p id="message"></p> <script> // 获取按钮元素 const button = document.getElementById('myButton'); const message = document.getElementById('message'); // 添加点击事件监听器，使用箭头函数 button.addEventListener('click', () => { message.textContent = '按钮被点击了！'; }); </script> </body> </html>

需要注意的是，箭头函数没有自己的this绑定，它会捕获其所在上下文的this值。这在某些情况下可能会导致不同的行为。

带参数的事件处理函数

有时我们需要向事件处理函数传递额外的参数，可以通过以下方式实现：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>带参数的事件处理函数</title> <style> button { padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer; } </style> </head> <body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <p id="message"></p> <script> // 获取按钮元素 const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); const message = document.getElementById('message'); // 定义带参数的函数 function showMessage(buttonName, event) { message.textContent = `${buttonName} 被点击了！`; console.log('事件对象:', event); } // 添加点击事件监听器，使用匿名函数包装 btn1.addEventListener('click', function(event) { showMessage('按钮1', event); }); // 使用箭头函数包装 btn2.addEventListener('click', (event) => { showMessage('按钮2', event); }); </script> </body> </html>

事件对象详解

事件对象的属性和方法

当事件被触发时，浏览器会创建一个事件对象，包含与事件相关的信息。这个对象会作为参数传递给事件处理函数。

常用的事件对象属性和方法：

type：事件类型（如”click”、”mouseover”等）
target：触发事件的元素
currentTarget：当前处理事件的元素（通常是添加事件监听器的元素）
bubbles：布尔值，表示事件是否冒泡
cancelable：布尔值，表示是否可以取消事件的默认行为
defaultPrevented：布尔值，表示是否已经调用了preventDefault()
eventPhase：整数，表示事件处理的阶段（1=捕获，2=目标，3=冒泡）
timeStamp：事件发生的时间戳
preventDefault()：取消事件的默认行为
stopPropagation()：停止事件的传播

事件对象示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件对象示例</title> <style> #container { width: 300px; height: 200px; background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc; } #inner { width: 150px; height: 100px; background-color: #e0e0e0; padding: 10px; border: 1px solid #999; } </style> </head> <body> <div id="container"> 外层容器 <div id="inner">内层元素</div> </div> <div id="output"></div> <script> const container = document.getElementById('container'); const inner = document.getElementById('inner'); const output = document.getElementById('output'); function logEventInfo(event, elementName) { output.innerHTML += ` <p><strong>${elementName}</strong> - 事件类型: ${event.type}, 目标元素: ${event.target.id}, 当前元素: ${event.currentTarget.id}, 事件阶段: ${event.eventPhase}</p> `; } // 添加事件监听器 container.addEventListener('click', function(event) { logEventInfo(event, '外层容器'); }); inner.addEventListener('click', function(event) { logEventInfo(event, '内层元素'); }); </script> </body> </html>

在这个示例中，点击内层元素时，事件会冒泡到外层容器，两个事件处理函数都会被调用。通过事件对象，我们可以看到事件的目标元素、当前元素以及事件处理的阶段。

事件移除

removeEventListener方法

要移除已添加的事件监听器，可以使用removeEventListener方法。其语法与addEventListener类似：

element.removeEventListener(event, function, useCapture);

需要注意的是，要成功移除事件监听器，传递给removeEventListener的参数必须与addEventListener时使用的参数完全相同。这意味着如果使用匿名函数添加事件监听器，将无法移除它。

事件移除示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件移除示例</title> <style> button { padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer; } #output { margin-top: 20px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; } </style> </head> <body> <button id="clickBtn">点击我</button> <button id="removeBtn">移除事件监听器</button> <div id="output"></div> <script> const clickBtn = document.getElementById('clickBtn'); const removeBtn = document.getElementById('removeBtn'); const output = document.getElementById('output'); let clickCount = 0; // 定义命名函数作为事件处理函数 function handleClick() { clickCount++; output.textContent = `按钮被点击了 ${clickCount} 次`; } // 添加事件监听器 clickBtn.addEventListener('click', handleClick); // 添加移除事件监听器的按钮 removeBtn.addEventListener('click', function() { clickBtn.removeEventListener('click', handleClick); output.textContent = `事件监听器已移除。按钮被点击了 ${clickCount} 次`; }); </script> </body> </html>

在这个示例中，我们使用命名函数handleClick作为事件处理函数，这样就可以在需要时通过removeEventListener移除它。

事件冒泡与捕获

事件流阶段

DOM2级事件规定事件流包括三个阶段：

事件捕获阶段：事件从document对象向下传播到目标元素
目标阶段：事件到达目标元素
事件冒泡阶段：事件从目标元素向上传播回document对象

控制事件流

通过addEventListener的第三个参数useCapture，我们可以控制事件是在捕获阶段还是冒泡阶段处理：

// 在捕获阶段处理事件 element.addEventListener(event, handler, true); // 在冒泡阶段处理事件（默认） element.addEventListener(event, handler, false); element.addEventListener(event, handler); // 默认为false

事件冒泡与捕获示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件冒泡与捕获示例</title> <style> #outer { width: 300px; height: 200px; background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc; position: relative; } #middle { width: 200px; height: 120px; background-color: #d0d0d0; padding: 15px; border: 1px solid #999; position: absolute; top: 30px; left: 30px; } #inner { width: 100px; height: 60px; background-color: #b0b0b0; padding: 10px; border: 1px solid #777; position: absolute; top: 20px; left: 20px; text-align: center; line-height: 40px; cursor: pointer; } #output { margin-top: 220px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; height: 200px; overflow-y: auto; } .log-entry { margin: 5px 0; padding: 5px; border-bottom: 1px solid #eee; } .capture { color: #0066cc; } .bubble { color: #cc6600; } .target { color: #009900; font-weight: bold; } </style> </head> <body> <div id="outer">外层 <div id="middle">中层 <div id="inner">内层</div> </div> </div> <div id="output"></div> <script> const outer = document.getElementById('outer'); const middle = document.getElementById('middle'); const inner = document.getElementById('inner'); const output = document.getElementById('output'); function logEvent(phase, element, event) { const logEntry = document.createElement('div'); logEntry.className = `log-entry ${phase}`; logEntry.textContent = `${phase}阶段: ${element} - 事件目标: ${event.target.id}`; output.appendChild(logEntry); } // 添加捕获阶段事件监听器 outer.addEventListener('click', function(event) { logEvent('捕获', '外层', event); }, true); middle.addEventListener('click', function(event) { logEvent('捕获', '中层', event); }, true); inner.addEventListener('click', function(event) { logEvent('捕获', '内层', event); }, true); // 添加冒泡阶段事件监听器 outer.addEventListener('click', function(event) { logEvent('冒泡', '外层', event); }, false); middle.addEventListener('click', function(event) { logEvent('冒泡', '中层', event); }, false); inner.addEventListener('click', function(event) { logEvent('目标', '内层', event); }, false); </script> </body> </html>

在这个示例中，我们在三个嵌套的元素上都添加了捕获阶段和冒泡阶段的事件监听器。当点击最内层的元素时，可以看到事件流的完整过程：先从外到内进行捕获，然后到达目标，最后从内到外进行冒泡。

阻止事件传播

有时我们需要阻止事件的传播，可以使用以下方法：

event.stopPropagation()：阻止事件在DOM中传播，但不阻止默认行为
event.stopImmediatePropagation()：阻止事件传播，并且阻止同一元素上的其他事件处理函数被调用
event.preventDefault()：阻止事件的默认行为，但不阻止事件传播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阻止事件传播示例</title> <style> #outer { width: 300px; height: 200px; background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc; } #inner { width: 150px; height: 100px; background-color: #e0e0e0; padding: 10px; border: 1px solid #999; margin-top: 20px; text-align: center; line-height: 80px; cursor: pointer; } #output { margin-top: 20px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; } button { margin: 5px; padding: 8px 12px; } </style> </head> <body> <div id="outer">外层元素 <div id="inner">内层元素</div> </div> <div> <button id="stopPropagationBtn">使用stopPropagation</button> <button id="stopImmediateBtn">使用stopImmediatePropagation</button> <button id="resetBtn">重置</button> </div> <div id="output"></div> <script> const outer = document.getElementById('outer'); const inner = document.getElementById('inner'); const output = document.getElementById('output'); const stopPropagationBtn = document.getElementById('stopPropagationBtn'); const stopImmediateBtn = document.getElementById('stopImmediatePropagationBtn'); const resetBtn = document.getElementById('resetBtn'); let stopPropagation = false; let stopImmediatePropagation = false; function log(message) { const p = document.createElement('p'); p.textContent = message; output.appendChild(p); } // 外层元素事件监听器 outer.addEventListener('click', function(event) { log('外层元素点击事件触发'); }); // 内层元素第一个事件监听器 inner.addEventListener('click', function(event) { log('内层元素第一个点击事件触发'); if (stopPropagation) { event.stopPropagation(); log('事件传播已停止（stopPropagation）'); } if (stopImmediatePropagation) { event.stopImmediatePropagation(); log('事件传播已立即停止（stopImmediatePropagation）'); } }); // 内层元素第二个事件监听器 inner.addEventListener('click', function(event) { log('内层元素第二个点击事件触发'); }); // 按钮事件监听器 stopPropagationBtn.addEventListener('click', function() { stopPropagation = true; stopImmediatePropagation = false; output.innerHTML = ''; log('已设置使用stopPropagation'); }); stopImmediateBtn.addEventListener('click', function() { stopPropagation = false; stopImmediatePropagation = true; output.innerHTML = ''; log('已设置使用stopImmediatePropagation'); }); resetBtn.addEventListener('click', function() { stopPropagation = false; stopImmediatePropagation = false; output.innerHTML = ''; log('已重置'); }); </script> </body> </html>

在这个示例中，我们可以通过按钮来测试stopPropagation和stopImmediatePropagation的效果。当使用stopPropagation时，事件不会传播到父元素，但同一元素上的其他事件处理函数仍会被调用。而当使用stopImmediatePropagation时，不仅事件不会传播，同一元素上的其他事件处理函数也不会被调用。

事件委托

什么是事件委托

事件委托是一种利用事件冒泡机制的技术，通过在父元素上设置事件监听器来管理其所有子元素的事件。这样做的好处是：

减少内存使用：只需要一个事件监听器，而不是为每个子元素都添加一个
动态元素支持：可以处理动态添加到DOM中的元素的事件
简化代码：不需要为每个元素单独添加事件监听器

事件委托的基本实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托基本实现</title> <style> #buttonContainer { margin: 20px 0; } button { padding: 8px 12px; margin: 5px; cursor: pointer; } #output { padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; min-height: 50px; } #addButton { background-color: #4CAF50; color: white; border: none; padding: 10px 15px; margin-top: 10px; } </style> </head> <body> <h2>事件委托示例</h2> <div id="buttonContainer"> <button class="action-btn" data-action="save">保存</button> <button class="action-btn" data-action="delete">删除</button> <button class="action-btn" data-action="edit">编辑</button> </div> <button id="addButton">添加新按钮</button> <div id="output"></div> <script> const buttonContainer = document.getElementById('buttonContainer'); const addButton = document.getElementById('addButton'); const output = document.getElementById('output'); let buttonCount = 3; // 使用事件委托，在父元素上添加事件监听器 buttonContainer.addEventListener('click', function(event) { // 检查点击的元素是否是我们感兴趣的按钮 if (event.target.classList.contains('action-btn')) { const action = event.target.getAttribute('data-action'); output.textContent = `执行了 ${action} 操作`; } }); // 添加新按钮的功能 addButton.addEventListener('click', function() { buttonCount++; const newButton = document.createElement('button'); newButton.className = 'action-btn'; newButton.setAttribute('data-action', `新操作${buttonCount}`); newButton.textContent = `新操作${buttonCount}`; buttonContainer.appendChild(newButton); output.textContent = `添加了新按钮：新操作${buttonCount}`; }); </script> </body> </html>

在这个示例中，我们在父元素buttonContainer上添加了一个事件监听器，通过检查event.target的类名和属性来确定点击的是哪个按钮。这样，即使动态添加新的按钮，也不需要为它们单独添加事件监听器。

事件委托的高级应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托高级应用</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } #todoList { list-style: none; padding: 0; } .todo-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; } .todo-item.completed { text-decoration: line-through; color: #999; } .todo-text { flex-grow: 1; margin: 0 10px; } .todo-checkbox { margin-right: 10px; } .delete-btn { background-color: #ff4444; color: white; border: none; padding: 5px 10px; cursor: pointer; border-radius: 3px; } .add-todo { display: flex; margin-top: 20px; } .add-todo input { flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 3px; } .add-todo button { background-color: #4CAF50; color: white; border: none; padding: 8px 15px; margin-left: 10px; cursor: pointer; border-radius: 3px; } .filter-buttons { margin: 20px 0; } .filter-buttons button { background-color: #f0f0f0; border: 1px solid #ddd; padding: 5px 10px; margin-right: 5px; cursor: pointer; } .filter-buttons button.active { background-color: #4CAF50; color: white; } </style> </head> <body> <h1>待办事项列表</h1> <div class="filter-buttons"> <button class="filter-btn active" data-filter="all">全部</button> <button class="filter-btn" data-filter="active">未完成</button> <button class="filter-btn" data-filter="completed">已完成</button> </div> <ul id="todoList"> <li class="todo-item" data-id="1"> <input type="checkbox" class="todo-checkbox"> <span class="todo-text">学习JavaScript</span> <button class="delete-btn">删除</button> </li> <li class="todo-item" data-id="2"> <input type="checkbox" class="todo-checkbox"> <span class="todo-text">学习HTML</span> <button class="delete-btn">删除</button> </li> <li class="todo-item completed" data-id="3"> <input type="checkbox" class="todo-checkbox" checked> <span class="todo-text">学习CSS</span> <button class="delete-btn">删除</button> </li> </ul> <div class="add-todo"> <input type="text" id="newTodoInput" placeholder="添加新的待办事项"> <button id="addTodoBtn">添加</button> </div> <script> const todoList = document.getElementById('todoList'); const newTodoInput = document.getElementById('newTodoInput'); const addTodoBtn = document.getElementById('addTodoBtn'); const filterButtons = document.querySelectorAll('.filter-btn'); let nextId = 4; let currentFilter = 'all'; // 使用事件委托处理待办事项列表的点击事件 todoList.addEventListener('click', function(event) { const target = event.target; const todoItem = target.closest('.todo-item'); if (!todoItem) return; // 处理复选框点击 if (target.classList.contains('todo-checkbox')) { todoItem.classList.toggle('completed', target.checked); applyFilter(); } // 处理删除按钮点击 if (target.classList.contains('delete-btn')) { todoItem.remove(); } }); // 使用事件委托处理过滤按钮的点击事件 document.querySelector('.filter-buttons').addEventListener('click', function(event) { if (event.target.classList.contains('filter-btn')) { // 更新活动按钮 filterButtons.forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); // 更新当前过滤器并应用 currentFilter = event.target.getAttribute('data-filter'); applyFilter(); } }); // 添加新的待办事项 addTodoBtn.addEventListener('click', addNewTodo); newTodoInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { addNewTodo(); } }); function addNewTodo() { const todoText = newTodoInput.value.trim(); if (!todoText) return; const newTodo = document.createElement('li'); newTodo.className = 'todo-item'; newTodo.setAttribute('data-id', nextId++); newTodo.innerHTML = ` <input type="checkbox" class="todo-checkbox"> <span class="todo-text">${todoText}</span> <button class="delete-btn">删除</button> `; todoList.appendChild(newTodo); newTodoInput.value = ''; applyFilter(); } // 应用当前过滤器 function applyFilter() { const todoItems = document.querySelectorAll('.todo-item'); todoItems.forEach(item => { switch (currentFilter) { case 'all': item.style.display = 'flex'; break; case 'active': item.style.display = item.classList.contains('completed') ? 'none' : 'flex'; break; case 'completed': item.style.display = item.classList.contains('completed') ? 'flex' : 'none'; break; } }); } </script> </body> </html>

这个待办事项列表应用展示了事件委托的高级应用。我们在父元素todoList上添加了一个事件监听器，处理所有子元素的点击事件，包括复选框和删除按钮。同样，我们在过滤按钮的父元素上添加了事件监听器，处理所有过滤按钮的点击事件。这样，即使动态添加新的待办事项，也不需要为它们单独添加事件监听器。

最佳实践与性能优化

事件监听器的最佳实践

使用事件委托：对于有多个子元素需要相同事件处理的情况，使用事件委托可以减少内存使用并简化代码。
避免在循环中添加事件监听器：在循环中为多个元素添加事件监听器会导致性能问题，应该使用事件委托。
及时移除不需要的事件监听器：当元素被移除或不再需要事件监听时，应该使用removeEventListener移除它们，避免内存泄漏。
使用被动事件监听器提高滚动性能：对于wheel和touchstart等事件，可以使用passive: true选项来提高滚动性能。

// 使用被动事件监听器 element.addEventListener('wheel', handler, { passive: true }); element.addEventListener('touchstart', handler, { passive: true });

使用事件节流和防抖：对于频繁触发的事件（如resize、scroll），使用节流(throttle)和防抖(debounce)技术来限制事件处理函数的调用频率。

事件节流和防抖示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件节流和防抖示例</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .box { width: 100%; height: 200px; border: 1px solid #ccc; margin: 20px 0; overflow-y: auto; padding: 10px; } .content { height: 1000px; background: linear-gradient(to bottom, #f0f0f0, #ddd); } .counter { margin: 10px 0; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; } button { padding: 8px 12px; margin: 5px; cursor: pointer; } .active { background-color: #4CAF50; color: white; } </style> </head> <body> <h1>事件节流和防抖示例</h1> <div> <button id="normalBtn" class="active">普通滚动事件</button> <button id="throttleBtn">节流滚动事件</button> <button id="debounceBtn">防抖滚动事件</button> </div> <div class="counter"> 普通事件触发次数: <span id="normalCount">0</span> </div> <div class="counter"> 节流事件触发次数: <span id="throttleCount">0</span> </div> <div class="counter"> 防抖事件触发次数: <span id="debounceCount">0</span> </div> <div class="box" id="scrollBox"> <div class="content">滚动此区域测试事件节流和防抖效果</div> </div> <script> const scrollBox = document.getElementById('scrollBox'); const normalCount = document.getElementById('normalCount'); const throttleCount = document.getElementById('throttleCount'); const debounceCount = document.getElementById('debounceCount'); const normalBtn = document.getElementById('normalBtn'); const throttleBtn = document.getElementById('throttleBtn'); const debounceBtn = document.getElementById('debounceBtn'); let normalCounter = 0; let throttleCounter = 0; let debounceCounter = 0; // 节流函数 function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func.apply(this, args); }; } // 防抖函数 function debounce(func, delay) { let timeoutId; return function(...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => { func.apply(this, args); }, delay); }; } // 普通滚动事件处理函数 function handleNormalScroll() { normalCounter++; normalCount.textContent = normalCounter; } // 节流滚动事件处理函数 function handleThrottleScroll() { throttleCounter++; throttleCount.textContent = throttleCounter; } // 防抖滚动事件处理函数 function handleDebounceScroll() { debounceCounter++; debounceCount.textContent = debounceCounter; } // 创建节流和防抖版本的事件处理函数 const throttledScrollHandler = throttle(handleThrottleScroll, 200); const debouncedScrollHandler = debounce(handleDebounceScroll, 200); // 初始状态：只使用普通滚动事件 scrollBox.addEventListener('scroll', handleNormalScroll); // 按钮事件处理 normalBtn.addEventListener('click', function() { // 移除所有事件监听器 scrollBox.removeEventListener('scroll', handleNormalScroll); scrollBox.removeEventListener('scroll', throttledScrollHandler); scrollBox.removeEventListener('scroll', debouncedScrollHandler); // 添加普通滚动事件监听器 scrollBox.addEventListener('scroll', handleNormalScroll); // 更新按钮状态 normalBtn.classList.add('active'); throttleBtn.classList.remove('active'); debounceBtn.classList.remove('active'); // 重置计数器 normalCounter = 0; throttleCounter = 0; debounceCounter = 0; normalCount.textContent = '0'; throttleCount.textContent = '0'; debounceCount.textContent = '0'; }); throttleBtn.addEventListener('click', function() { // 移除所有事件监听器 scrollBox.removeEventListener('scroll', handleNormalScroll); scrollBox.removeEventListener('scroll', throttledScrollHandler); scrollBox.removeEventListener('scroll', debouncedScrollHandler); // 添加节流滚动事件监听器 scrollBox.addEventListener('scroll', handleNormalScroll); scrollBox.addEventListener('scroll', throttledScrollHandler); // 更新按钮状态 normalBtn.classList.remove('active'); throttleBtn.classList.add('active'); debounceBtn.classList.remove('active'); // 重置计数器 normalCounter = 0; throttleCounter = 0; debounceCounter = 0; normalCount.textContent = '0'; throttleCount.textContent = '0'; debounceCount.textContent = '0'; }); debounceBtn.addEventListener('click', function() { // 移除所有事件监听器 scrollBox.removeEventListener('scroll', handleNormalScroll); scrollBox.removeEventListener('scroll', throttledScrollHandler); scrollBox.removeEventListener('scroll', debouncedScrollHandler); // 添加防抖滚动事件监听器 scrollBox.addEventListener('scroll', handleNormalScroll); scrollBox.addEventListener('scroll', debouncedScrollHandler); // 更新按钮状态 normalBtn.classList.remove('active'); throttleBtn.classList.add('active'); debounceBtn.classList.remove('active'); // 重置计数器 normalCounter = 0; throttleCounter = 0; debounceCounter = 0; normalCount.textContent = '0'; throttleCount.textContent = '0'; debounceCount.textContent = '0'; }); </script> </body> </html>

在这个示例中，我们实现了事件节流和防抖的功能，并通过一个可滚动的区域来测试它们的效果。节流函数确保事件处理函数在一定时间内只执行一次，而防抖函数确保事件处理函数只在事件停止触发一段时间后执行。

实际应用案例

动态表格操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态表格操作</title> <style> body { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; } table { width: 100%; border-collapse: collapse; margin: 20px 0; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:hover { background-color: #f5f5f5; } .action-btn { padding: 4px 8px; margin: 0 2px; cursor: pointer; border: none; border-radius: 3px; } .edit-btn { background-color: #4CAF50; color: white; } .delete-btn { background-color: #f44336; color: white; } .save-btn { background-color: #2196F3; color: white; } .cancel-btn { background-color: #9e9e9e; color: white; } .add-form { display: flex; margin: 20px 0; gap: 10px; } .add-form input { padding: 8px; border: 1px solid #ddd; border-radius: 3px; } .add-form button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; } .notification { padding: 10px; margin: 10px 0; border-radius: 3px; display: none; } .success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; } .error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; } </style> </head> <body> <h1>员工信息管理</h1> <div class="notification" id="notification"></div> <div class="add-form"> <input type="text" id="nameInput" placeholder="姓名"> <input type="text" id="positionInput" placeholder="职位"> <input type="email" id="emailInput" placeholder="邮箱"> <button id="addBtn">添加员工</button> </div> <table id="employeeTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>职位</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <tr data-id="1"> <td>1</td> <td>张三</td> <td>前端开发</td> <td>zhangsan@example.com</td> <td> <button class="action-btn edit-btn">编辑</button> <button class="action-btn delete-btn">删除</button> </td> </tr> <tr data-id="2"> <td>2</td> <td>李四</td> <td>后端开发</td> <td>lisi@example.com</td> <td> <button class="action-btn edit-btn">编辑</button> <button class="action-btn delete-btn">删除</button> </td> </tr> <tr data-id="3"> <td>3</td> <td>王五</td> <td>产品经理</td> <td>wangwu@example.com</td> <td> <button class="action-btn edit-btn">编辑</button> <button class="action-btn delete-btn">删除</button> </td> </tr> </tbody> </table> <script> const employeeTable = document.getElementById('employeeTable'); const nameInput = document.getElementById('nameInput'); const positionInput = document.getElementById('positionInput'); const emailInput = document.getElementById('emailInput'); const addBtn = document.getElementById('addBtn'); const notification = document.getElementById('notification'); let nextId = 4; // 显示通知 function showNotification(message, type) { notification.textContent = message; notification.className = `notification ${type}`; notification.style.display = 'block'; setTimeout(() => { notification.style.display = 'none'; }, 3000); } // 使用事件委托处理表格中的点击事件 employeeTable.addEventListener('click', function(event) { const target = event.target; // 处理编辑按钮点击 if (target.classList.contains('edit-btn')) { const row = target.closest('tr'); const cells = row.querySelectorAll('td'); // 检查是否已经在编辑模式 if (target.textContent === '保存') { // 保存编辑 const nameCell = cells[1]; const positionCell = cells[2]; const emailCell = cells[3]; const nameInput = nameCell.querySelector('input'); const positionInput = positionCell.querySelector('input'); const emailInput = emailCell.querySelector('input'); // 验证输入 if (!nameInput.value.trim() || !positionInput.value.trim() || !emailInput.value.trim()) { showNotification('所有字段都必须填写', 'error'); return; } // 更新单元格内容 nameCell.textContent = nameInput.value; positionCell.textContent = positionInput.value; emailCell.textContent = emailInput.value; // 恢复按钮 target.textContent = '编辑'; target.className = 'action-btn edit-btn'; row.querySelector('.cancel-btn').style.display = 'none'; showNotification('员工信息已更新', 'success'); } else { // 进入编辑模式 const name = cells[1].textContent; const position = cells[2].textContent; const email = cells[3].textContent; // 替换单元格内容为输入框 cells[1].innerHTML = `<input type="text" value="${name}">`; cells[2].innerHTML = `<input type="text" value="${position}">`; cells[3].innerHTML = `<input type="email" value="${email}">`; // 更改按钮 target.textContent = '保存'; target.className = 'action-btn save-btn'; // 添加取消按钮 const cancelBtn = document.createElement('button'); cancelBtn.textContent = '取消'; cancelBtn.className = 'action-btn cancel-btn'; cells[4].appendChild(cancelBtn); } } // 处理删除按钮点击 if (target.classList.contains('delete-btn')) { const row = target.closest('tr'); const name = row.cells[1].textContent; if (confirm(`确定要删除员工 ${name} 吗？`)) { row.remove(); showNotification(`员工 ${name} 已被删除`, 'success'); } } // 处理取消按钮点击 if (target.classList.contains('cancel-btn')) { location.reload(); // 简单起见，重新加载页面 } }); // 添加新员工 addBtn.addEventListener('click', function() { const name = nameInput.value.trim(); const position = positionInput.value.trim(); const email = emailInput.value.trim(); // 验证输入 if (!name || !position || !email) { showNotification('所有字段都必须填写', 'error'); return; } // 创建新行 const newRow = document.createElement('tr'); newRow.setAttribute('data-id', nextId); newRow.innerHTML = ` <td>${nextId}</td> <td>${name}</td> <td>${position}</td> <td>${email}</td> <td> <button class="action-btn edit-btn">编辑</button> <button class="action-btn delete-btn">删除</button> </td> `; // 添加到表格 employeeTable.querySelector('tbody').appendChild(newRow); // 清空输入框 nameInput.value = ''; positionInput.value = ''; emailInput.value = ''; // 更新ID nextId++; showNotification(`员工 ${name} 已添加`, 'success'); }); // 支持按Enter键添加 [nameInput, positionInput, emailInput].forEach(input => { input.addEventListener('keypress', function(event) { if (event.key === 'Enter') { addBtn.click(); } }); }); </script> </body> </html>

这个动态表格操作示例展示了事件委托在实际应用中的强大功能。我们在表格的父元素上添加了一个事件监听器，处理所有编辑、删除和取消按钮的点击事件。这样，即使动态添加新的行，也不需要为它们单独添加事件监听器。

拖放功能实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖放功能实现</title> <style> body { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; } .container { display: flex; justify-content: space-between; margin: 20px 0; } .list { width: 45%; min-height: 300px; border: 2px dashed #ccc; border-radius: 5px; padding: 10px; background-color: #f9f9f9; } .list-title { text-align: center; margin-bottom: 10px; font-weight: bold; } .item { padding: 10px; margin: 5px 0; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; cursor: move; transition: transform 0.2s; } .item:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .item.dragging { opacity: 0.5; } .list.drag-over { background-color: #e0f7fa; border-color: #00bcd4; } .notification { padding: 10px; margin: 10px 0; border-radius: 3px; display: none; } .success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; } .add-item { display: flex; margin: 20px 0; gap: 10px; } .add-item input { flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 3px; } .add-item button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <h1>任务拖放管理</h1> <div class="notification" id="notification"></div> <div class="add-item"> <input type="text" id="newItemInput" placeholder="输入新任务"> <button id="addItemBtn">添加任务</button> </div> <div class="container"> <div class="list" id="todoList"> <div class="list-title">待办事项</div> <div class="item" draggable="true">完成项目报告</div> <div class="item" draggable="true">准备会议材料</div> <div class="item" draggable="true">回复客户邮件</div> </div> <div class="list" id="doneList"> <div class="list-title">已完成</div> <div class="item" draggable="true">更新网站内容</div> <div class="item" draggable="true">修复登录问题</div> </div> </div> <script> const todoList = document.getElementById('todoList'); const doneList = document.getElementById('doneList'); const newItemInput = document.getElementById('newItemInput'); const addItemBtn = document.getElementById('addItemBtn'); const notification = document.getElementById('notification'); // 显示通知 function showNotification(message) { notification.textContent = message; notification.className = 'notification success'; notification.style.display = 'block'; setTimeout(() => { notification.style.display = 'none'; }, 3000); } // 使用事件委托处理拖放事件 document.addEventListener('dragstart', function(event) { if (event.target.classList.contains('item')) { event.target.classList.add('dragging'); event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/html', event.target.innerHTML); } }); document.addEventListener('dragend', function(event) { if (event.target.classList.contains('item')) { event.target.classList.remove('dragging'); } }); document.addEventListener('dragover', function(event) { if (event.target.classList.contains('list')) { event.preventDefault(); event.dataTransfer.dropEffect = 'move'; } }); document.addEventListener('dragenter', function(event) { if (event.target.classList.contains('list')) { event.target.classList.add('drag-over'); } }); document.addEventListener('dragleave', function(event) { if (event.target.classList.contains('list')) { event.target.classList.remove('drag-over'); } }); document.addEventListener('drop', function(event) { if (event.target.classList.contains('list')) { event.preventDefault(); event.target.classList.remove('drag-over'); const draggingItem = document.querySelector('.dragging'); if (draggingItem) { const listTitle = event.target.querySelector('.list-title').textContent; const itemText = draggingItem.textContent; // 移动元素 event.target.appendChild(draggingItem); // 显示通知 showNotification(`任务"${itemText}"已移动到"${listTitle}"`); } } }); // 添加新任务 addItemBtn.addEventListener('click', function() { const itemText = newItemInput.value.trim(); if (!itemText) return; const newItem = document.createElement('div'); newItem.className = 'item'; newItem.draggable = true; newItem.textContent = itemText; todoList.appendChild(newItem); newItemInput.value = ''; showNotification(`新任务"${itemText}"已添加`); }); // 支持按Enter键添加 newItemInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { addItemBtn.click(); } }); </script> </body> </html>

这个拖放功能示例展示了如何使用HTML5的拖放API结合事件委托来实现一个任务管理界面。我们在document级别添加了拖放相关的事件监听器，通过检查event.target来确定事件源，从而实现了拖放功能。