Javascript基础-事件流机制

李文旺2023-10-31 17:34

✊不积跬步，无以至千里；不积小流，无以成江海。

事件范例、事件绑定两种方式

当涉及到事件处理时，有两种常见的方式来绑定事件：事件范例（Event delegation）和事件绑定（Event binding）。

  1. 事件范例（Event delegation）：

    事件范例是一种在父元素上监听事件，然后通过事件冒泡机制捕获和处理子元素上的事件的方法。简单来说，就是将事件处理程序绑定到父元素，然后根据事件的目标元素来执行相应的操作。

    使用事件范例的主要优点是：

    • 减少事件处理程序的数量：通过将事件处理程序绑定到父元素，可以避免为每个子元素都绑定事件，从而减少了事件处理程序的数量，提高了性能和内存利用率。
    • 动态添加或移除子元素时仍然有效：对于动态添加或移除的子元素，无需重新绑定事件，因为事件处理程序已经在父元素上定义。

    事件范例的使用场景包括：

    • 列表、表格或菜单等具有多个子元素的容器，例如处理点击列表项、选择表格行、点击菜单项等。
    • 动态加载内容的情况，例如通过AJAX加载内容并处理其中的事件。

    事件范例（Event delegation）示例：

    假设我们有一个包含多个按钮的父元素，并且我们希望对每个按钮点击事件进行处理。使用事件范例，我们只需将事件处理程序绑定到父元素，然后根据事件的目标元素来执行相应的操作。

javascript 复制代码 
// HTML结构
<div id="buttonContainer">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>
</div>

// JavaScript代码
const buttonContainer = document.getElementById('buttonContainer');

buttonContainer.addEventListener('click', function(event) {
  if (event.target.classList.contains('btn')) {
    // 在这里处理按钮点击事件
    console.log('点击了按钮:', event.target.textContent);
  }
});

在上述示例中，我们将点击事件处理程序绑定到父元素buttonContainer上。当用户点击其中一个按钮时，事件会冒泡到父元素，然后我们通过判断事件目标元素的类名是否包含btn来确定是否点击了按钮，并执行相应的操作。

  1. 事件绑定（Event binding）：

    事件绑定是将事件处理程序直接绑定到特定的元素上，当该元素上的事件触发时，执行相应的处理代码。

    使用事件绑定的主要优点是：

    • 直接明确的绑定关系：事件处理程序直接绑定到特定的元素上，代码结构清晰，易于理解和维护。
    • 更精确的控制：可以针对特定的元素或组件绑定事件处理程序，以实现更精确的控制和交互。

    事件绑定的使用场景包括：

    • 单个元素或少量元素的情况，例如按钮的点击事件、输入框的输入事件等。
    • 需要对特定元素进行更精细的处理和交互的情况。

    事件绑定（Event binding）示例：

    假设我们有一个按钮，我们希望对其点击事件进行处理。使用事件绑定，我们直接将事件处理程序绑定到该按钮上，当按钮被点击时，执行相应的操作。

javascript 复制代码 
// HTML结构
<button id="myButton">Click me</button>

// JavaScript代码
const myButton = document.getElementById('myButton');

function handleClick() {
  // 在这里处理按钮点击事件
  console.log('按钮被点击了');
}

myButton.addEventListener('click', handleClick);

在上述示例中，我们获取按钮元素myButton，然后将点击事件处理程序handleClick直接绑定到按钮上。当按钮被点击时，事件处理程序会被调用，执行相应的操作。

总结

综上所述，事件范例适用于具有多个子元素的容器或动态加载内容的情况，可以减少事件处理程序的数量。而事件绑定适用于单个元素或少量元素的情况，提供更精确的控制和交互。

this与事件对象

在 JavaScript 中，this 关键字指向当前对象，在事件处理函数中，this 指向的是事件绑定的对象。事件对象是包含事件相关信息的对象，在事件处理函数中，可以通过 event 对象访问这些信息。

this 在事件处理函数中的值

在事件处理函数中，this 指向的是事件绑定的对象。例如，以下代码将一个事件处理函数绑定到一个按钮元素：

javascript 复制代码 
// 创建按钮元素
const button = document.createElement("button");

// 绑定事件处理函数
button.addEventListener("click", function() {
  // this 指向按钮元素
  console.log(this);
});

// 将按钮添加到 DOM 中
document.body.appendChild(button);

当点击按钮时，会触发 click 事件，事件处理函数将被调用。在事件处理函数中，this 指向按钮元素，因此 console.log(this) 将打印出以下内容：

css 复制代码 
<button>

事件对象

事件对象是包含事件相关信息的对象，在事件处理函数中，可以通过 event 对象访问这些信息。事件对象的属性包括：

  • type：事件类型
  • target：事件的目标对象
  • currentTarget：当前事件的目标对象
  • eventPhase：事件的阶段
  • bubbles：事件是否冒泡
  • cancelable：事件是否可以取消
  • detail：事件的详细信息

以下代码演示了如何使用事件对象：

javascript 复制代码 
// 创建按钮元素
const button = document.createElement("button");

// 绑定事件处理函数
button.addEventListener("click", function(event) {
  // event.target 指向事件的目标对象
  console.log(event.target);

  // event.currentTarget 指向当前事件的目标对象
  console.log(event.currentTarget);

  // event.type 指向事件类型
  console.log(event.type);
});

// 将按钮添加到 DOM 中
document.body.appendChild(button);

当点击按钮时，会触发 click 事件，事件处理函数将被调用。在事件处理函数中，event.target 将指向按钮元素，event.currentTarget 也将指向按钮元素，event.type 将指向 "click"。

this 与事件对象的区别

this 与事件对象的区别如下：

在 JavaScript 中，this 关键字指向当前对象，在事件处理函数中，this 指向的是事件绑定的对象。事件对象是包含事件相关信息的对象，在事件处理函数中，可以通过 event 对象访问这些信息。

this 在事件处理函数中的值

在事件处理函数中，this 指向的是事件绑定的对象。例如，以下代码将一个事件处理函数绑定到一个按钮元素：

JavaScript

javascript 复制代码 
// 创建按钮元素
const button = document.createElement("button");

// 绑定事件处理函数
button.addEventListener("click", function() {
  // this 指向按钮元素
  console.log(this);
});

// 将按钮添加到 DOM 中
document.body.appendChild(button);

請謹慎使用程式碼。瞭解詳情

content_copy

当点击按钮时，会触发 click 事件，事件处理函数将被调用。在事件处理函数中，this 指向按钮元素，因此 console.log(this) 将打印出以下内容：

css 复制代码 
<button>

事件对象

事件对象是包含事件相关信息的对象，在事件处理函数中，可以通过 event 对象访问这些信息。事件对象的属性包括：

  • type：事件类型
  • target：事件的目标对象
  • currentTarget：当前事件的目标对象
  • eventPhase：事件的阶段
  • bubbles：事件是否冒泡
  • cancelable：事件是否可以取消
  • detail：事件的详细信息

以下代码演示了如何使用事件对象：

JavaScript

javascript 复制代码 
// 创建按钮元素
const button = document.createElement("button");

// 绑定事件处理函数
button.addEventListener("click", function(event) {
  // event.target 指向事件的目标对象
  console.log(event.target);

  // event.currentTarget 指向当前事件的目标对象
  console.log(event.currentTarget);

  // event.type 指向事件类型
  console.log(event.type);
});

// 将按钮添加到 DOM 中
document.body.appendChild(button);

以下代码演示了 this 与事件对象的区别：（和上面代码一样）

javascript 复制代码 
// 创建按钮元素
const button = document.createElement("button");

// 绑定事件处理函数
button.addEventListener("click", function() {
  // this 指向按钮元素
  console.log(this);

  // event.target 指向事件的目标对象
  console.log(event.target);

  // event.currentTarget 也指向按钮元素
  console.log(event.currentTarget);
});

// 将按钮添加到 DOM 中
document.body.appendChild(button);

当点击按钮时，会触发 click 事件，事件处理函数将被调用。在事件处理函数中，console.log(this) 将打印出以下内容：

css 复制代码 
<button>

console.log(event.target) 与 console.log(event.currentTarget) 将都打印出以下内容：

css 复制代码 
<button>

总结

在 JavaScript 中，this 关键字指向当前对象，在事件处理函数中，this 指向的是事件绑定的对象。事件对象是包含事件相关信息的对象，在事件处理函数中，可以通过 event 对象访问这些信息。

JavaScript事件流、addEventListener详细用法

JavaScript事件流

JavaScript 事件流是指事件从发生到被处理的过程。事件流有两个阶段：捕获阶段和冒泡阶段。

捕获阶段

捕获阶段是事件从最外层元素向最内层元素传播的过程。在捕获阶段，事件会先被最外层元素的事件处理函数处理，然后再依次传递给内层元素的事件处理函数。

冒泡阶段

冒泡阶段是事件从最内层元素向最外层元素传播的过程。在冒泡阶段，事件会先被最内层元素的事件处理函数处理，然后再依次传递给外层元素的事件处理函数。

事件流示例

以下代码演示了事件流的示例：

javascript 复制代码 
// 创建一个父元素
const parent = document.createElement("div");

// 创建一个子元素
const child = document.createElement("div");

// 给父元素绑定事件处理函数
parent.addEventListener("click", function() {
  // 捕获阶段
  console.log("捕获阶段");
});

// 给子元素绑定事件处理函数
child.addEventListener("click", function() {
  // 冒泡阶段
  console.log("冒泡阶段");
});

// 将父元素添加到 DOM 中
document.body.appendChild(parent);
parent.appendChild(child);

当点击父元素时，会触发 click 事件，事件处理函数将被调用。在捕获阶段，父元素的事件处理函数将被调用，并打印出 "捕获阶段"。然后，事件会冒泡到子元素，子元素的事件处理函数将被调用，并打印出 "冒泡阶段"。

事件流的应用

事件流可以用于实现不同的功能。例如，可以使用捕获阶段来阻止事件的默认行为，或在冒泡阶段来添加额外的功能。

阻止事件的默认行为

默认行为是指事件发生时浏览器会自动执行的行为。例如，点击一个链接会自动打开该链接，双击一个文本框会自动将焦点移到该文本框中。

可以使用捕获阶段来阻止事件的默认行为。例如，以下代码将阻止默认的链接行为：

csharp 复制代码 
// 阻止默认的链接行为
document.addEventListener("click", function(event) {
  // 判断事件的类型是否为 click
  if (event.type === "click") {
    // 判断事件的目标对象是否为链接
    if (event.target.tagName === "A") {
      // 阻止默认行为
      event.preventDefault();
    }
  }
});

添加额外的功能

可以使用冒泡阶段来添加额外的功能。例如，以下代码将在点击按钮时弹出一个提示框：

javascript 复制代码 
// 在点击按钮时弹出一个提示框
document.addEventListener("click", function(event) {
  // 判断事件的目标对象是否为按钮
  if (event.target.tagName === "BUTTON") {
    // 弹出一个提示框
    alert("您点击了一个按钮");
  }
});

详细解释addEventListener的用法

addEventListener是DOM元素对象的方法，用于向指定元素添加事件监听器。它接受三个参数：

  1. 事件类型（event type）：要监听的事件类型，如'click'、'keydown'等。
  2. 事件处理函数（event listener）：事件触发时要执行的函数，也称为事件处理程序或回调函数。
  3. 可选参数（options）：一个配置对象，用于指定更多的选项，例如是否在捕获阶段处理事件、是否使用passive模式等。
ini 复制代码 
element.addEventListener(eventType, eventListener, options);

使用addEventListener的主要优点是可以在同一个元素上添加多个事件监听器，而不会覆盖之前的监听器。它还提供了更灵活的配置选项。

以下是addEventListener的一些常见用法和示例：

  1. 添加点击事件监听器：
javascript 复制代码 
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('按钮被点击了');
});
  1. 添加捕获阶段的事件监听器：
javascript 复制代码 
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('捕获阶段的事件处理程序');
}, true);
  1. 添加具有配置选项的事件监听器：
javascript 复制代码 
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('点击事件处理程序');
}, {
  once: true, // 只执行一次
  passive: true // 提高滚动性能
});

通过配置选项，我们可以实现一次性的事件监听、性能优化等功能。

添加点击事件监听器，和添加捕获阶段的事件监听器，的区别

它们之间的主要区别是事件的触发时机和事件处理程序的执行顺序。

  1. 点击事件监听器（冒泡阶段）：

    • 点击事件监听器是在事件的冒泡阶段执行的。
    • 当点击事件发生在目标元素上时，首先触发目标元素上的点击事件处理程序，然后事件会向上冒泡到父元素，再触发父元素上的点击事件处理程序，依次类推。
    • 通过addEventListener方法添加的事件监听器，默认情况下是在冒泡阶段执行的。

  2. 捕获阶段的事件监听器：

    • 捕获阶段的事件监听器是在事件的捕获阶段执行的。
    • 在事件冒泡的过程中，事件首先从最外层的祖先元素开始传播，然后逐级向下传递到目标元素。
    • 当事件处于捕获阶段时，会触发捕获阶段的事件监听器，然后事件继续向下传播到目标元素的冒泡阶段。
    • 通过addEventListener方法的第三个参数设置为true，可以将事件监听器添加到捕获阶段。

总结：

  • 点击事件监听器在事件的冒泡阶段执行，而捕获阶段的事件监听器在事件的捕获阶段执行。
  • 默认情况下，使用addEventListener方法添加的事件监听器是在冒泡阶段执行的。
  • 如果需要在捕获阶段处理事件，可以通过将addEventListener方法的第三个参数设置为true来添加捕获阶段的事件监听器。
  • 通过选择不同的阶段来添加事件监听器，可以根据需求进行更精细的事件处理和控制。

事件冒泡、阻止默认事件、事件代理

事件冒泡（Event Bubbling），阻止默认事件（Prevent Default），以及事件代理（Event Delegation）是 JavaScript 中与事件处理相关的重要概念。

  1. 事件冒泡（Event Bubbling）：

    • 事件冒泡是指在触发某个元素上的特定事件后，事件会向其父元素逐级传播（冒泡）。
    • 例如，当点击一个按钮时，按钮上的点击事件处理程序首先被触发，然后事件继续冒泡到按钮的父元素、父元素的父元素，直到达到文档根元素。
    • 事件冒泡使得可以在父元素上捕获子元素的事件，从而实现事件委托和更高效的事件处理。
    • 若要阻止事件冒泡，可以使用事件对象的stopPropagation()方法。

事件冒泡的例子

xml 复制代码 
<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', function(event) {
    console.log('Parent clicked!');
  });

  child.addEventListener('click', function(event) {
    console.log('Child clicked!');
  });
</script>

当点击"Click me"按钮时，事件将首先触发子元素上的点击事件处理程序，然后冒泡到父元素，触发父元素上的点击事件处理程序。控制台输出结果为：

复制代码 
Child clicked!
Parent clicked!

  1. 阻止默认事件（Prevent Default）：

    • 默认情况下，某些事件会触发特定的默认行为，例如点击链接会跳转到对应的URL，提交表单会刷新页面等。
    • 通过调用事件对象的preventDefault()方法，可以阻止事件的默认行为。
    • 阻止默认事件通常用于在自定义事件处理程序中控制事件的行为，而不执行默认的操作。 阻止默认事件的例子：
xml 复制代码 
<a href="https://www.example.com" id="link">Click me</a>

<script>
  const link = document.getElementById('link');

  link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Link clicked, but default behavior prevented!');
  });
</script>

当点击链接时，事件处理程序将阻止链接的默认行为（跳转到指定URL），并输出控制台消息。

  1. 事件代理（Event Delegation）：

    • 事件代理是一种将事件处理程序绑定到父元素上，以便统一处理其子元素上的事件的方法。
    • 通过利用事件冒泡，可以在父元素上捕获子元素的事件，并根据事件的目标元素来执行相应的操作。
    • 事件代理适用于动态添加或移除的子元素，避免了为每个子元素都绑定事件处理程序的开销。
    • 通过事件代理，可以简化代码，并实现对一组元素的统一事件管理。

事件代理的例子：

xml 复制代码 
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const list = document.getElementById('list');

  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('Clicked on list item:', event.target.textContent);
    }
  });
</script>

在这个例子中，只需将事件处理程序绑定到父元素<ul>上，而不是每个<li>元素上。当点击列表项时，事件冒泡到父元素，并通过判断事件的目标元素来确定点击的是哪个列表项。控制台输出结果为：

csharp 复制代码 
Clicked on list item: Item 1
Clicked on list item: Item 2
Clicked on list item: Item 3

实战：实现简易todo

以下代码演示了如何使用 JavaScript 形成简易 todo：

javascript 复制代码 
// 创建一个 todo 列表
const todoList = [];

// 添加一个 todo
function addTodo(text) {
  // 创建一个新的 todo
  const todo = {
    text: text,
    completed: false,
  };

  // 将 todo 添加到列表中
  todoList.push(todo);
}

// 显示 todo 列表
function showTodoList() {
  // 遍历 todo 列表
  for (const todo of todoList) {
    // 显示 todo
    console.log(`${todo.text} - ${todo.completed ? "已完成" : "未完成"}`);
  }
}

