事件模型与事件委托

最新推荐文章于 2024-11-10 21:49:40 发布

Shero.李建业

最新推荐文章于 2024-11-10 21:49:40 发布

阅读量369

点赞数 9

分类专栏： JavaScript技术文章标签： microsoft windows javascript

本文链接：https://blog.csdn.net/weixin_47000834/article/details/138519161

版权

JavaScript技术专栏收录该内容

73 篇文章 0 订阅

订阅专栏

JavaScript事件模型是指JavaScript中用来处理用户交互的事件的一种机制。在JavaScript中，每个元素都可以绑定多个不同类型的事件，例如点击事件、鼠标移动事件等。当用户触发某个事件时，相应的事件处理函数将被执行。

事件委托是指将事件处理函数绑定在父元素上，而不是直接绑定在子元素上。当事件触发时，事件会冒泡至父元素，父元素再根据事件的目标元素来调用相应的事件处理函数。这种方式可以减少事件处理函数的数量，提高性能，同时也方便动态添加或删除子元素时的事件绑定。

使用事件委托的好处有：

减少事件处理函数的数量，提高性能。只需要绑定一个事件处理函数到父元素上就可以处理所有子元素的事件，避免了为每个子元素都绑定事件处理函数的开销。
方便动态添加或删除子元素时的事件处理。当有新的子元素添加到父元素中时，不需要为每个子元素重新绑定事件处理函数，只需要在父元素上绑定一次即可。
可以减少内存占用。由于只有一个事件处理函数，不会为每个子元素都创建一个新的函数对象，减少了内存的占用。

使用事件委托的原则是：

选择一个合适的父元素作为事件委托的目标，通常选择最近的公共父元素。
在父元素上绑定事件处理函数，根据事件的目标元素来执行相应的操作。
在事件处理函数中使用事件对象的相关属性来获取目标元素和其它相关信息。

下面是一个示例代码，演示了如何使用事件委托来实现一个简单的todo list：

HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
</head>
<body>
  <input type="text" id="newTodoInput" placeholder="Add New Todo">
  <ul id="todoList">
    <li>Todo 1</li>
    <li>Todo 2</li>
    <li>Todo 3</li>
  </ul>
  <script src="script.js"></script>
</body>
</html>

JavaScript（script.js）：

// 获取父元素和输入框元素
var todoList = document.getElementById('todoList');
var newTodoInput = document.getElementById('newTodoInput');

// 绑定点击事件委托到父元素上
todoList.addEventListener('click', function(event) {
  // 检查点击的元素是否为li元素
  if (event.target.tagName === 'LI') {
    // 切换li元素的类名，实现选中效果
    event.target.classList.toggle('completed');
  }
});

// 绑定输入事件委托到输入框上
newTodoInput.addEventListener('keyup', function(event) {
  // 检查是否按下了Enter键
  if (event.key === 'Enter') {
    // 创建新的li元素，并设置其内容为输入框的值
    var newTodo = document.createElement('li');
    newTodo.textContent = newTodoInput.value;
    
    // 将新的li元素添加到todoList中
    todoList.appendChild(newTodo);
    
    // 清空输入框的值
    newTodoInput.value = '';
  }
});

在上述示例中，我们将点击事件绑定在todoList上，而不是直接在每个li元素上绑定。这样当点击li元素时，事件会冒泡到todoList上，然后根据事件的目标元素来执行相应的操作。同时，我们也将输入事件绑定在newTodoInput上，通过检查按下的键来判断是否按下了Enter键，然后创建新的li元素并添加到todoList中。这样就实现了一个简单的todo list，可以点击每个todo来切换完成状态，并可以添加新的todo。