Прикрепление события к элементу и его правильная отправка - PullRequest
Новая
       32

Прикрепление события к элементу и его правильная отправка

0 голосов
/ 28 октября 2019

Мне нужно прикрепить событие, называемое render, к элементу panel, который ничего не делает, кроме отправки для предупреждения всех слушателей при рендеринге panel.

После старомодногов разделе этой ссылки , я придумал этот код: 

/**
* **Static** Re-draw the layer panel to represent the current state of the layers.
* @param {Element} panel The DOM Element into which the layer tree will be rendered
*/
static renderPanel(panel) {

    // Create the event.
    var render_event = document.createEvent('Event');

    // Define that the event name is 'render'.
    render_event.initEvent('render', true, true);

    // Listen for the event.
    panel.addEventListener('render', function (e) {
        // e.target matches panel
    }, false);

    panel.dispatchEvent(render_event);

Кажется, это сработало, но так как я делаю это впервые, я не совсем уверен, какпроверьте правильность этого метода.

Заглядывая в консоль, я вижу, как мой panel элемент отправляет событие render, но я хотел бы спросить, есть ли что-то, чего я пропускаю или о чем беспокоитьсяпрежде чем двигаться дальше.

Чтобы отладить результат, я попытался добавить прослушиватель событий к элементу document, например document.addEventListener("render",console.log("ciao")), который, в свою очередь, печатал ciao один раз в консоли, но только один раз.

Я думал, что смогу увидеть столько «ciao» в консоли, сколько раз было запущено событие render, но это не так.

enter image description here

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Если вы пытаетесь проверять каждый раз, когда запускается ваше событие, вторым аргументом addEventListener (с учетом того, чего вы хотите достичь) должен быть обратный вызов функции с использованием объекта события в качестве аргумента, например, так:

document.addEventListener("render", function(e) { console.log("ciao"); });

В вашем примере вы выполняете console.log ("ciao"), не передавая ссылку на функцию (анонимную или нет), поэтому она выполняется только один раз: когда страница загружается /оценивает ваш скрипт.

1 голос
/ 28 октября 2019

Руководство mdn по созданию и отправке пользовательских событий (аналогично вашей ссылке)

Кажется, что старомодный метод все еще работает нормально, когда я попробовал его, я увидел прослушиватель событий документажурнал консоли каждый раз, когда я запускаю событие.

Обновленный способ: panel.dispatchEvent(new CustomEvent('render'));

let div = document.querySelector('div');
div.addEventListener('old-event', () => {console.log('Old-fashinoed event caught')});
div.addEventListener('new-event', () => {console.log('New-fashioned event caught')});

let oldEvent = document.createEvent('Event');
oldEvent.initEvent('old-event', true, true);

let newEvent = new CustomEvent('new-event');

setInterval(() => {
  div.dispatchEvent(oldEvent);
  div.dispatchEvent(newEvent);
}, 1000);
<div>I emit an old-fashioned and a new-fashioned event every 1 second</div>
...