如何在Javascript中創建自定義事件類？

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 - 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

我只想考慮將支持的處理程序分配給新的命名空間，即對支持的事件的引用。 下面的代碼可以工作（將其粘貼到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 5

這是由約翰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 6

實際上並不是那么難 - 沒有那么多的事件定義，只有三個版本。 第一個是corect one（ 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!');});

這不是一個完整的例子，因為兼容性處理程序總是覆蓋以前的事件（它不會附加動作，它會被覆蓋）所以你可能想檢查一個處理程序是否已經設置然后將它保存到一些臨時變量並激活它在事件處理函數內部。