// 完成一个 todo
function completeTodo(index) {
  // 获取 todo
  const todo = todoList[index];

  // 设置 todo 为已完成
  todo.completed = true;

  // 在捕获阶段触发事件
  todo.addEventListener("change", function(event) {
    console.log("todo 已完成");
  });
}

// 删除一个 todo
function deleteTodo(index) {
  // 删除 todo
  todoList.splice(index, 1);
}

// 添加一个 todo
addTodo("学习 JavaScript");
addTodo("完成一个 todo");

// 显示 todo 列表
showTodoList();

// 完成一个 todo
completeTodo(0);

// 显示 todo 列表
showTodoList();

该代码实现了以下功能：

  • 添加 todo：可以通过调用 addTodo() 函数来添加一个 todo。
  • 显示 todo 列表：可以通过调用 showTodoList() 函数来显示 todo 列表。
  • 完成 todo：可以通过调用 completeTodo() 函数来完成一个 todo。
  • 删除 todo：可以通过调用 deleteTodo() 函数来删除一个 todo。

以下是该代码的详细说明：

  • 创建一个 todo 列表：使用 Array() 构造函数创建一个空数组。
  • 添加一个 todo：使用 push() 方法将一个新的 todo 添加到列表中。
  • 显示 todo 列表：使用 for 循环遍历列表，并将每个 todo 打印到控制台。
  • 完成一个 todo：使用 splice() 方法将一个 todo 从列表中删除，并将 completed 属性设置为 true。
  • 删除一个 todo：使用 splice() 方法将一个 todo 从列表中删除。

增加了以下功能：

  • 在捕获阶段触发事件：在完成一个 todo 时，会在捕获阶段触发 change 事件。
  • 在冒泡阶段处理事件：在 change 事件处理函数中，会在冒泡阶段打印出 "todo 已完成"。

以下是该代码的详细说明：

  • 在捕获阶段触发事件：使用 addEventListener() 方法在 todo 对象上注册 change 事件处理函数。
  • 在冒泡阶段处理事件：在 change 事件处理函数中，会在冒泡阶段打印出 "todo 已完成"。

显示todo的语法解析

javascript 复制代码 
// 显示 todo
    console.log(`${todo.text} - ${todo.completed ? "已完成" : "未完成"}`);

这句话是使用 JavaScript 模板字符串（template literals）来格式化字符串。

<span class="math-inline">{todo.text} 表示将 todo 对象的 text 属性的值插入到字符串中。 {todo.completed ? "已完成" : "未完成"}表示根据todo对象的completed属性的值来插入不同的值。如果completed属性的值为true，则插入 "已完成"，否则插入 "未完成"。

因此，这句话的意思是将 todo 对象的 text 属性的值和 completed 属性的值插入到字符串中，并用 "-" 连接。例如，如果 todo.text 的值为 "学习 JavaScript"，todo.completed 的值为 true，则这句话会将 "学习 JavaScript - 已完成" 插入到字符串中。

以下是这句话的详细说明：

  • ${ 和 } 是模板字符串的定界符。
  • todo.text 是 JavaScript 表达式，表示 todo 对象的 text 属性的值。
  • ? 和 : 是 JavaScript 的条件运算符。
  • "已完成" 和 "未完成" 是字符串常量。

使用事件代理优化

事件代理是JavaScript中一种优化事件处理的技术，它通过将事件监听器绑定到父元素，而不是子元素，来实现。当事件发生时，事件会冒泡到父元素，然后由父元素的事件处理函数来判断具体的子元素触发了事件，并执行相应的处理逻辑。

事件代理可以提高事件处理的性能，因为它可以减少事件处理程序的数量。传统上，我们需要为每个子元素绑定一个事件处理程序，这样当事件发生时，浏览器需要多次访问DOM，才能找到目标元素并执行事件处理程序。而使用事件代理后，我们只需要在父元素上绑定一个事件处理程序，这样当事件发生时，浏览器只需要访问父元素一次，就可以找到目标元素并执行事件处理程序。

事件代理还可以简化代码。传统上，我们需要为每个子元素编写事件处理程序，这样代码会变得冗长和复杂。而使用事件代理后，我们只需要在父元素上编写一个事件处理程序，这样代码会变得更加简洁和易于维护。

在JavaScript中，使用事件代理优化，可以遵循以下步骤：

  1. 确定父元素。事件代理需要绑定到一个父元素，这个父元素应该是所有子元素的共同父元素。
  2. 绑定事件处理程序。在父元素上绑定一个事件处理程序，这个事件处理程序应该负责判断具体的子元素触发了事件，并执行相应的处理逻辑。
  3. 在事件处理程序中获取目标元素。通过事件对象的 target 属性，可以获取事件的目标元素。
  4. 判断目标元素。根据目标元素，执行相应的处理逻辑。

以下是一个使用事件代理优化的示例：

javascript 复制代码 
// HTML
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// JavaScript
const list = document.getElementById("list");

// 使用事件代理
list.addEventListener("click", (event) => {
  // 获取目标元素
  const target = event.target;

  // 判断目标元素
  if (target.tagName === "LI") {
    // 执行相应的处理逻辑
    alert(target.textContent);
  }
});

在上述示例中，我们使用事件代理来处理列表中的点击事件。传统上，我们需要为每个列表项都绑定一个点击事件处理程序，这样代码会变得冗长和复杂。而使用事件代理后，我们只需要在父元素上绑定一个点击事件处理程序，这样代码会变得更加简洁和易于维护。

在使用事件代理时，需要注意以下几点：

  • 事件代理只能用于具有层级关系的元素。如果元素没有层级关系，那么事件代理就无法发挥作用。
  • 事件代理不能完全替代传统的事件处理方式。在某些情况下，我们仍然需要为每个子元素绑定一个事件处理程序，例如需要为子元素提供不同的处理逻辑。

如何用事件代理优化简易实现todo代码呢？

在一个简单的todo应用程序中，您可能需要将一个事件绑定到每个todo元素，以便在用户单击它时将其标记为完成。如果您有大量的todo元素，这可能会变得很乏味。

使用事件代理，您可以将一个事件绑定到document元素，并将该事件代理到每个todo元素。这将可以简化代码，并使其更容易维护。

以下是使用事件代理来优化简易todo应用程序代码的示例：

dart 复制代码 
// 原始代码
const todoItems = document.querySelectorAll('.todo');

for (const todoItem of todoItems) {
  todoItem.addEventListener('click', () => {
    todoItem.classList.toggle('completed');
  });
}

// 使用事件代理的代码
const handleTodoClick = (event) => {
  event.target.classList.toggle('completed');
};

document.addEventListener('click', handleTodoClick);

在原始代码中，我们使用querySelectorAll()方法来获取所有todo元素。然后，我们使用addEventListener()方法将一个事件绑定到每个todo元素。

在使用事件代理的代码中，我们定义了一个名为handleTodoClick()的函数来处理todo元素的点击事件。然后，我们使用addEventListener()方法将一个事件绑定到document元素。该事件代理将handleTodoClick()函数应用于所有点击的元素。

使用事件代理，我们可以简化我们的代码，并使其更容易维护。我们不需要为每个todo元素单独绑定事件。相反，我们可以将一个事件绑定到document元素，并将该事件代理到所有todo元素。

以下是使用事件代理的一些其他优点：

  • 它可以简化代码，使其更容易阅读和理解。
  • 它可以使代码更容易维护，因为您只需要更新一个事件处理程序即可影响多个元素。
  • 它可以提高性能，因为事件代理可以防止在不需要时调用事件处理程序。
相关推荐
DoraBigHead4 分钟前
你写前端按钮，他们扛服务器压力：搞懂后端那些“黑话”！
前端·javascript·架构
前端世界41 分钟前
鸿蒙UI开发全解：JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
上单带刀不带妹1 小时前
JavaScript中的Request详解：掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
ningmengjing_2 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
晓13132 小时前
JavaScript基础篇——第五章 对象（最终篇）
开发语言·前端·javascript
灋✘逞_兇3 小时前
Node.Js是什么？
服务器·javascript·node.js
小飞悟4 小时前
那些年我们忽略的高频事件，正在拖垮你的页面
javascript·设计模式·面试
中微子4 小时前
闭包面试宝典：高频考点与实战解析
前端·javascript
G等你下课4 小时前
告别刷新就丢数据！localStorage 全面指南
前端·javascript
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04免费领50刀！AnyRouter一键解锁Claude最强编程模型05Java学习第十五部分——MyBatis06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07RAL-2025 | 触觉助力无人机空中探索！基于柔顺机器人手指的无人机触觉导航08基于odoo17的设计模式详解---单例模式09DeepSeek各版本说明与优缺点分析10LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力