JS-13章-事件

淺淺一諾發表於2019-03-26
JS事件
  • 1.事件流

概念：從頁面中接收事件的順序

過程：'DOM2級事件'規定的事件流包括三個階段：事件捕獲階段、處於目標事件、事件冒泡階段；'DOM2級事件'
     規定捕獲階段不會涉及事件目標，但是在IE9、safari、chrome、firefox、opera 9.5等更高版本都會在
     捕獲階段觸發事件物件上的事件。
複製程式碼

  • 2.事件處理程式

概念：響應某個事件的函式就叫事件處理程式(或事件偵聽器)；事件處理程式的名字以'on'開頭；

事件新增處理程式的方式：
    1.在 HTML 中指定事件處理程式
        該方式有三個缺點：1：首先、存在一個時差問題；使用try(函式名())catch(ex){}
                        2:其次：這樣擴充套件事件處理程式的作用域鏈在不同瀏覽器中會導致不同的結果
                        3.最後：HTML與javascript程式碼緊密耦合
    2.DOM0級事件處理程式
        概念：就是將一個函式賦值給一個事件處理程式屬性；
        相容性：所有現代瀏覽器都支援；原因：一是簡單、二是具有跨瀏覽器優勢;
        處理階段：事件流的冒泡階段被處理、this表示引用的當前元素;
        清除：將事件處理程式設定為null;
    3.DOM2級事件處理程式
        方法：addEventListenter(事件名,事件處理程式函式,布林值-是否要在捕獲階段呼叫事件處理程式)
              removeEventListenter(要求引數相同);
        相容性：IE9、chrome、firefox、safari、opera
        注意：可以新增多個事件處理程式、按由上到下的順序執行；this表示引用的當前元素
    4.IE事件處理程式
        方法：attachEvent(事件處理程式名-on + 事件名，事件處理程式函式)、detachEvent(引數相同)；
        相容性：IE和opera
        處理階段：冒泡階段
        注意：可以新增多個事件處理程式、按由下到上的順序執行；this表示window
    5.跨瀏覽器事件處理程式
        var EventUtil = {
                addHandler:function(element, type, handler){
                    if(element.addEventListener){
                        element.addEventListener(type, handler, false);
                    }else if(element.attachEvent){
                        element.attachEvent('on' + type, handler);
                    }else{
                        element['on' + type] = handler;
                    }
                },
                removeHandler:function(element, type, handler){複製程式碼
                    if(element.removeEventListener){複製程式碼
                        element.removeEventListener(type, handler, false);
                    }else if(element.datachEvent){
                        element.datachEvent('on' + type, handler);
                    }else{
                        element['on' + type] = null;
複製程式碼
                    }          
                }
            }
        注意：addHandler()和removeHandler沒有考慮到所有瀏覽器的相容問題，例如IE中的作用域問題
     
        
複製程式碼


相關文章