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

Question

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

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

Answer 1

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

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

 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>

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

问题描述

1 个解决方案

解决方案1
0 2021-02-09 10:43:34

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

问题描述

1 个解决方案

解决方案1 0 2021-02-09 10:43:34

解决方案1
0 2021-02-09 10:43:34