Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.10.2015, 21:13
Интересующийся
Отправить личное сообщение для tr0y Посмотреть профиль Найти все сообщения от tr0y
 
Регистрация: 01.08.2013
Сообщений: 14

Событие при создании div
Здравствуйте! Есть простая функция создания элемента в теле документа:

Modal.prototype.show = function() {
   var self = this;
   var div = document.createElement('div');
   div.id = "modal" + self.id;
   document.getElementsByTagName('body')[0].appendChild(div);
   var event = new Event('show');
   div.dispatchEvent(event);
}

И функция удаления:

Modal.prototypa.hide = function(id) {
   var self = this;
   var div = document.getElementById("modal" + id);
   document.getElementsByTagName('body')[0].removeChild(div);
   var event = new Event('hide');
   div.dispatchEvent(event);
}


Когда я вешаю событие на удаление Modal, оно срабатывает, но не срабатывает при создании элемента. Как повесить событие на создание div, чтобы к нему можно было повесить обработчик с помощью addEventListener?
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2015, 18:58
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

tr0y, вешать события куда логичнее на сам объект, а не на элемент.

this.dispatchEvent('show');


Можете использовать мой класс EventDispatcher для таких целей.
Ответить с цитированием
  #3 (permalink)  
Старый 20.10.2015, 19:42
Интересующийся
Отправить личное сообщение для tr0y Посмотреть профиль Найти все сообщения от tr0y
 
Регистрация: 01.08.2013
Сообщений: 14

Сообщение от Ruslan_xDD Посмотреть сообщение
tr0y, вешать события куда логичнее на сам объект, а не на элемент.

this.dispatchEvent('show');


Можете использовать мой класс EventDispatcher для таких целей.
this.dispatchEvent is not a function
Ответить с цитированием
  #4 (permalink)  
Старый 20.10.2015, 20:18
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

tr0y, подключите мой класс, который выше дал, и:

Modal.prototype.__proto__ = EventDispatcher.prototype;
Ответить с цитированием
  #5 (permalink)  
Старый 20.10.2015, 20:22
Интересующийся
Отправить личное сообщение для tr0y Посмотреть профиль Найти все сообщения от tr0y
 
Регистрация: 01.08.2013
Сообщений: 14

Ruslan_xDD,
Т.е. без класса это сделать не получится? Просто не хочется таскать за файлом доп библиотеки.
Ответить с цитированием
  #6 (permalink)  
Старый 20.10.2015, 20:36
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

tr0y, там коду мало.

Не получится, так как таких нативных методов нет в объектах, к сожалению.

По поводу Вашего вопроса: попробуйте навесить на элемент событие "DOMNodeInserted", хотя я точно не уверен по поводу него, так как не пользуюсь таким.
Ответить с цитированием
  #7 (permalink)  
Старый 20.10.2015, 22:03
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

И вообще у Вас реализация не правильная, лучше сразу создавать элемент.

function Modal() {
    this.element = document.createElement('div');
};
Modal.prototype.show = function() {
    document.body.appendChild(this.element);
    this.element.dispatchEvent(new Event('show'));
};
Modal.prototype.hide = function() {
    document.body.removeChild(this.element);
    this.element.dispatchEvent(new Event('hide'));
};


var modal = new Modal();

modal.element.addEventListener('show', function() {
    alert('Hello world!');
});

modal.show();
Ответить с цитированием
  #8 (permalink)  
Старый 20.10.2015, 22:42
Интересующийся
Отправить личное сообщение для tr0y Посмотреть профиль Найти все сообщения от tr0y
 
Регистрация: 01.08.2013
Сообщений: 14

Ruslan_xDD,
И с Вашим классом работать не хочет. В классе, кстати, ругается на переменные w и d, которых нет.
Ответить с цитированием
  #9 (permalink)  
Старый 20.10.2015, 22:58
Интересующийся
Отправить личное сообщение для tr0y Посмотреть профиль Найти все сообщения от tr0y
 
Регистрация: 01.08.2013
Сообщений: 14

Ruslan_xDD,
var modal = new Modal();

modal.element.addEventListener('show', function() {
    alert('Hello world!');
});

modal.show();


Почему нельзя сделать:
var modal = new Modal();
modal.show();
modal.element.addEventListener('show', function() {
    alert('Hello world!');
});

А так проще калбэк воткнуть. Видимо, я чего-то не понимаю в событийной модели JS. Ведь логически, подписаться на событие можно где угодно, а не перед его срабатыванием.
С предложенной вами реализацией нельзя навесить разные слушатели на разные элементы. Именно из-за этого я создаю элементы не в классе, а в функции. Т.к. получаются разные экземпляры. Осталось понять как нормально навесить события. Вот в Bootstrap, например, реализовано событие во время появления окна. Но сам бутстрап мне не подходит.

Последний раз редактировалось tr0y, 20.10.2015 в 23:15.
Ответить с цитированием
  #10 (permalink)  
Старый 21.10.2015, 00:34
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,452

Может так
<!DOCTYPE HTML>
<html>
  <head><meta charset="utf-8"></head>
  <body>
<script>
document.body.addEventListener("DOMSubtreeModified", function(e){
    alert('Add dinamic element');
    console.dir(e)
}, false);

function buildElement(tagName, props) {
    var element = document.createElement(tagName);
    for (var propName in props) element[propName] = props[propName];
    return element;
}

document.body.appendChild(buildElement('input', {value: 'Test'}));
</script>
  </body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении на элемент появление div, положение которого постоянно меняется Poision Элементы интерфейса 5 27.01.2014 17:43
Событие при выборе элемента из выпадающего списка в input type="email" Алексей Горохов Events/DOM/Window 4 27.12.2013 08:38
как заставить событие при resize сработать с небольшой задержкой один раз? mitiya Общие вопросы Javascript 3 21.10.2012 19:00
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 15:21
Проблемы в ИЕ при динамическом создании элементов Арсений Элементы интерфейса 5 20.08.2010 14:57