Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.05.2012, 02:47
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

Событие изменения DOM
Есть ли событие, когда DOM был изменен?
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2012, 03:06
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

есть, гуглите dom mutation events
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2012, 11:39
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

Написано, что оно не является cancelable...
Можно ли как то получить добавленный элемент, что бы удалить только его, а не обходить весь DOM Заново?
Так же нашел какой-то MutationObserver, но по нему информации на русском совсем мало.
Ответить с цитированием
  #4 (permalink)  
Старый 16.05.2012, 14:28
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Добавленный элемент будет в event.target

document.addEventListener("DOMNodeInserted", function (event) {
	alert(event.target);
}, false);

document.body.appendChild(document.createElement("h1"));

IE<9 не поддерживает mutation events
Ответить с цитированием
  #5 (permalink)  
Старый 16.05.2012, 16:35
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

Мне только для веб кит, приложение для KDE делаю.

А изменение стиля (style=) можно отловить так, что бы знать, у какого элемента он изменился? DOMAttrModified почему-то не перехватывается.

Последний раз редактировалось Octane, 17.05.2012 в 16:44.
Ответить с цитированием
  #6 (permalink)  
Старый 16.05.2012, 20:37
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Да, в Chrome 20 почему-то не работает, все остальные браузеры реагируют на изменения style

----------
Ааааа в webkit вообще не работает DOMAttrModified, но на stackowerflow нагуглился пример использования WebKitMutationObserver: http://stackoverflow.com/a/10466236
вроде работает

Последний раз редактировалось Octane, 16.05.2012 в 20:54.
Ответить с цитированием
  #7 (permalink)  
Старый 16.05.2012, 22:56
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

Странно, у меня почему-то в chrome просто не работает, а rekonq вообще пишет "ReferenceError: Can't find variable: WebKitMutationObserver"
Ответить с цитированием
  #8 (permalink)  
Старый 16.05.2012, 23:24
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Может быть это где-нибудь в chrome:flags включается, хотя у меня без всяких настроек такой конструктор доступен:
Ответить с цитированием
  #9 (permalink)  
Старый 17.05.2012, 01:18
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

В хроме функция есть, просто не работает, код вроде без ошибок
<!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, вобще нет этой функции
Ответить с цитированием
  #10 (permalink)  
Старый 17.05.2012, 01:51
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

опа, уже 20й хром я отстал от жизни=)

Octane,
а где можна скачать версию dev-m , а то чет не могу найти на офф сайте

Последний раз редактировалось Octane, 17.05.2012 в 16:43.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция изменения DOM, нужно разобраться что и как fiw Общие вопросы Javascript 1 03.11.2011 06:43
Событие изменения элемента trikadin Events/DOM/Window 2 13.06.2011 22:02
Событие изменения размера элемента <div>, <td> javascripter Events/DOM/Window 10 01.03.2011 02:33
Отработка скрипта после изменения DOM. Беляш Общие вопросы Javascript 3 15.10.2010 15:56
Отловить событие изменения элемента pavl Events/DOM/Window 13 13.04.2009 13:00