我們都知道，鼠標點擊click，觸屏的touch等事件，可以觸發相應的事件處理程序，也可以為這些事件添加事件處理程序，實際開發過程中可供我們使用的事件很少，click、doubleclick，mouseover、mousemove….等等這些。但當我們的程序越來越復雜的時候，光靠這些最底層的監聽似乎已近不能滿足我們的需求了。我們就需要我們自己去定義事件（其實就是我們寫的函數），尤其是組件開發過程中，用的尤為多。

既然是事件，就要有事件的特性。我們要能為這個事件添加監聽程序，這個事件觸發時，監聽程序也一定要觸發才行。原理跟底層的事件類似。只不過，需要我們自己處理這些。

比如我們寫了一個彈窗組件Box，他有彈出顯示的方法show，還有關閉的方法close等。

可能有確定按鈕、取消按鈕等操作。隨著產品或項目越復雜，被添加到這些確定或取消的操作也會越來越多。怎么辦？一種是最原始的監聽這些按鈕的click事件，然后的寫不同的回調。但是用回調的方式，有個弊端，當項目需求改變的時候，要往這個按鈕上再另加個回調的時候，就要改原先的代碼，要是以后再來一次，又要改。維護成本相當大。

我們不妨換個思路，把這個‘確定’或‘取消’想成像click這樣的事件，當‘確定‘這個事件發生時其相應的一系列事件都會發生。就可以很好的解決這個問題。

基本原理：事件隊列，即將監聽程序存到一個數組中，再自定函數執行時，將添加監聽數組中每個函數執行一遍。

定義一個對象專門用于存儲自定義事件，定義一個方法用于注冊監聽，還有一個方法需要我們主動觸發這個注冊的監聽程序(因為不像click等事件可以被瀏覽器監聽捕獲，瀏覽器無法識別我們自己定義的東西)。

代碼如下：

//定義一個Box類 function Box(){//other codethis.handlers = {};//存儲事件的對象 } Box.prototype = {constructor: Box,//顯示方法show: function (){//code//this.fire('show');},//關閉方法close: function (){//code//this.fire('close');},//監聽方法，模擬addEventListener,其中type為事件函數，handler為需要觸發的函數。addListener: function (type,handler){ if (typeof this.handlers[type] == 'undefined')this.handlers[type] = []; this.handlers[type].push(handler);//將要觸發的函數壓入事件函數命名的數組中},//手動觸發方法fire: function (type){if ( this.handlers[type] instanceof Array ){var handlers = this.handlers[type];//遍歷事件函數監聽的程序，依次執行for (var i=0;i<handlers.length;i++){handlers[i]();}}},//事件解綁removeListener: function (type,handler){if (!this.handlers[type]) return;var handlers = this.handlers[type];if (handler == undefined){handlers.length = 0;//不傳某個具體函數時，解綁所有}else if( handlers.length ){ for ( var i=0;i<handlers.length;i++ ){if ( handlers[i] == handler ){//解綁單個this.handlers[type].splice(i,1);}}}} }

剩下就是在需要的的時候添加注冊監聽了，比如

var box = new Box(); function listenShow1(){console.log(11); } function listenShow2(){console.log(22); } box.addListener('show',listenShow1); box.addListener('show',listenShow2); box.show();

當show方法執行，在外部或者show方法內部執行，這個可能根據實際具體項目或這具體情況來確定。

當然以上只是基本原理，可能沒有特別考慮更為復雜或具體的實際情況。比如解綁是只想解綁某一類，像jQuery那樣，在事件身上加命名空間，解綁該命名空間上的所有函數。但是自定義事件的基本原理就是如上描繪的那樣！

總結

以上是生活随笔為你收集整理的javascript自定义事件原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。