JS 的事件基礎、事件偵聽與拋發、


前言

JavaScript是一種事件驅動型語言。事件驅動是指JavaScript引擎並不是在看到代碼之后就會立即執行,而是會在合適的時間才去執行。這個合適的時間是指當某個事件發生之后(例如一個輸入框的內容發生了變化,這就是一個事件)。只有當相應的事件發生了之后,相應的操作才會執行,這就是事件驅動。

事件驅動包含三個關鍵內容:事件、事主和處理方法。

理解了事件模型,我們就能明白JavaScript中的代碼雖然是用於描述怎么操作對象的,但是並不一定要立即操作對象。

事件基礎、事件偵聽與拋發

js事件分為系統事件和自定義派發事件。

IE8以上支持

  • DOM.addEventListener(事件類型,事件回調函數);

    事件偵聽方法,僅用於僅用於EventTarget對象,給DOM元素添加一個事件偵聽(監聽),只能收到對應事件類型的消息,當收到這個消息。就執行事件回調函數。


    //這里click這個消息就是系統消息,clickHandler,就是這個系統消息收到后,執行的事件回調函數。
     document.addEventListener("cilck",clickHandler);
    /**
        事件回調函數
        e 有且僅有一個參數e
        e 是一個事件對象,偵聽事件收到的消息時獲得的事件對象
    */
    function clickHandler(e){
        console.log(e);
    } 
  • EventTarget.dispatchEvent(事件對象);

    拋發事件方法,派發事件,僅用於EventTarget對象

    //這里的“myClick”,就是自定義事件類型,是事件傳輸的“暗號”。
    document.addEventListener("myClick",myClickHandler);
    
    var evt = new Event("myClick");//創建一個事件對象
    evt.a=10;
    document.dispatchEvent(evt);//向document拋發新建的event事件,拋發事件關鍵是將新建事件的參數傳輸出來
    

    function myClickHandler(e){
         console.log(e===evt);//true
         console.log(e.a);//10,接收到了派發事件對象的參數
    }

總結

  1. 事件必須先偵聽后拋發。
  2. 偵聽和派發的對象是同一個。
  3. 偵聽和派發的事件類型完全相同。其實事件類型就是一個任意字符串
  4. 系統派發的事件字符串是固定的,自定義派發的事件,字符串可以任意
  5. 事件偵聽回調函數,不能傳參,因此事件回調函數中有且僅有一個參數,這個參數即為事件對象
  6. 事件都可以手動派發,手動派發的話,頁面加載完后就會執行

案例

對象間數據傳遞, 打算執行obj2.c 將局部變量5傳遞給obj1的方法b中
要求:使程序模塊的可重用性、移植性大大增強。一個好的內聚模塊應當恰好做一件事。
obj1 和 obj2 互相調用,但是不相互影響,刪除任意一個函數后,也不會報錯。

// 高內聚低耦合
    var obj1={
        a:function(){
           // this  對象的方法中this就是該對象自身,這里this就是obj1
           document.addEventListener("aaa",this.b);
        },
        b:function(e){
           // 傳到這里
            console.log(e.s);//5
            }
        }

    var obj2={
        v:10,
        c:function(){
            var s=5;
            var evt=new Event("aaa");
            evt.s=s;
            document.dispatchEvent(evt);
         },
        d:function(){
             //......
        }

    }


        obj1.a();//注冊事件
        obj2.c();//創建事件,並且把這個事件拋發出去


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM