事件处理程序未委托给父元素

如何解决事件处理程序未委托给父元素

为大量元素创建事件侦听器会减慢页面速度并使用大量内存。所以我一直试图将我的事件处理程序放在一个包含元素上，并使用事件对象的目标属性来查找事件发生在它的哪个子元素上。这将提供更好的性能，并且如果要删除或添加项目，页面仍将正常工作。理论上一切都很好，但在实践中，我无法让我的代码执行预期的操作。

更重要的是控制台抛出：未捕获的类型错误：“无法读取在 getTarget (index.js:3) at removeItem (index.js:8) at index.js:19 处未定义的属性 'target'”。它似乎指向参数“e”，该参数首先被传递到“getTarget”函数中。我不知道如何处理控制台抛出的错误。我的印象是，无需做任何事情，就会自动传递对事件对象的引用，然后我们只需要为其命名——程序员通常给它命名为“e”。

function getTarget(e) {
  return e.target;
}

function removeItem(e) {
  var container = document.getElementById("container");
  var target = getTarget(e);
  var parent = target.parentNode;
  parent.removeChild(target);

  target.addEventListener("click",function(e){
    removeItem(e)
  },false)

}

removeItem()

  <head>
    <meta charset="utf-8">
    <title>Practise App</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div id="container">
      <div class="">Monday</div>
      <div class="">Tuesday</div>
      <div class="">Wednesday</div>
      <div class="">Thursday</div>
      <div class="">Friday</div>
      <div class="">Saturday</div>
      <div class="">Sunday</div>
    </div>
    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

解决方法

我重写了我的代码。它现在更加优雅和高效，因为它使用更少的代码行。在我之前的代码中，我将一个参数传递给了一个由事件处理程序调用的命名函数。事件侦听器中的函数名称后不能有括号，因此我使用了一种解决方法。有问题的解决方法包括将函数名称包装在匿名函数中。

那是不必要的。我现在只使用匿名函数，其中传递了一个参数，即事件对象。

document.getElementById("container").addEventListener("click",function(e){
  var target = e.target;
  var parent = target.parentNode;
  parent.removeChild(target)
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Practise App</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div id="container">
      <div class="">Monday</div>
      <div class="">Tuesday</div>
      <div class="">Wednesday</div>
      <div class="">Thursday</div>
      <div class="">Friday</div>
      <div class="">Saturday</div>
      <div class="">Sunday</div>
    </div>
    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

现在更高效、更优雅，因为它使用更少的行

document.getElementById("container").addEventListener("click",function(e){
  var target = e.target;
  var parent = target.parentNode;
  parent.removeChild(target)
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Practise App</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <div id="container">
      <div class="">Monday</div>
      <div class="josue">Tuesday</div>
      <div class="">Wednesday</div>
      <div class="josue">Thursday</div>
      <div class="">Friday</div>
      <div class="josue">Saturday</div>
      <div class="">Sunday</div>
    </div>
    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

事件处理程序未委托给父元素

如何解决事件处理程序未委托给父元素

解决方法

相关推荐