3種事件模型：

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計、聊城網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

   原始事件模型

   DOM事件模型

   IE事件模型

原始事件模型（0級事件模型）

    1、事件處理程序被定義為函數(shù)實例，然后綁定到DOM元素事件對象上，實現(xiàn)事件的注冊。

       例子：var btn = document.getElementsByTagName("input")[0];

             btn.onclick = function(){

               函數(shù)體....

             }

    2、也可以把特定的事件處理函數(shù)的函數(shù)體直接賦給DOM元素的事件屬性

       例子：<input type="button" onclick="alert('hello')"

    

    0級事件模型的優(yōu)缺點：

       優(yōu)點：使用方便

       缺點：元素屬性被用來存儲事件處理函數(shù)的引用，

             所以每個元素的每個事件只能注冊一個事件處理程序。

DOM事件模型：

    1、注冊事件

       addEventListener(）方法：

         語法：addEventListener("type",function,useCapture)

         參數(shù)：type：是要綁定的事件類型，但是這里沒有“on”前綴。

                     如onclick事件應(yīng)寫作：click

               function：事件處理函數(shù)，自帶一個默認(rèn)參數(shù)，引用event對象

               usrCapture：是一個布爾值，

                           為true時：在事件傳播的捕捉階段觸發(fā)響應(yīng)；

                           為false時：在事件傳播的冒泡階段觸發(fā)響應(yīng)

     

        例子：var btn = document.getElementsByTagName("input")[0];

      btn.addEventListener("click",function(){

     btn.value = event.type;

         },true)

    

     2、事件傳播

        DOM 2級事件模型中，一旦事件被觸發(fā)，事件流首先從DOM樹的頂部（文檔節(jié)點#document）向下傳播，直到目標(biāo)節(jié)點，然后再從目標(biāo)節(jié)點向上傳播到DOM樹頂。

        從上到下的過程被稱為捕獲階段，

        從下到上的過程被稱為冒泡階段。

        終止事件流的冒泡：stopPropagegation()方法

        例子：var btn = document.getElementsByTagName("input")[0];

        do{

  btn.addEventListener("click",function(){

  div.innerHTML += " "+this.nodeName+" ";

  },true)

  btn = btn.parentNode;

 }while(btn);

             

             上例中，第三個參數(shù)設(shè)置為true，注冊的是捕獲型事件。

                     所以點擊按鈕，事件觸發(fā)順序為：#document->html->body->button

               如果，第三個參數(shù)設(shè)置為false，注冊的是冒泡型事件。

                     所以點擊按鈕，事件的觸發(fā)順序為：button->body->html->#document

    3、銷毀事件

           removeEventListener()方法：

           注意：removeEventListener（）和addEventListener()的第三個參數(shù)要保持一致

                 否則銷毀操作是無效的。

IE事件模型：

    1、注冊事件：

           attachEvent()方法：

              語法：attachEvent("type",function)

              參數(shù)：type：元素事件類型，如：onclick

                    function：事件處理函數(shù)

       注意：IE時間模型中，事件處理函數(shù)中的this指針總是指向window對象，

             0型事件模型中，事件處理函數(shù)中的this指針總是指向當(dāng)前注冊事件的對象

   2、事件傳播：

          IE事件模型：事件流總是從目標(biāo)對象向上傳遞知道樹頂，即冒泡型。

          終止事件流的冒泡：設(shè)置event對象的cancelBubble屬性

   3、注銷事件：

          detachEvent()方法

事件處理機(jī)制：

    Event對象：

       當(dāng)觸發(fā)事件時，瀏覽器會自動創(chuàng)建一個event對象，

                     event對象實際上是Event類型的實例，

                     默認(rèn)狀態(tài)下他會被作為參數(shù)傳遞給事件處理函數(shù)

       實現(xiàn)訪問的兼容性：

           var event = event||window.event；

       注意：IE和DOM標(biāo)準(zhǔn)瀏覽器返回的event對象的屬性和方法存在差異?。?！

網(wǎng)頁名稱：jQuery學(xué)習(xí)---------認(rèn)識事件處理
文章分享：http://aaarwkj.com/article36/jeejsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、定制開發(fā)、微信公眾號、App設(shè)計、全網(wǎng)營銷推廣、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)