非输入元素的JavaScript事件监听器[重复]

Posted 2023-05-07

【中文标题】非输入元素的JavaScript事件监听器[重复]

【英文标题】：JavaScript event listener for non-input elements [duplicate]

【发布时间】：2012-11-28 03:35:48

【问题描述】：

可能重复：Is there a jQuery DOM change listener?How do can watch DOM Object properties?

有没有办法将事件绑定到非输入类型的元素？例如，将事件绑定到在 href 属性更改时触发的锚元素。

【问题讨论】：

你说的是img和script元素吗？如果你改变了他们的 src，他们应该在新的 url 加载后触发一个 load 事件。

元素的 src 属性是如何改变的？

@bfavaretto：这就是答案！

好的 - 改变了我的例子，因为我实际上没有处理 src 并且不能使用那个解决方案。

在这种情况下，您几乎被当今世界的民意调查所困。

【参考方案1】：

您可以将处理程序绑定到非输入元素上的各种事件（click、mousemove 等）。但是，当属性更改时（例如链接上的 href 属性示例），不会引发（一致的跨浏览器）事件。正如bfavarello 所指出的，某些属性（如src）将导致事件（如load）作为次要事物。

（有一个关于元素的 "mutation" events 现已失效的提案，包括属性更改 [mutations]，但它从未得到广泛支持。有一个 newer proposal，但它也 [尚未] 得到广泛支持。）

当然，您可以使用轮询：保存旧值，并定期检查（通过setTimeout 或setInterval）查看它是否已更改。除非您要检查 很多 元素并且需要几乎不断地检查它们，否则这不一定是性能问题。

【参考方案2】：

DOM Mutation Observers 可以做到这一点，但它们非常新，在撰写本文时还没有得到很好的支持。

您是否正在编写扩展程序或类似内容（即，您不控制修改 DOM 的代码）？这是这些事件最常见的用例之一——您无法控制更改 DOM 的代码。我之前使用过 Mutation Summary，它在 Chrome 中运行良好。

如果您确实控制了修改 DOM 的代码 - 即您自己在自己的网站上修改属性 - 您可能希望在修改属性时简单地触发您自己的自定义事件。

【讨论】：

我就是这么想的！

好主意，但我无法控制修改属性的代码，因此我无法触发事件。

然后加载突变摘要。这就是它的用途！

【参考方案3】：

您可以将DomSubtreeModified 侦听器添加到祖先，或者您可以在DOM 对象的src 属性上使用watch（如果您使用的浏览器支持它）。

myImage.watch("src",function(id, oldval, newval)
    document.write("src changed!");
    return newval;    
);