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

Passing event listener parameters with native javascript?

本文关键字：事件 侦听器 参数 本机 javascript      更新时间：2023-09-26

我已经实现了三个类似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]);

但我需要修改我的触发器函数，以便在事件对象之后用额外的参数调用监听器。类似于带有extraParameters属性的jquery.trigger((函数。例如：

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

    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);

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

参考

编辑：

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

相关文章：