当我将 eventHandler 或 onClick 添加到元素时，“它在哪里”？答案

【问题标题】：When I add an eventHandler or onClick to an element, where "is it"?当我将 eventHandler 或 onClick 添加到元素时，“它在哪里”？
【发布时间】：2021-02-13 18:51:52
【问题描述】：

如果我动态创建一个元素，然后向它添加一个 onclick="function()"，那么为什么不将该代码物理添加到元素中，就像向它添加一个类一样？

问是因为我想在玩家之间来回传递棋盘游戏。我可以通过 AJAX 将容器元素的 innerHTML 发送给下一个玩家，物理游戏将为他们加载 - 但是动态创建的片段上的任何事件处理程序都不再存在。

我是否必须创建一个函数才能将它们放回去？我认为这不会太难，但是如果有一种方法可以在添加到元素时将 onclick 代码写入 html 页面，以便它通过 innerHTML 会更容易。

【问题讨论】：

更改innerHTML 的内容将重新渲染其中的所有元素。所以基本上你刷新所有元素。但是关于你的事件。在处理动态内容时，您可以像您建议的那样重新添加事件侦听器，或使用 事件委托 并在动态内容的父元素上侦听事件。（大多数）事件会冒泡，并且可以在不变的元素上捕获。
啊，这是个好主意。有没有办法用网格显示父母在他们的网格中有多个动态创建的孩子？我的意思是有没有办法为每个单独的网格空间放置一个监听器？或者我需要为每个动态创建的元素创建一个单独的父元素吗？
onclick / onXXX 是邪恶的：softwaretestinghelp.com/javascript-injection-tutorial 你基本上是在黑自己
好的，那我应该怎么做呢？ addEventListener 更好吗？还是一样糟糕？
是的，它们都有 id 和 class。好的，我刚刚阅读了代表团。因此，我可以通过从被点击的孩子那里获取 ID 或数据属性或其他任何内容来让父母触发正确的功能。这太棒了！谢谢！

标签： javascript ajax onclick eventhandler

【解决方案1】：

您可以像目前一样通过 AJAX 传递 innerHTML，但使用 onclick 容易受到 XSS 攻击，除非您进行某种 JS 混淆。

比混淆更容易的是使用点击处理程序为两个玩家共享通用 Javascript。像这样：

// Assign an ID for every button, and handle each event separately.
const buttonElement = document.querySelector('#btnOne');

// This is the equivalent of `onclick`
buttonElement.addEventListener('click', function (event) {
  alert('Element clicked through function!');
});

【讨论】：

【解决方案2】：

动态创建元素，添加事件需要使用事件委托。

【讨论】：

我以前不知道事件委托。看起来是一个很好的解决方案。但是我的动态（和随机）创建的元素每个都有一个基于它们的动态创建的功能。所以我猜最好的方法是创建一个数组，其中引用哪个元素在哪个位置，委托函数可以引用哪个函数来知道要使用哪个函数，具体取决于单击了哪个元素？除非有更好的办法！