Событие изменения DOM
Есть ли событие, когда DOM был изменен?
|
есть, гуглите dom mutation events
|
Написано, что оно не является cancelable...
Можно ли как то получить добавленный элемент, что бы удалить только его, а не обходить весь DOM Заново? Так же нашел какой-то MutationObserver, но по нему информации на русском совсем мало. |
Добавленный элемент будет в event.target
document.addEventListener("DOMNodeInserted", function (event) {
alert(event.target);
}, false);
document.body.appendChild(document.createElement("h1"));
IE<9 не поддерживает mutation events |
Мне только для веб кит, приложение для KDE делаю.
А изменение стиля (style=) можно отловить так, что бы знать, у какого элемента он изменился? DOMAttrModified почему-то не перехватывается. |
Да, в Chrome 20 почему-то не работает, все остальные браузеры реагируют на изменения style :(
---------- Ааааа в webkit вообще не работает DOMAttrModified, но на stackowerflow нагуглился пример использования WebKitMutationObserver: http://stackoverflow.com/a/10466236 вроде работает |
Странно, у меня почему-то в chrome просто не работает, а rekonq вообще пишет "ReferenceError: Can't find variable: WebKitMutationObserver"
|
Может быть это где-нибудь в chrome:flags включается, хотя у меня без всяких настроек такой конструктор доступен:
![]() |
В хроме функция есть, просто не работает, код вроде без ошибок
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Strict Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.onload = function() {
var element = document.documentElement, bubbles = false;
var observer = new WebKitMutationObserver(function (mutations) {
mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });
function attrModified(mutation) {
var name = mutation.attributeName,
newValue = mutation.target.getAttribute(name),
oldValue = mutation.oldValue;
console.log(name, newValue, oldValue);
}
}
function doo(el) {
var some = document.getElementById('some')
//some.style.border = '1px solid red'
some.setAttribute('style', 'border: 1px solid red')
}
</script>
</head>
<body>
<button onclick="doo(this)">click me</button><div id="some"></div>
</body>
</html>
А в нужном браузере, rekonq, вобще нет этой функции ![]() |
опа, уже 20й хром я отстал от жизни=)
Octane, а где можна скачать версию dev-m , а то чет не могу найти на офф сайте |
cyber, http://www.chromium.org/getting-involved/dev-channel
Logo, babbles же false, вот и не всплывают события выше element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<button onclick="doo(this)">click me</button><div id="some"></div>
<script>
var element = document.documentElement, bubbles = true;
var observer = new WebKitMutationObserver(function (mutations) {
mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: bubbles });
function attrModified(mutation) {
var name = mutation.attributeName,
newValue = mutation.target.getAttribute(name),
oldValue = mutation.oldValue;
alert([name, newValue, oldValue]);
}
function doo(el) {
var some = document.getElementById('some');
some.style.border = '1px solid red';
some.setAttribute('style', 'border: 1px solid red');
}
</script>
</body>
</html>
|
блин интерефейс ужасный на том сайте=) вчера мин 15 искал та и не нашел где скачать.
спс за линк |
| Часовой пояс GMT +3, время: 10:26. |