触发然后处理 JavaScript 事件？答案

【问题标题】：Trigger then handle JavaScript events?触发然后处理 JavaScript 事件？
【发布时间】：2014-06-22 18:55:26
【问题描述】：

如何在原生 JavaScript 中触发然后处理事件？

我尝试过的：

var fireOffAnEvent = function () {
    // Dispatch the event.
    var custom_event; // The custom event that will be created

    if (document.createEvent) {
        custom_event = document.createEvent("HTMLEvents");
        custom_event.initEvent("custom", true, true);
    } else {
        custom_event = document.createEventObject();
        custom_event.eventType = "custom";
    }

    custom_event.eventMessage = "Hello events";

    document.createEvent ? document.dispatchEvent(custom_event) : document.fireEvent("on" + custom_event.eventType,
                                                                                        custom_event);
}
fireOffAnEvent()

以下是我尝试处理这些事件的方式：

document.addEventListener("custom", function(e) {
    console.log(e.eventMessage);
}); // Nothing happened

document.addEventListener("HTMLEvents", function(e) {
    console.log(e.eventMessage);
}); // So tried ^, still nothing

Plnkr：http://run.plnkr.co/Zqcdoj3W5z5w4ZQu/

【问题讨论】：

自定义事件（创建、触发和处理）的代码示例：developer.mozilla.org/en-US/docs/Web/Guide/Events/…

标签： javascript events dom-events addeventlistener polyfills

【解决方案1】：

尝试在注册监听器后触发您的事件。（放在代码的末尾）。那么事件应该由他们妥善处理

【讨论】：

太棒了。你能把它标记为正确答案吗？谢谢

【解决方案2】：

试试这个，效果很好

var fireOffAnEvent = function () {
// Dispatch the event.
var custom_event; // The custom event that will be created

if (document.createEvent) {
    custom_event = document.createEvent("HTMLEvents");
    custom_event.initEvent("custom", true, true);
} else {
    custom_event = document.createEventObject();
    custom_event.eventType = "custom";
}

custom_event.eventMessage = "Hello events";

document.createEvent ? document.dispatchEvent(custom_event) : document.fireEvent("on" + custom_event.eventType,
                                                                                    custom_event);
}
// add the listener first 
document.addEventListener("custom", function(e) {
    console.log(e.eventMessage);
});

// then invoke it
fireOffAnEvent();

这里是测试链接http://jsfiddle.net/qikhan/x4r4B/

【讨论】：