javascript - 使用 native JavaScript 传递事件监听器参数？

Question

我已经实现了三个类似 jQuery 的函数来控制我的自定义事件(我不能在我的项目中使用 jquery :-():

var Events = {
   on: function(evt, fn) {
       document.addEventListener(evt, fn);
   },
   off: function() {
       document.removeEventListener(evt, fn);
   },
   trigger: function(evt, params) {
        var event; // The custom event that will be created
            if (document.createEvent) {
                event = document.createEvent("HTMLEvents");
                event.eventName = evt;
                event.initEvent(evt, true, true);
                event.data = params;
                window.dispatchEvent(event);
            } else {
                event = document.createEventObject();
                event.eventName = evt;
                event.eventType = evt;
                event.data = params;
                window.fireEvent("on" + event.eventType, event);
            }
   }
}

当我使用观察者实现时，我有:

Events.on('custom', function(e) {
       console.log(e.data); // output [5,10,15]
});

Events.trigger('custom', [5, 10, 15]);

但我需要修改我的触发函数，以在事件对象之后使用附加参数调用监听器。类似于 jquery.trigger()具有 extraParameters 属性的函数。以我为例:

Events.on('custom', function(e, a, b, c) {
     console.log(a, b, c); //output [5,10,15]
});

Events.trigger('custom', [5,10,15]);

Answer 1

    var event = new CustomEvent('build', { 'detail': 'test' });


    // Listen for the event.
    document.addEventListener('build', function (events) {
        console.log(events.detail)
    }, false);

    // Dispatch the event.
    document.dispatchEvent(event);

通过这种方式，您可以将数据传递给自定义创建的事件

ref

编辑:

if (window.CustomEvent) {
  var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: 'data'});
}

这相当于 jquery 的触发器