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等同于触发器

使用本机javascript传递事件侦听器参数？

1 个答案: