JS事件及其兼容用法

時間 2020-03-29

標籤事件及其兼容用法欄目 JavaScript 简体版

原文原文鏈接

JavaScript與HTML之間的交互是經過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。瀏覽器

　　一、事件流：描述的是從頁面中接收事件的順序。框架

　　IE提出的事件冒泡流：事件開始由最具體的元素接收，而後向上傳播到較爲不具體的節點。編輯器

　　Nerscape提出的事件捕獲流：由最不具體的元素逐漸傳播到最具體的節點。ide

　　DOM2級事件規定了事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲，爲截獲事件提供了機會。而後實際的目標接收到事件。最後一個階段是冒泡階段，能夠在這個階段對事件作出響應。函數

　　二、事件處理程序：響應事件的函數。名字通常以「on」開頭，如onclick、onload、onmouseover... 添加事件處理程序有3種方法：HTML事件處理程序、DOM0級事件處理程序、DOM2級事件處理程序.編碼

　　HTML事件處理程序：某個元素支持某種事件，均可以使用一個與相應事件處理程序同名的HTML特性來指定。指針

例如： <input type = "button" value = "Click" onclick = "alert('Click')" /> ,因爲這個值是JavaScript，所以不能在其中使用未轉義的HTML語法字符，例如&、「」、<、>。若要使用引號，能夠這麼來用： <input type = "button" value = "Click" onclick = "alert("Click")" /> code

　　DOM0級事件處理程序：將一個函數賦值給一個事件處理程序。例如：對象

1 var btn = document.getElementById("myBtn");2 btn.onclick = function(){3     alert("Click");4 };

同時，也能夠刪除DOM0級方法指定的事件處理程序，只要設置爲null便可： btn.onclick = null; //刪除DOM0級事件處理程序 seo

　　DOM2級事件處理程序：「DOM2級事件」定義了倆個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener()，接收3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值，布爾值若是爲true，表示在捕獲階段調用事件處理函數；若是是false(默認)，在冒泡階段調用。同時，IE有本身「獨特」的事件處理程序去替代這倆個方法：attachEvent()和detachEvent().這樣一來，咱們就得苦逼的想着如何兼容倆者了，經常使用的作法以下：

 1 var eventUtil={ //type事件不加on！ 2            //添加句柄 3           addHandle:function (element,type,handler){ 4                  if(element.addEventListener){ 5                       element.addEventListener(type,handler,false); 6                  }else if(element.attachEvent){ 7                       element.attachEvent("on"+type,handler); 8                  }else{ 9                       element["on"+type].handler;10                  }11            }12             //刪除句柄---匿名函數不能被移除13           removeHandle:function (element,type,handler){14                  if(element.removeEventListener){15                       element.removeEventListener(type,handler,false);16                  }else if(element.detachEvent){17                       element.detachEvent("on"+type,handler);18                  }else{19                       element["on"+type]=null;20                  } 
21           }22 }     
23 24 eventUtil.addHandle(oBtn,'click',show);    //調用方法

　　三、事件對象：在觸發DOM上的某個事件時，會產生一個事件對象event，這個對象包含着全部與事件有關的信息。包括致使事件的元素、事件的類型以及其餘與特定事件相關的信息。

事件對象的獲取和屬性方面，IE有顯得那麼「特殊」。所以，咱們到處要想着兼容它。有關事件對象和對象屬性，經常使用的兼容方法以下：

 1 var eventUtil={   
 2             //獲取事件對象 3            getEvent : function (event){ 4                         return event ? event : window.event; 5            } 6            //獲取事件目標      7            getElement : function(event){  //傳入獲取到的事件對象  8                  return event.target || event.srcElement; 9            }10              //阻止事件冒泡11            stopPropagation:function(event){   //傳入獲取到的事件對象 12                   if(event.stopPropagation){13                         event.stopPropagation;14                   }else{15                          event.cancelBubble=true;16                   }17             }18              //阻止默認行爲19             preventDefault:function(event){   //傳入獲取到的事件對象 20                  if(event.preventDefault){21                         event.preventDefault;22                  }else{23                         event.returnValue=false;24                  } 
25            }26 }

具體用法：

use

　　四、事件類型：Web瀏覽器中可能發生的事情有不少類型，不一樣的事件類型具備不一樣的信息。「DOM3級事件」規定了如下幾類屬性：

UI（User Interface，用戶界面）事件，當用戶與頁面上的元素交互時觸發；

焦點事件，當元素獲取或失去焦點時觸發；

鼠標事件，當用戶經過鼠標在頁面上執行操做時觸發；

滾輪事件，當使用滾輪（或相似設備）時觸發；

文本事件，當在文檔中輸入文本時觸發；

鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發；

合成事件，當爲IME（Input Method Editor，輸入法編輯器）輸入字符時觸發；

變更（mutation）事件，當底層DOM結構發生變化時觸發；

變更名稱事件，當元素或屬性名變更時觸發。此類事件已被廢棄。

4.1 UI事件：指的是那些不必定與用戶操做有關的事件。這些事件在DOM規範出現以前，都是以這種形式存在的，現有的UI事件以下：

load：當頁面徹底加載後再window上觸發。

unload：當頁面徹底卸載後再window上觸發。

error：當發生JavaScript錯誤時在window上面觸發。

select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發。即複製開始時觸發。

resize：當窗口或框架的大小變化在window或框架上觸發。

scroll：但用戶滾動條的元素中內容時，在該元素上面觸發。<body>元素中包含所加載頁面的滾動條。

4.2 焦點事件：焦點事件會在頁面元素得到或失去焦點時觸發。

blur：在元素失去焦點時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

focus：在元素得到時觸發。這個事件不會冒泡；全部瀏覽器都支持它。

focusout：與blur等價。

focusin：與focus等價，但它冒泡。

DOMFocusIn：在元素得到焦點時觸發。這個事件和focus等價，但它冒泡。只有Opera支持，且在DOM3級事件廢除了，選擇了focusin。

DOMFocusOut：在元素失去焦點時觸發。這個事件是blur的通用版本。只有Opera支持。DOM3級事件廢除了，選擇了focusout。

4.3 鼠標與滾輪事件

click：在用戶單擊主鼠標按鈕或按下回車鍵時觸發。

dblclick：在用戶雙擊主鼠標時觸發。

mousedown：在用戶按下了任意鼠標按鈕時觸發。不能經過鍵盤觸發這個事件。

mouseup：在用戶釋放鼠標按鈕時觸發。不能經過鍵盤觸發這個事件。

mouseout：在鼠標指針位於一個元素上方，而後用戶將其移入另外一個元素時觸發。又移入的另外一個元素可能位於前一個元素的外部，也多是這個元素的子元素。不能經過鍵盤事件觸發。

mouseover：在鼠標指針位於一個元素外部，而後用戶將其首次移入另外一個元素邊界以內時觸發。不能經過鍵盤事件觸發這個事件。

mouseenter：在鼠標光標從元素外部首次移動到元素範圍以內觸發。這個事件不冒泡，並且在光標移動到後代元素上不會觸發。DOM3級歸入規範。IE、Firefox 9+和Opera支持。

mouseleave：在位於元素上方的光標移動到元素範圍以外時觸發。這個事件不冒泡，並且在光標移動到後代元素上不會觸發。DOM3級歸入規範。IE、Firefox 9+和Opera支持。

　　4.3.1 客戶區座標位置

