Question

如何创建类似于ActionScript的自定义事件类？我的意思是，我可以用来发射我自己的事件，发送必要的数据。

我不想使用像YUI或jQuery这样的第三方库来实现它。我的目标是能够发送一个看起来像这样的事件。

document.addEventListener("customEvent", eventHandler, false);

function eventHandler(e){
    alert(e.para1);
}

document.dispatchEvent(new CustomEvent("customEvent", para1, para2));

请不要使用第三方图书馆解决方案。

Answer 1

对我有用的方法是调用document.createEvent（），初始化它并使用window.dispatchEvent（）调度它。

  var event = document.createEvent("Event");
  event.initEvent("customEvent", true, true);
  event.customData = getYourCustomData();
  window.dispatchEvent(event);

Answer 2

我在这里参加派对有点晚了，但是他正在寻找同样的事情。我并不热衷于第一个答案（上图），因为它依赖于文档来管理自定义事件。这很危险，因为它是全局的，并且如果该脚本巧合地依赖于同一个自定义事件，则可能与另一个脚本发生冲突。

我发现的最佳解决方案是： Nicholas C. Zakas - Custom Events in Javascript

不幸的是，由于javascript不支持继承关键字，因此原型设计有点混乱，但它确实使事情保持整洁。

Answer 3

使用DOM元素代理事件时，这很简单。

给出一个元素：

var element = document.querySelector('div#rocket');

让客户订阅：

element.addEventListener('liftoff', function(e)
{
    console.log('We have liftoff!');
});

然后发送/引发/触发事件，请使用以下代码：

element.dispatch(new Event('liftoff'));

Answer 4

这是John Resig：

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

更多信息来自http://ejohn.org/projects/flexible-javascript-events/的博客文章。

Answer 5

我只是考虑将支持的处理程序分配给新的命名空间，即对支持的事件的引用。下面的代码可以工作（将其粘贴到Chrome的控制台中），但您可以用更好的格式编写它，并且您应该有其他帮助方法（也可以重新定义自己），xBrowser支持以及嗅探支持类型（之后）你已经检测到了要使用的路径，你将自己重新定义这个功能。我希望下面的内容有所帮助。

var de = document.documentElement || document.getElementsByTagName[0];

function all(){ console.log('all') };

var customEventForSomeSpecificElement = function customEventForSomeSpecificElement() {
    return ({
            customEvent: function() {
                if ('onclick' in de ) {
                    return 'click';
                }
            },
            init: function(){ return this.customEvent(); }
        }).init();
}();

de.addEventListener(customEventForSomeSpecificElement, all, false);

Answer 6

实际上并不是那么难 - 没有太多的事件定义，只有三个版本。第一个是核心一个（addEventListener），然后是IE方式（attachEvent）然后是旧浏览器的兼容性方式（element.onevent = function）

所以完整的事件处理解决方案看起来像这样：

setEvent = function(element, eventName, handler){
  if('addEventListener' in element){
    //W3
    element.addEventListener(eventName,handler,false);
  }else if('attachEvent' in elm){
    //IE
    elm.attachEvent('on'+eventName,handler)
  }else{
    // compatibility
    elm['on'+eventName] = handler;
  }
}

并清除事件：

clearEvent = function(element, eventName, handler){
  if('removeEventListener' in element){
    //W3
    element.removeEventListener(eventName,handler,false);
  }else if('detachEvent' in elm){
    //IE
    elm.detachEvent('on'+eventName,handler)
  }else{
    // compatibility
    elm['on'+eventName] = null;
  }
}

和一个例子：

setEvent(document, "click", function(){alert('hello world!');});
clearEvent(document, "click", function(){alert('hello world!');});

这不是一个完整的例子，因为兼容性处理程序总是覆盖先前的事件（它不是附加动作，它被覆盖）所以你可能想检查一个处理程序是否已经设置然后将它保存到一些临时变量中并在事件处理函数中激活它。

如何在Javascript中创建自定义事件类？

6 个答案: