如何用js监听一个元素的属性变化？

sirzxj 2012-04-05 02:12:59

比如说，一个元素的title属性是aaa然后，变成bbb了，怎么监听呢

...全文

17274 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

夕水溪下 2012-04-06

打赏
举报

setInterval应该是不错的办法吧，还有更好的吗？

hch126163 2012-04-06

打赏
举报

setInterval 吧

一个全局变量保存初始值
var org='';
var txt ; // 要监听元素
setInterval(function(){if(txt.title!=org){org=txt.title;alert("changed");}},10);

caijue2 2012-04-06

打赏
举报

何不创建自己的事件呢？

还在加载中灬 2012-04-06

打赏
举报

[Quote=引用 5 楼的回复:]
不兼容chrome
[/Quote]
据我所知，chrome还没有类似的监听...

不过，一个title的改变，应该只能通过方法吧，你就要干什么，直接写在一起

另外，chrome兼容oninput，但可能用不上

喵贤 2012-04-06

打赏
举报

给这个元素添加change事件，在change里面判断title是aaa还是bbb，然后写处理函数。

HPhone 2012-04-06

打赏
举报



<html>

<head>

<script>

function AddListeners () {

var elemToCheck = document.getElementById (“myDiv”);

if (elemToCheck.addEventListener) { // Firefox, Opera and Safari

elemToCheck.addEventListener (‘DOMAttrModified’, OnAttrModified, false);

} else if (elemToCheck.attachEvent) { // Internet Explorer

elemToCheck.attachEvent (‘onpropertychange’, OnAttrModified);

}

}

function OnAttrModified (event) {

var txt = “”;

if (event.attrChange) {

// Firefox, Safari, Opera

txt += “The element: ” + event.target;

txt += “\nproperty: ” + event.attrName;

txt += “\noriginal value: ” + event.prevValue;

txt += “\n changed to: ” + event.newValue;

} else {

// Internet Explorer

txt += “The element: ” + event.srcElement.tagName;

txt += “\nproperty: ” + event.propertyName;

var elem = event.srcElement;

txt += “\nchanged value: ” + elem.attributes[event.propertyName].value;

}

alert (txt);

}

function ChangeDDD () {

var div = document.getElementById (“myDiv”);

div.setAttribute(“ddd”,”New Attribute”);

}

</script>

</head>

<body onload=“AddListeners ();”>

<button onclick=“ChangeDDD ();”>Change ddd Attribute!</button>

<div id=“myDiv” ddd=“Old Attribute”>

divdivdivdivdivdivdivdiv

</div>

</body>

</html>

-AJ- 2012-04-05

打赏
举报

add listener in controller

sirzxj 2012-04-05

打赏
举报

[Quote=引用 3 楼的回复:]

http://ruyice.com/demoblog/2010/06/js%E4%BA%8B%E4%BB%B6on_attr_change%EF%BC%8C%E7%9B%91%E5%90%AC%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8F%98%E5%8C%96%EF%BC%8C%E4%BB%A5%E4%BE%BF%E5%B1%9E%E6%……
[/Quote]

这个貌似不兼容chrome额

还在加载中灬 2012-04-05

打赏
举报

三石-gary 2012-04-05

打赏
举报

http://ruyice.com/demoblog/2010/06/js%E4%BA%8B%E4%BB%B6on_attr_change%EF%BC%8C%E7%9B%91%E5%90%AC%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8F%98%E5%8C%96%EF%BC%8C%E4%BB%A5%E4%BE%BF%E5%B1%9E%E6%80%A7%E5%8F%98%E5%8C%96%E7%9A%84/

sirzxj 2012-04-05