一招制胜！解决js创建元素后，js事件失效的难题

前端

2023-04-26 02:56:29

打破障碍：巧用事件委托，让动态创建元素的事件如虎添翼

想象一下，你在一个迷人的破案之旅中，却遇到了一个棘手的事件失效难题。当你使用 JavaScript 动态创建页面元素时，这些元素的事件绑定仿佛陷入了迷雾之中，让你百思不得其解。不要惊慌，我们这就踏上破解之旅，让你轻松解决这个恼人的问题。

问题根源：事件失效的背后黑手

当你使用 JavaScript 创建新元素时，这些元素不会包含在页面的初始 HTML 中。当浏览器解析页面时，它只会关注页面中已有的元素，为它们绑定事件。因此，当你稍后尝试为新创建的元素绑定事件时，浏览器就无从识别，导致事件失效。

妙招连连：事件委托的魔法秘笈

为了应对这一挑战，我们祭出 JavaScript 的杀手锏——事件委托 。它的工作原理就如同一名经验丰富的管家，负责处理来自各种子元素的事件，并将其传递给正确的目的地。

第一步：委托父元素

首先，你需要为新元素的父元素委以重任，绑定一个事件监听器。比如，如果你要添加一个按钮，可以为它的父元素绑定一个 click 事件监听器。

const parentElement = document.getElementById("parent");
parentElement.addEventListener("click", function(e) {
  // ...
});

第二步：目标元素的火眼金睛

当父元素上的事件被触发时，你可以使用 e.target 属性来获取触发事件的元素。随后，你可以检查 e.target 是否是你想要添加事件的新元素。如果目标一致，那就执行相应操作。

const parentElement = document.getElementById("parent");
parentElement.addEventListener("click", function(e) {
  if (e.target === newElement) {
    // ...
  }
});

实战演练：亲手破解事件失效的谜团

让我们用一个实际例子来演示如何使用事件委托解决动态创建元素的事件失效问题。

<div id="parent">
  <button id="newButton">点击我！</button>
</div>

const parentElement = document.getElementById("parent");
const newButton = document.getElementById("newButton");

parentElement.addEventListener("click", function(e) {
  if (e.target === newButton) {
    alert("按钮已点击！");
  }
});