事件詳解

1、給一個對象綁定一個事件處理函數的形式

    一、給一個對象綁定一個事件處理函數的第一種形式：

       (1) 將一個函數賦值給一個事件處理程序屬性，首先要取得一個要操做的對象的引用（obj）:

            obj.onclick = fn;

       (2) 當給一個對象的同一個事件綁定多個函數時：（後者會覆蓋前者）

             function fn1(){
                alert(1);
             }
             function fn2(){
                alert(2);
             }

             document.onclick = fn1;

             document.onclick = fn2;  // 會覆蓋前面綁定的fn1

       (3) 事件綁定形式的取消:

            obj.onclick = null;

    二、給一個對象的同一個事件綁定多個不一樣的函數，就要用到第二種形式：
       給一個對象綁定一個事件處理函數的第二種形式是存在兼容問題的：

       (1) ie : obj.attachEvent(事件名稱,事件函數)

                一、沒有捕獲

                二、事件名稱有on

                三、事件函數執行的順序：標準ie下-->正序；非標準ie下-->倒序

                四、this指向window

                  解決方法：能夠用函數下的一個方法call改變函數執行過程當中的內部this的指向

                    document.attachEvent('onclick',function (){
                        fn1.call(document);   // call方法第一個參數能夠改變函數執行過程當中的內部的this的指向，第二個參數開始就是原來函數的參數列表

　　　　　　　　　　　　　　　　　　　　// fn1() ==> fn1.call();

                    });

                五、經過attachEvent()添加的事件處理函數都會被添加到冒泡階段

                六、ie下事件綁定形式的取消

                    obj.detachEvent(事件名稱,事件函數)

                七、匿名函數沒法去除

       (2) 標準 : obj.addEventLister(事件名稱,事件函數,是否捕獲)

                一、有捕獲

　　　　　　　是否捕獲：默認是false
                                  false ：冒泡
                                  true ：捕獲

                二、事件名稱沒有on

                三、事件執行的順序是正序的

                四、this指向觸發該事件的對象

                五、標準下事件綁定形式的取消

                    obj.removeEventListener(事件名稱,事件函數,是否捕獲)

                六、經過addEventLister()添加的匿名函數沒法去除

                七、給一個對象document的同一個事件click綁定兩個函數fn1和fn2:

                    document.addEventListener('click',fn1,false);

                    document.addEventListener('click',fn2,false);

 

2、event對象

    一、event : 事件對象，當一個事件發生的時候，和當前這個對象發生的這個事件有關的一些詳細的信息都會被臨時保存到一個指定地方- event對象，供咱們在須要的時候調用

    二、事件函數：事件調用的函數，一個函數是否是事件函數，不在定義的時候決定，而是取決於這個函數調用的時候

　 三、事件函數綁定：把一個函數賦值給某個事件，讓他們之間產生關聯，當這個事件發生的時候執行這個函數，咱們稱之爲事件函數綁定

    注：事件對象(event)必須在一個事件調用的函數裏面使用纔有內容

    四、 兼容：

        (1) ie/chrome : event是一個內置全局對象；

         　　元素.事件 = function (){
              　　  alert(event);     // 在ie和chrome是兼容的
       　　  }

        (2) 標準下：事件對象是經過事件函數的第一個參數傳入。若是一個函數是被事件調用的，那麼這個函數定義的第一個參數就是事件對象

　　        元素.事件 = function (ev){
     　　           alert(ev);     // 非標準下，返回的是undefined
     　　           alert(ev.clientX);   // clientX[Y]: 當一個事件發生的時候，鼠標到頁面可視區的距離 ( X是X軸，Y是Y軸 )
  　　      }

    五、解決兼容問題：

       　　 元素.事件 = function (ev){    // 傳入第一個參數 ev
       　　     var ev = ev || event;     // 用邏輯或來作判斷
      　　      alert(ev);                // 兼容問題解決
　　        }

 

3、焦點事件：

    一、焦點：使瀏覽器可以區分用戶輸入的對象，當一個元素有焦點的時候，那麼他就能夠接收用戶的輸入。

         咱們能夠經過一些方式給元素設置焦點：
         一、點擊
         二、tab鍵
         三、js

    注：不是全部的元素都可以接收焦點，可以響應用戶操做的元素纔有焦點

    二、onfocus: 當元素獲取到焦點的時候觸發
         onblur: 當元素失去焦點的時候觸發

    三、方法：

        obj.focus();   給指定的元素設置焦點；

        obj.blur();    取消指定元素的焦點；

        obj.select();  選擇指定元素裏面的文本內容（可以選中的內容只能是用戶可以輸入的內容）

 

4、鍵盤事件：

    注：不是全部元素都可以接受鍵盤事件的，可以接受焦點的元素就可以接受鍵盤事件

    一、onkeydown : 當鍵盤按鍵按下的時候觸發。　若是按下不擡起，那麼會連續觸發

         onkeyup : 當鍵盤按鍵擡起的時候觸發

    二、跟鍵盤事件有關的event下的屬性：

        event.keyCode : 數字類型  鍵盤按鍵的值（咱們稱之爲鍵值）
                   　　        每個按鍵都有不一樣的值，相同功能的鍵值是同樣的

        ctrlKey,shiftKey,altKey  返回值：布爾值
             　　　　　　   當一個事件發生的時候，若是ctrl || shift || alt 是按下的狀態，返回true，不然返回false

 

5、事件流  （事件流描述的是：從頁面中接收事件的順序）

    一、事件冒泡

       (1) 概念：即事件開始時由具體的元素（文檔中嵌套層最深的那個節點）接收，而後逐級向上傳播到較爲不具體的節點（文檔）。

       (2) 事件冒泡機制：當一個元素接收到事件的時候，會把他接收到的全部傳播給他的父級，一直到頂層window，這種機制稱之爲事件冒泡機制

       (3) 阻止冒泡：當前要阻止冒泡的事件函數中調用 event.cancelBubble = true;

    二、事件捕獲

       (1) 概念：事件捕獲的思想是不太具體的節點應該最先接收到事件，而具體的節點應該最後接收到事件。

       (2) 事件捕獲的用意在於 在事件到達預約目標以前捕獲它

    三、事件流的三個階段：事件捕獲階段、處於目標階段、事件冒泡階段

        過程：首先發生的是事件捕獲，爲截獲事件提供了機會；而後是實際的目標接收到事件；最後是冒泡階段，能夠在這個階段對事件作出響應

        注：實際的目標在捕獲階段不會接收事件；

              冒泡階段方法，事件又傳播迴文檔

    四、同時取消事件捕獲和冒泡：event.stopPropagatioin();

 

6、設置全局捕獲

    一、 定義：當咱們給一個元素設置全局捕獲之後，那麼這個元素就會監聽後續發生的全部事件，當有事件發生的時候，就會被當前設置了全局捕獲的元素所觸發

    二、 格式：元素.setCapture()

    三、 釋放全局捕獲：元素.releaseCapture()

    四、 setCapture()兼容問題：
           a : ie : 有這個方法，而且有效果;
           b : ff : 有這個方法，可是沒有效果;
           c ：chrome : 沒有這個方法，瀏覽器會報錯;

 

7、事件默認行爲

    一、當一個事件發生的時候，瀏覽器本身會默認作的事情。好比：

        oncontextmenu : 右鍵菜單事件，當右鍵菜單（環境菜單）顯示出來的時候觸發

    二、如何阻止事件默認行爲？

        當前這個行爲是什麼事件觸發的，而後在這個事件的處理函數中使用：

            return false；           （非標準下）
            event.preventDefault();  （標準下）

 

8、內存與性能

    一、在使用事件時，存在的問題：

      (1) 每一個函數都是對象，都會佔用內存，內存中的對象越多，性能就越差。所以，事件處理程序的數量直接關係到頁面的總體運行性能。

      (2) 每當事件處理程序指定給元素時，運行中的瀏覽器代碼與支持頁面交互的javaScript代碼之間就會創建一個鏈接，鏈接越多，執行起來就越慢

    二、解決其問題：

      (1) 採用事件委託技術：事件委託是利用事件冒泡，只指定一個事件處理函數，就可管理某一類型的全部事件，從而限制頁面中事件處理程序的數量。（全部用到按鈕、鼠標和鍵盤事件的，都適合採用事件委託技術）

      (2) 移除事件處理程序：

           方法一：obj.事件 = null;   // 移除事件處理程序           方法二：在頁面卸載以前，先經過onunload事件處理程序移除全部事件處理程序。（onunload事件：在文檔徹底卸載後觸發）