如何为 JavaScript 中的任何对象实现事件侦听器

Question

我想用这个功能实现自定义事件：

创建自定义事件
在ajax调度事件回调后
文档（div、网格等）中的任何对象都可以注册此自定义事件的侦听器
当事件被触发时，所有注册了监听事件的对象都会调用任何方法

我试过创建自定义事件（没问题）：

var eventFilterRefresh = document.createEvent("CustomEvent");
eventFilterRefresh.initEvent("onFilterCancel", true, true);

注册活动：

var dv = document.getElementById('myDiv');
dv.addEventListener('onFilterCancel', function (e) {
    alert();
}, false);

调度事件 - 这是问题所在。我不会在具体对象上调用 dispatchEvent。我想调用 generaly dispatchEvent 和所有已注册事件的对象 makes 方法：

var myDiv= document.getElementById('myDiv');
myDiv.dispatchEvent(eventFilterCancel);

谢谢。

Answer 1

无法从单个上下文触发事件，以便绑定到各种其他元素的侦听器会触发它。您需要使用相关侦听器从每个元素的上下文中触发事件。

最简单的方法是为所有具有事件侦听器的元素添加一个类似 class 名称的挂钩，然后使用该挂钩为每个元素分派事件。

//Add a hook when you register the listener
var dv = document.getElementById('myDiv');
dv.addEventListener('onFilterCancel', function (e) {
    alert();
}, false);
dv.className += " js-filter-cancel";

//Use the hook to fire the event for all listeners
var myDivs= document.querySelectorAll('.js-filter-cancel');

for(var i in myDivs) {
  if(!myDivs.hasOwnProperty(i))
    continue;
  
  myDivs[i].dispatchEvent(eventFilterCancel);
}

如何为 JavaScript 中的任何对象实现事件侦听器

How to implement event listener for any objects in JavaScript

javascript

jquery

events