javascript自定義事件原理

JowayYoung 發布于2019-08-20 15:17 / 1650人閱讀

摘要：我們就需要我們自己去定義事件其實就是我們寫的函數，尤其是組件開發過程中，用的尤為多。可能有確定按鈕取消按鈕等操作。但是自定義事件的基本原理就是如上描繪的那樣

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

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

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

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

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

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

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

代碼如下：

//定義一個Box類
function Box(){
    //other code
    this.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
剩下就是在需要的的時候添加注冊監聽了，比如
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那樣，在事件身上加命名空間，解綁該命名空間上的所有函數。但是自定義事件的基本原理就是如上描繪的那樣！

GPU云服務器云服務器自定義事件 js 自定義觸發事件自定義自相關算法原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82134.html

javascript 事件代理，原理和問題

摘要：可以用于事件處理函數中阻止冒泡行為。事件代理的原理和問題在我們了解了事件流之后，事件代理的原理就很好理解了，其實就是事件冒泡會觸發容器的相關事件并執行監聽函數。給注銷事件綁定。如果此事件正在執行，會立即停止。有如下 html 片段 11111111111 22222222222 33333333333 要對 li 添加 click 事件。通常做法： var...

SolomonXie 2019-08-19 18:35 評論0 收藏0
Vue面試題精選：Vue原理以及雙向數據綁定的實戰過程

摘要：雙向數據綁定指的是，將對象屬性變化與視圖的變化相互綁定。數據雙向綁定已經了解到是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過來實現對屬性的劫持，達到監聽數據變動的目的。和允許觀察數據的更改并觸發更新。 1 MVVM 雙向數據綁定指的是，將對象屬性變化與視圖的變化相互綁定。換句話說，如果有一個擁有name屬性的user對象，與元素的內容綁定，當給user.name賦予一個新...

malakashi 2019-08-02 16:10 評論0 收藏0
前端面試之Js篇

摘要：作為構造函數使用，綁定到新創建的對象。內部實現類和類的繼承構造函數構造函數調用父類構造函數參考請盡可能詳盡的解釋的工作原理的原理簡單來說通過對象來向服務器發異步請求，從服務器獲得數據，然后用來操作而更新頁面。 1 . 請解釋事件代理 (event delegation) 當需要對很多元素添加事件的時，可以通過將事件添加到它們的父節點通過委托來觸發處理函數。其中利用到了瀏覽器的事件冒泡機...

anyway 2019-08-20 17:03 評論0 收藏0
Javascript自定義事件

摘要：事件定義事件是與交互的最常見的方式但它也可以用于非代碼中通過實現自定義事件實現自定義事件的原理是創建一個管理事件的對象如下代碼是事件的定義存儲事件處理程序由個鍵值對組成鍵表示事件名值是一個由事件處理程序組成的數組添加事件觸發事件將傳遞給事件定義事件是與DOM交互的最常見的方式,但它也可以用于非DOM代碼中--通過實現自定義事件.實現自定義事件的原理是創建一個管理事件的對象.如下代碼...

Leck1e 2019-08-21 10:40 評論0 收藏0