javascript 事件整理(粗略)

時間 2019-11-19

原文原文鏈接

javascript 事件整理javascript

因爲以前學習javascript時，只是看書並不作筆記，在編碼時也不什麼主意一些問題的總結，以至javascript的學習進度停滯不前，最近從新看了一次書，感受不少知識由於不經常使用竟陌生了許多。所以從新學習和粗略整理一下。ps：參考資料《javascript高級程序設計第三版》html

1、事件流java

事件流主要描述的是從頁面中接受事件的順序。可是IE和Netscape卻有兩種不一樣的事件流。瀏覽器

一、事件冒泡 dom

IE的事件流，概念：即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收，而後逐級向上傳播到較爲不具體的節點(文檔節點)；兼容性:全部的現代瀏覽器都支持事件冒泡，但具體實現上仍是有一點差異。IE九、Firefox、Chrome和Safari 則將事件一直冒泡到window對象，IE5.5及更早版本中的事件冒泡會跳過<html>元素（從<body>直接跳到document。）函數

二、事件捕獲學習

Nestcape的事件流，概念:不太具體的節點應該更早接受到事件，而最具體的節點應該最後接受到事件，目的是在事件到達預約目標以前捕獲它；兼容性：Netscape Communicator 惟一支持的事件流模型，但IE九、Safari、Chrome、Opera和Firefox目前也支持這種事件流。但少人用this

三、DOM事件流編碼

「DOM2級事件」規定的事件流包括三個階段:(1)事件捕獲階段，(2)處於目標階段，(3)事件冒泡階段；概念:首先發生的是事件捕獲，爲截獲事件提供了機會,而後是實際的目標接受到事件，最後一個階段是冒泡階段，能夠在這個階段對事件作出響應。總的來講綜合了前兩種事件流。兼容性:IE九、Opera、Firefox、Chrome、Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。spa

總結：事件冒泡兼容性好，放心使用。

2、事件處理程序

一、HTML事件處理程序。

特色：某個元素支持的每種事件，均可以使用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是可以執行的javascript代碼,事件處理程序中的代碼在執行時，有權訪問全局做用域中的任何代碼，也能夠訪問外部文件中的函數代碼。例子：

<input type="button" value="Click Me" onclick="alert('clicked')"/>

注意：特性中的javascript代碼能夠經過this 訪問當前元素的任何屬性，同時能夠直接經過event訪問事件，例如：

<input type="button" value="Click Me" onclick="function(){alert(this.id + '  '+ event.type);}">

缺點：（1）用戶在DOM節點結構未加載完時觸發事件，事件還沒有具有執行條件，會拋出錯誤（2）html和javascript耦合太緊，不利於管理和維護，建議避免使用。

二、DOM0級事件處理程序

特色：經過javascript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性（所有小寫，例如onclick），前提條件是必須取得一個要操做的對象的引用。優點：（1）簡單，（2）具備跨瀏覽器的優點。以這種方式添加的事件處理程序會在事件流冒泡階段被處理。

var btn = document.getElementById("myBtn");
btn.onclick = function (){
      alert(this.id);
}

注意:DOM0級事件處理程序中經過this能夠訪問元素的任何屬性和方法。

缺點：一個屬性只能指定賦值一個事件處理程序，若賦值多個，則被覆蓋，以最後的賦值爲標準。也能夠賦值爲null(則刪除以這種方式指定的事件處理程序)。

三、DOM2級事件處理程序

定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener()，而且它們都接受3個參數(1)要處理的事件名，(2)做爲事件處理程序的函數(3)一個布爾值（true表示在捕獲階段調用，false表示在冒泡階段調用）。全部DOM節點都有這兩個方法。

優勢：能夠添加多個事件處理程序。

var btn = document.getElement("myBtn");
btn.addEventListener("click",function(){ alert( this.id );},false);
btn.addEventListener("clcik",function(event){ alert(event.type);},false);

注意：這兩個事件處理函數會按照添加它們的順序觸發。同時若是在addEventListener()中使用到匿名函數做爲事件處理程序時，則沒法用removeEventListener()移除該事件處理程序，大多狀況下，都是將事件處理程序添加到事件流的冒泡階段，也即布爾值爲false；

兼容性：IE九、Firefox、Safari、Chrome和Opera支持DOM2級事件處理程序。

四、IE事件處理程序

IE中也定義了兩個方法：attachEvent()和detachEvent(),這兩個方法接受相同的兩個參數(1)「on」+事件處理程序名稱(2)事件處理程序函數 ;這兩個方法添加的事件處理程序都會被添加到冒泡階段。

優勢：能夠添加多個事件處理程序。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){ alert(this === window);});

注意：用attachEvent()添加的匿名函數將不能被移除，只要可以將對相同函數的引用傳給detachEvent()，就能夠移除相應的事件處理程序。

兼容性：支持IE事件處理程序的瀏覽器有IE和Opera。

3、事件對象

一、DOM中的事件對象

兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。不管指定事件處理程序時使用什麼方法(DOM0級或DOM2級)，都會傳入event對象。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
           alert(event.type);
};
btn.addEventListener("click",function(event){ alert(event.type); },false)

<input id=「btn」 type="button" value="Click Me" onclick="alert(event.type)"/>/*三種樣例的效果同樣*/

DOM中的event對象的屬性和方法以下：

屬性/方法類型說明

bubbles 布爾值代表事件是否冒泡

cancelable 布爾值代表是否能夠取消事件的默認行爲

currentTarget Element 其事件處理程序當前正在處理事件的那個元素

target Element 事件的目標

trusted 布爾值爲true表示是瀏覽器生成的，false是開發人員經過javascript建立的（DOM3級事件中新增）

type String 被觸發的事件的類型

view AbstractView 與事件關聯的抽象視圖。等同於發生事件的window對象

defaultPrevented 布爾值爲true則表示已經調用了preventDefault(); {DOM3級事件中新增}

detail Integer 與事件相關的細節信息

eventPhase Integer 調用事件處理程序的階段：1表示捕獲階段，2表示「處於目標」，3表示冒泡階段

preventDefault() Function 取消事件的默認行爲，若是cancelable的值爲true，則可使用這個方法

stopPropagation() Function 取消事件的進一步捕獲或冒泡。若是bubbles爲true,則可使用這個方法

stopImmediatePropagation() Function 取消事件的進一步捕獲或冒泡,同時阻止任何事件處理程序被調用(DOM3中新增)

【注意：以上屬性或方法都是隻讀。】

事件處理程序中的this、currentTarget與target的區別：

在事件處理程序中對象this始終等於currentTarget的值（也就事件處理程序所被指定的元素對象中），而target則只包括事件的實際目標（就是真實觸發的元素，目標元素）。

二、IE中的事件對象

與訪問DOM中的event對象不一樣，要訪問IE中的event對象有幾種不一樣的方式，取決於指定事件處理程序的方法。在使用DOM0級方法添加事件處理程序時，event對象做爲window對象的一個屬性存在。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
                   var event = window.event;
                   alert( event.type );
}

注意：若是事件處理程序是使用attachEvent()添加的，那麼就會有一個event對象做爲參數被傳入事件處理程序函數中。

var btn = document。getElementById("myBtn");
btn.attachEvent("onclick",function(event){alert(event.type);});

IE中的事件對象event的屬性或方法：

屬性或方法類型說明

type String 被觸發的事件類型

srcElement Element 事件目標（與dom中的target屬性同功能）

cancelBuble 布爾值默認值是false，但將其設置爲true就能夠取消事件冒泡，（與dom中的stopPropagation()相同）

returnValue 布爾值默認值爲true，但將其設置爲false就能夠取消事件的默認行爲（與dom中的preventDefault()相同）

【 type,srcElement屬性爲只讀，其餘兩個爲讀/寫】

4、跨瀏覽器的事件處理程序（綜合）

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( event.detachEvent)
                                          element.detachEvent("on"+type,handler);
                                else
                                       element["on"+type] =null;
                               },
        getEvent: function( event ){
                              return event ? event : window.event;
                       },
        getTarget: function( event ){
                               return event.target || event.srcElement;
                       },
        preventDefault: function( event ){
                                if( event.preventDefault )
                                      event.preventDefault();
                                else
                                      event.returnValue = false;
                       },
         stopPropagation: function( event ){
                                 if( event.stopPropagation )
                                          event.stopPropagation();
                                 else
                                          event.cancelBubble = true;
                       }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。