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

【问题标题】：JavaScript event listener for non-input elements [duplicate]非输入元素的JavaScript事件监听器[重复]
【发布时间】：2012-11-28 03:35:48
【问题描述】：

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

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

【问题讨论】：

【解决方案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;    
});

【讨论】：