Question

我想使用此功能实现自定义事件：

创建自定义事件
文档中的任何对象（div，grid，...）都可以注册此自定义事件的侦听器
触发事件时，所有已注册侦听器事件的对象都会调用任何方法

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

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

注册活动：

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

派遣事件 - 这是问题所在。我不会在conrete对象上调用dispatchEvent。我想调用generaly dispatchEvent和所有已注册事件的对象生成方法：

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

感谢。

Answer 1

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

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

//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中的任何对象实现事件侦听器

1 个答案: