javascript - 如何为 JavaScript 中的任何对象实现事件监听器

Question

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

• 创建自定义事件
• ajax调度事件回调后
• 文档中的任何对象(div、grid、...)都可以注册此自定义事件的监听器
• 当事件被触发时，所有注册了监听器事件的对象调用任何方法

我试过创建自定义事件(没问题):

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

注册事件:

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

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

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

谢谢。

Answer 1

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

最简单的方法是为所有具有事件监听器的元素添加一个类似类名的钩子(Hook)，然后使用该钩子(Hook)为每个元素分派(dispatch)事件。

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