1 var div = document.getElementById("myDiv");2 EventUtil.addHandler(div, "click", function(event){3     event = EventUtil.getEvent(event);   //獲取事件對象4     alert("Client coordinates : " + event.clientX + "," +event,clientY);  //相對於瀏覽器窗口位置5 });

　　4.3.2 頁面座標位置

1 var div = document.getElementById("myDiv");2 EventUtil.addHandler(div, "click", function(event){3     event = EventUtil.getEvent(event);4     alert("Page coordation: "+event.pageX + "," + event.pageY);//相對文檔座標5 }

　　IE8以前不支持，所以要用clientX/Y 和滾動信息計算出來。這個時候須要document.body(混雜模式)或documentElement(標準模式)中的scrollLeft和scrollTop屬性。計算過程以下：

View Code

　　4.3.3 屏幕座標位置

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
    event = EventUtil.getEvent(event);
    alert("Screen coordation: "+event.screenX + "," + event.screenY);//相對電腦屏幕座標}

　　4.3.4 修改鍵

　　雖熱鼠標事件主要是使用鼠標來觸發的，但在按下鼠標時鍵盤上的某些鍵的狀態也是能夠影響到所要採起的操做。這些修改鍵就是Shift、Ctrl、Alt和Meta（在window鍵盤中的Window鍵，在蘋果機中的Cmd鍵），它們常常被用來修改鼠標事件的行爲。DOM爲此規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性包含的都是布爾值，若是相應的鍵被按下，則值爲true，不然爲false。當某個鼠標事件發生時，經過檢測這幾個屬性就能夠肯定用戶是否按下了其中的鍵。下面來舉個例子：

View Code

　　4.3.5 鼠標滾輪事件

　　觸發鼠標滾輪事件後，生成的事件對象有一個屬性叫：wheelDelta，它是一個數值。在不一樣的瀏覽器不一樣的滾動方向有不一樣的數值，所以，咱們還要去兼容它。

 1 var eventUtil ={ 2      //獲取鼠標滾輪屬性值 3     getWheelDelta:function(event) { 4          if(event.wheelDelta) { 5              return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDalta);  //針對Opera瀏覽器 6          }else{ 7              return -event.detail * 40; 8          } 9     }10 }

具體用法：

View Code

4.4 鍵盤和文本事件：用戶在使用鍵盤時會觸發鍵盤事件。

　　有3個鍵盤事件，簡述以下：

keydown：當用戶按下鍵盤上的任意鍵時觸發，並且若是按住不放的話，會重複觸發此事件。

keypress：當用戶按下鍵盤上的字符鍵時觸發，並且若是按住不放的話，會重複觸發此事件。

keyup：當用戶釋放鍵盤上的鍵時觸發。

　　只有一個文本事件：textInput。這個事件是對keypress的補充，用意是將文本顯示給用戶以前更容易攔截文本。在文本插入文本框以前會觸發textInput事件。

在用戶按了一個字符鍵時，首先觸發keydown事件，而後緊跟着是keypress事件，最後觸發keyup事件。其中，keydown和keypress都是在文本框發生變化以前被觸發；而keyup事件則是在文本框已經發生變化以後被觸發。

　　4.4.1 鍵碼

　　在發生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode屬性的值與ASCII碼中對應小寫字母的編碼相同——與Shift狀態無關。DOM和IE的event對象都支持keyCode屬性。

keyCode用法

　　4.4.2 字符編碼

　　發生keypress事件意味着按下的鍵會影響到屏幕中文本的顯示。在全部瀏覽器中，按下可以插入或刪除字符的鍵都會觸發keypress事件；按下其餘鍵可否觸發此事件因瀏覽器而異。IE9+、Firefox、Chrome和Safiri的event對象都支持一個charCode屬性，這個屬性只有發生在keypress事件時才包含值，並且這個值是按下的那個鍵所表明字符的ASCII編碼。此時keyCode一般等於0或者也等於所按鍵的鍵碼。IE8及以前版本和Opera則是在keyCode中保存字符的ASCII編碼。想要以跨瀏覽器的方式取得字符編碼，必須首先檢測charCode屬性是否可用，若是不可用則使用keyCode，以下：

1 var eventUtil = {2      //省略其餘代碼3     getCharCode: function(event) {4         if(typeof event.charCode == "number"){  //判斷是否支持charCode屬性5             return event.charCode;6         }else{7             return event.keyCode;8         }，9 }；

具體用法：

keyCode/charCode用法

　　附：有關鍵盤事件和鍵盤事件對象屬性請參考——JS之keyCode、charCode、which對比.

　　4.4.3 textInput事件

　　「DOM3級事件」規範中引入了一個新事件，名叫textInput。根據規範，當用戶在可編輯區域中輸入字符時，就會觸發這個事件。這個用於替代keypress的textInput事件的行爲稍有不一樣。區別之一就是任何能夠得到焦點的元素均可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件。區別之二是textInput事件只會在用戶按下可以輸入實際字符的鍵時纔會被觸發，而keypress事件則在按下那些可以影響文本顯示的鍵時也會觸發（例如退格鍵）。該事件對象還有一個屬性叫data。這個屬性的值就是輸入的字符自己的值。先觸發該事件，才能顯示該字符。