将事件附加到元素并正确调度它

Question

我需要将一个名为 render 的事件附加到 panel 元素，它只会在 panel 渲染时被分派以警告所有听众。

按照 this link 的老式方法部分，我想出了这个代码：

/**
* **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，但只打印了一次。

我以为我可以在控制台中看到与触发 render 事件的次数一样多的 "ciao"，但事实并非如此。

Answer 1

mdn guide on creating and dispatching custom events（与您的 link 相同）

老式的方法在我尝试时似乎仍然可以正常工作，每次触发事件时我都会看到文档事件监听器控制台日志。

更新后的方式是： 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>

Answer 2

如果您在每次触发事件时都尝试检查，addEventListener 的第二个参数（考虑到您愿意实现的目标）应该是使用事件对象作为参数的函数回调，例如示例：

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

在您的示例中，您正在执行 console.log("ciao")，没有传递函数引用（匿名或非匿名），这就是它只执行一次的原因：当页面 loads/evaluates 你的脚本。

将事件附加到元素并正确调度它

Attaching an Event to an element and dispatching it correctly

javascript

events

event-handling