javascript 为所有动态创建的元素绑定事件[已关闭]

06odsfpq 于 2022-12-21 发布在 Java

关注(0)|答案(1)|浏览(121)

- 已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。

这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
19小时前关门了。
Improve this question
我想创建绑定事件与所有元素将动态生成。
看看这个代码：
第一个月
它只适用于第一个元素。例如-如果我点击第一个评论，警报会显示，但如果我点击另一个它不会。
'常量注解=文档.查询选择器全部（'. comment'）;

comments.forEach((comment) => {

    comment.addEventListener('click', (e) => {

      alert('Hello World');
    })

})

'OK.它工作了，但是我们有一个循环，我不会用这种方式，因为我有比display alert更复杂的逻辑，而且这个代码有时会崩溃.所以第一种方式对我来说是最好的，但是它只对第一个元素有效.有什么想法吗？

JavaScript

来源：https://stackoverflow.com/questions/74863347/bind-events-for-all-dinamically-created-elements

1条答案

按热度按时间

nnt7mjpx1#

委托事件

使用事件委托，通常来自静态父级：

document.querySelector("#allComments").addEventListener("click", (evt) => {

  const elTarget = evt.target.closest(".comment");
  if ( !elTarget  ) return; // do nothing.

  // Do something with elTarget  here
});

基本遵循以下规则：

要获取 * #allComments*父委托者，请使用evt.currentTarget
使用evt.target（注意!这也可能是.comment的子元素）来获得*精确的 * 单击元素
要获得**所需的单击.comment**元素，请使用evt.target.closest(".comment")

动态元件的完整示例：
x一个一个一个一个x一个一个二个x

直接事件

或者，您可以在创建时直接将单击处理程序附加到子对象上：
一个三个三个一个
资源：

赞(0）回复(0）举报 2022-12-21

我来回答

javascript 为所有动态创建的元素绑定事件[已关闭]

1条答案

委托事件

直接事件

相关问题

热门标签

最新问答