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

【问题标题】：Event handler not being delegated to parent element事件处理程序未委托给父元素
【发布时间】：2021-02-08 09:44:27
【问题描述】：

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

控制台抛出的更多信息：未捕获的类型错误：“无法在 index.js:19 的 removeItem (index.js:8) 处读取 getTarget (index.js:3) 处未定义的属性 '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>

【问题讨论】：

标签： javascript event-handling delegates

【解决方案1】：

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

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

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>

【讨论】：