Событие при создании 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? |
tr0y, вешать события куда логичнее на сам объект, а не на элемент.
this.dispatchEvent('show');
Можете использовать мой класс EventDispatcher для таких целей. :) |
Цитата:
|
tr0y, подключите мой класс, который выше дал, и:
Modal.prototype.__proto__ = EventDispatcher.prototype; |
Ruslan_xDD,
Т.е. без класса это сделать не получится? Просто не хочется таскать за файлом доп библиотеки. |
tr0y, там коду мало. :)
Не получится, так как таких нативных методов нет в объектах, к сожалению. По поводу Вашего вопроса: попробуйте навесить на элемент событие "DOMNodeInserted", хотя я точно не уверен по поводу него, так как не пользуюсь таким. |
И вообще у Вас реализация не правильная, лучше сразу создавать элемент.
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();
|
Ruslan_xDD,
И с Вашим классом работать не хочет. В классе, кстати, ругается на переменные w и d, которых нет. |
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, например, реализовано событие во время появления окна. Но сам бутстрап мне не подходит. |
Может так
<!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>
|
| Часовой пояс GMT +3, время: 10:05. |