jQuery學習---------認識事件處理

3種事件模型：

   原始事件模型

   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事件應寫作：click

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

               usrCapture：是一個布爾值，

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

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

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

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

     btn.value = event.type;

          },true)

     2、事件傳播

        DOM 2級事件模型中，一旦事件被觸發(fā)，事件流首先從DOM樹的頂部（文檔節(jié)點#document）向下傳播，直到目標節(jié)點，然后再從目標節(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ù)設置為true，注冊的是捕獲型事件。

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

               如果，第三個參數(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指針總是指向當前注冊事件的對象

   2、事件傳播：

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

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

   3、注銷事件：

          detachEvent()方法

事件處理機制：

    Event對象：

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

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

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

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

           var event = event||window.event；

       注意：IE和DOM標準瀏覽器返回的event對象的屬性和方法存在差異！?。?/p>