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

3種事件模型：

   原始事件模型

   DOM事件模型

   IE事件模型

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

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

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

             btn.onclick = function(){

               函數體....

             }

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

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

    0級事件模型的優缺點：

       優點：使用方便

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

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

DOM事件模型：

    1、注冊事件

       addEventListener(）方法：

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

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

                     如onclick事件應寫作：click

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

               usrCapture：是一個布爾值，

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

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

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

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

     btn.value = event.type;

          },true)

     2、事件傳播

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

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

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

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

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

        do{

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

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

  },true)

  btn = btn.parentNode;

  }while(btn);

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

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

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

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

    3、銷毀事件

           removeEventListener()方法：

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

                 否則銷毀操作是無效的。

IE事件模型：

    1、注冊事件：

           attachEvent()方法：

              語法：attachEvent("type",function)

              參數：type：元素事件類型，如：onclick

                    function：事件處理函數

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

             0型事件模型中，事件處理函數中的this指針總是指向當前注冊事件的對象

   2、事件傳播：

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

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

   3、注銷事件：

          detachEvent()方法

事件處理機制：

    Event對象：

       當觸發事件時，瀏覽器會自動創建一個event對象，

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

                     默認狀態下他會被作為參數傳遞給事件處理函數

       實現訪問的兼容性：

           var event = event||window.event；

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