Вход

Просмотр полной версии : Событие при создании div

tr0y
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
20.10.2015, 18:58
tr0y, вешать события куда логичнее на сам объект, а не на элемент.

this.dispatchEvent('show');

Можете использовать мой класс EventDispatcher (http://javascript.ru/forum/xhtml-html-css/58769-eventdispatcher-js.html) для таких целей. :)
tr0y
20.10.2015, 19:42
tr0y, вешать события куда логичнее на сам объект, а не на элемент.

this.dispatchEvent('show');

Можете использовать мой класс EventDispatcher (http://javascript.ru/forum/xhtml-html-css/58769-eventdispatcher-js.html) для таких целей. :)

this.dispatchEvent is not a function :(
ruslan_mart
20.10.2015, 20:18
tr0y, подключите мой класс, который выше дал, и:

Modal.prototype.__proto__ = EventDispatcher.prototype;
tr0y
20.10.2015, 20:22
Ruslan_xDD,
Т.е. без класса это сделать не получится? Просто не хочется таскать за файлом доп библиотеки.
ruslan_mart
20.10.2015, 20:36
tr0y, там коду мало. :)

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

По поводу Вашего вопроса: попробуйте навесить на элемент событие "DOMNodeInserted", хотя я точно не уверен по поводу него, так как не пользуюсь таким.
ruslan_mart
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
20.10.2015, 22:42
Ruslan_xDD,
И с Вашим классом работать не хочет. В классе, кстати, ругается на переменные w и d, которых нет.
tr0y
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
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>
tr0y
21.10.2015, 00:40
Может так

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


Т.е. подписаться на событие в любом месте не выйдет? Обязательно нужно слушать событие ДО его срабатывания?
Vlasenko Fedor
21.10.2015, 00:48
подписаться на событие в любом месте не выйдет?
подписаться можно в любом месте, на любом элементе
Обязательно нужно слушать событие ДО его срабатывания
В данном случае да, иначе инициализатор события должен сам отправлять(генерировать) сообщения
tr0y
21.10.2015, 00:52
подписаться можно в любом месте, на любом элементе

В данном случае да, иначе инициализатор события должен сам отправлять(генерировать) сообщения

Спасибо! Значит буду думать как решить проблему.
ruslan_mart
21.10.2015, 08:28
И с Вашим классом работать не хочет. В классе, кстати, ругается на переменные w и d, которых нет.

Дико извиняюсь, исправил.