擴展Node.addEventListener方法具有相同的名稱

我試圖延長Node.addEventListener方法，所以我可以做一些活動的管理，如：擴展Node.addEventListener方法具有相同的名稱

Node.prototype.on = function (type, listener, useCapture) { 
    'use strict'; 
    var i, evt; 

    this.events = this.events || []; 


    for (i = 0; i < this.events.length; i += 1) { 

     evt = this.events[i]; 

     if (this === evt[0] && type === evt[1]) { 
      this.removeEventListener(type, evt[2], evt[3]); 
      this.events.splice(i, 1); 
     } 

    } 

    this.events.push([this, type, listener, useCapture]); 

    return this.addEventListener(type, listener, useCapture); 
};

但在這種情況下，而不是將其命名爲on我想把它命名爲addEventListener，所以我可以保證任何JavaScript都可以使用它。

所以這裏的重點是，如果我將函數命名爲addEventListener而不是返回子句，它將導致無限循環。所以我在想如果有什麼辦法可以調用super方法呢？

在此先感謝

來源

2011-08-28 zanona

在繼續之前，請閱讀[擴展DOM有什麼問題]（http://perfectionkills.com/whats-wrong-with-extending-the-dom）。 –

感謝Felix的提示，其實我知道這篇文章，但是因爲這只是在非常封閉和私密的環境下運行，所以我認爲它對我的情況不會有問題。但再次感謝您向我展示這一點。 :) – zanona

好吧:)文章還提到，這可能是在封閉的環境中這樣做，只是想確保你知道這一點;） –

，首先讓我再次指出（其他讀者），即extending the DOM is a bad idea in general。

這就是說，這裏是你可以做，如果環境允許您：

你可以保持參照原addEventListener功能，並與.call調用它。
這僅addEventListener暴露了這種方法的工作原理（即像一個本地JavaScript函數），你實際上可以覆蓋addEventListener：

// immediate function to create scope 
(function() { 
    // keep a reference to the original method 
    var orig_addEventListener = Element.prototype.addEventListener; 

    Element.prototype.addEventListener = function (type, listener, useCapture) { 
     // your code here 
     //... 
     // call the original method 
     return orig_addEventListener.call(this, type, listener, useCapture); 
    }; 

}());

注意addEventListener是Element接口，而不是Node接口的方法。

再次說明：這並不保證能夠正常工作，即使它現在有效，它也可能在未來破裂。

來源

2011-08-28 11:23:58

非常感謝你的幫助菲利克斯，它工作得很漂亮確實... – zanona

擴展Node.addEventListener方法具有相同的名稱

回答

相關問題