JS事件委托模型和例子

在JavaScript中，事件委托（Event Delegation）是一种用于处理事件的技术，它利用了事件冒泡（Event Bubbling）的特性。通过事件委托，你可以将事件监听器添加到一个父元素上，而不是每个子元素上，这样可以减少内存使用，提高性能，特别是当需要处理大量相似元素或动态添加的元素时。

以下是一个使用事件委托模型的简单例子，该例子展示了如何监听动态添加到页面中的按钮的点击事件：

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Event Delegation Example</title>

</head>

<body>

<div id="buttonContainer">

  <!-- 初始按钮 -->

  <button class="myButton">Click Me</button>

  <!-- 这里可以动态添加更多按钮 -->

</div>

<script src="event-delegation.js"></script>

</body>

</html>

 

 

JavaScript (event-delegation.js):

// 获取容器元素

const buttonContainer = document.getElementById('buttonContainer');

 

// 为容器元素添加点击事件监听器

buttonContainer.addEventListener('click', function(event) {

  // 检查被点击的元素是否是我们要处理的元素（这里是有 .myButton 类的按钮）

  if (event.target.matches('.myButton')) {

    // 处理按钮点击事件

    alert('You clicked a button!');

    console.log('Clicked button:', event.target.textContent);

  }

});

 

// 模拟动态添加按钮

setTimeout(function() {

  // 创建一个新的按钮

  const newButton = document.createElement('button');

  newButton.className = 'myButton'; // 设置类名以便事件委托可以识别

  newButton.textContent = 'Newly Added Button';

  // 将新按钮添加到容器中

  buttonContainer.appendChild(newButton);

}, 2000); // 两秒后添加新按钮

在这个例子中，我们首先在buttonContainer元素上添加了一个点击事件监听器。然后，我们使用了event.target.matches('.myButton')来检查被点击的元素是否匹配我们想要的元素（即具有.myButton类的按钮）。如果匹配，我们就执行相应的操作（在这个例子中是弹出一个警告框并打印按钮的文本内容到控制台）。

 

之后，我们使用setTimeout来模拟动态地向页面添加一个新的按钮。由于我们使用了事件委托，所以这个新添加的按钮也会自动拥有相同的事件处理逻辑，而不需要我们为它单独添加事件监听器。