有没有一种有效的方法来通知HTML DOM元素属性更改?

本文介绍了有没有一种有效的方法来通知HTML DOM元素属性更改?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个<ul><li>列表，需要通知每个<li>的当前width/height. 假设这些属性之一是由外部原因(而不是我自己的代码)更改的，例如，通过调整浏览器的大小，其他脚本，样式的交换或我无法用自己的代码控制的类似内容.

I have a <ul><li> list, and need to be informed about the current width/height of each <li>. Let's say that one of these attributes changes by an external cause (not my own code), e.g., by resizing the browser, by another script, an exchange of styles, or something similar that I cannot control with my own code.

跟踪这些更改的最佳，最有效的(性能)方法是什么?

我的第一个解决方案是setInterval(myMonitorFunction, 100)，它遍历所有相关的DOM元素.这比较耗时(100毫秒)，而且元素列表越大，消耗的性能也越多.

My first solution would be a setInterval(myMonitorFunction, 100), that loops through all relevant DOM elements. This is laggy (100ms), and also consumes a lot of performance the bigger the element list gets.

对于表单元素，有一个onchanged事件允许有效监视输入值.我正在为所有/其他DOM元素属性寻找相似(和相似效率)的东西，但是找不到任何好的解决方案.

For form elements there is the onchanged event allowing efficient monitoring of input values. I am looking for something similar (and similar efficient) for all/other DOM element attributes, but could not find any nice solution yet.

推荐答案

有一个 DOMAttrModified 事件，但仅在现代浏览器中受支持.如果您想支持较旧的浏览器(如IE)，除了您提到的浏览器(当然这是过大的选择)之外，没有其他简便的方法.

There's a DOMAttrModified event but it's only supported in modern browsers. If you want to support older browsers (like IE) there's no easy way to do this, other than the one you mentioned (which is an overkill of course).