Javascript 中的 DOM 中添加的新元素是否有类似 "onload" 的事件侦听器？

Question

Javascript 是否提供类似于 onload 的事件侦听器，如果通过 innerHTML 添加元素到 DOM 将被调用？

我知道<body onload="alert('hi');">...</body>。但它只在整个站点加载时才起作用。是否有可能通过 innerHTML = ... 添加一个元素，立即触发它包含的事件侦听器？

它应该看起来像这样并且它必须是这样的内联-HTML 侦听器：

elementxy.innerHTML = '<b onload="dosth()">....</b>'

Answer 1

这是一个 非常糟糕的 hack，但您可以创建一个不可见的 <img> 标签，其中包含一个 onerror 属性和一个 src导致错误：

const dosth = () => {
  console.log('dosth');
};

div.innerHTML = '<b>b content<img style="display: none;" onerror="this.remove(); dosth()" src="badsrc"></b>';

<div id="div"></div>

这就是为什么插入不可信的 HTML 不是一个好主意的原因之一 - 即使使用 innerHTML，它也允许执行任意代码。

无论如何，最好完全避免内联处理程序。

Javascript 中的 DOM 中添加的新元素是否有类似 "onload" 的事件侦听器？

Is there an "onload"-similar event listener for new elements beeing added to the DOM in Javascript?

javascript

events

innerhtml

listener

dom-events