成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

javascript自定義事件原理

JowayYoung / 1658人閱讀

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

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

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

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

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

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

基本原理：事件隊列，即將監(jiān)聽程序存到一個數(shù)組中，再自定函數(shù)執(zhí)行時，將添加監(jiān)聽數(shù)組中每個函數(shù)執(zhí)行一遍。

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

代碼如下：

//定義一個Box類
function Box(){
    //other code
    this.handlers = {};//存儲事件的對象 
}
Box.prototype = {
    constructor: Box,
    //顯示方法
    show: function (){
        //code
        //this.fire("show");
    },
    //關(guān)閉方法
    close: function (){
         //code
        //this.fire("close");
    },
    //監(jiān)聽方法，模擬addEventListener,其中type為事件函數(shù)，handler為需要觸發(fā)的函數(shù)。
    addListener: function (type,handler){    
        if (typeof this.handlers[type] == "undefined")this.handlers[type] = []; 
        this.handlers[type].push(handler);//將要觸發(fā)的函數(shù)壓入事件函數(shù)命名的數(shù)組中
    },
    //手動觸發(fā)方法
    fire: function (type){
        if ( this.handlers[type] instanceof Array ){
            var handlers = this.handlers[type];
            //遍歷事件函數(shù)監(jiān)聽的程序，依次執(zhí)行
            for (var i=0;i

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


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


當(dāng)show方法執(zhí)行，在外部或者show方法內(nèi)部執(zhí)行，這個可能根據(jù)實際具體項目或這具體情況來確定。


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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82134.html

相關(guān)文章

  • javascript 事件代理，原理和問題

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

    SolomonXie 評論0 收藏0

  • Vue面試題精選：Vue原理以及雙向數(shù)據(jù)綁定的實戰(zhàn)過程

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

    malakashi 評論0 收藏0

  • 前端面試之Js篇

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

    anyway 評論0 收藏0

  • Javascript自定義事件

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

    Leck1e 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<