Форум

tr0y · #1 (**permalink**) 19.10.2015, 21:13

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

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?

ruslan_mart · #2 (**permalink**) 20.10.2015, 18:58

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

this.dispatchEvent('show');

Можете использовать мой класс EventDispatcher для таких целей.

tr0y · #3 (**permalink**) 20.10.2015, 19:42

Сообщение от Ruslan_xDD

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

this.dispatchEvent('show');

Можете использовать мой класс EventDispatcher для таких целей.

this.dispatchEvent is not a function

ruslan_mart · #4 (**permalink**) 20.10.2015, 20:18

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

Modal.prototype.__proto__ = EventDispatcher.prototype;

tr0y · #5 (**permalink**) 20.10.2015, 20:22

Ruslan_xDD,
Т.е. без класса это сделать не получится? Просто не хочется таскать за файлом доп библиотеки.

ruslan_mart · #6 (**permalink**) 20.10.2015, 20:36

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

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

По поводу Вашего вопроса: попробуйте навесить на элемент событие "DOMNodeInserted", хотя я точно не уверен по поводу него, так как не пользуюсь таким.

ruslan_mart · #7 (**permalink**) 20.10.2015, 22:03

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

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();

tr0y · #8 (**permalink**) 20.10.2015, 22:42

Ruslan_xDD,
И с Вашим классом работать не хочет. В классе, кстати, ругается на переменные w и d, которых нет.

tr0y · #9 (**permalink**) 20.10.2015, 22:58

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, например, реализовано событие во время появления окна. Но сам бутстрап мне не подходит.

Vlasenko Fedor · #10 (**permalink**) 21.10.2015, 00:34

Может так

<!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>

Форум

Справочник

Discord чат

Курсы javascript