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

How to implement event listener for any objects in JavaScript

本文关键字：对象 实现 事件 侦听器 任何 JavaScript      更新时间：2024-06-04

我想用以下功能实现自定义事件：

  • 创建自定义事件
  • 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);

调度事件-出现问题。我不会对conrete对象调用dispatchEvent。我想要调用generaly dispatchEvent和所有注册了event-make方法的对象：

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

谢谢。

没有办法从单个上下文中激发事件，这样绑定到各种其他元素的侦听器就会触发它。您需要从每个元素的上下文中激发具有相关侦听器的事件。

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

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

相关文章：