javascript原生事件總結

最後更新：2015-03-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

　　javascript原生的事件，總結了一下，包括事件流、處理函數、事件對象這幾樣東西。而在相容性方面，主要是老牌ie8以及以下和現代瀏覽器的差異，也就是ie和DOM事件標準的差異。

事件流
這個事件流ie4和Netscape4提出來的，但是兩個公司提出的事件流確實剛好相反的。ie的是事件冒泡，Netscape的是事件捕獲。
ie會從觸發事件的元素一直往上冒泡直到document元素。ie8以下包括ie8的

Netscape則是從document元素開始往下傳播一直到觸發事件的元素。

而DOM標準則建議，將事件流分成三個過程：
首先捕獲階段：像Netscape那樣往下捕獲，但是捕獲階段目標元素不會接收到事件。
然後是目標階段：就是觸發目標元素的事件。
最後是冒泡階段：就是想ie那樣子的冒泡。

但是ie9+，以及別的瀏覽器所實現的DOM事件流卻和標準有點不同。主要是事件流的最頂端延長到window。並且，在捕獲階段目標元素也會接受到一次事件。

也就是說，目標元素的事件會兩次觸發。

事件處理常式
有三種方式給元素繫結事件處理函數。
a、HTML 屬性
<a onclick="alert(‘click‘)"></a>
這樣使用在函數裡面直接可以調用event，this指向當前元素。但是這種方式一般不適用。

b、js中元素屬性
這種方式的相容性好，所有瀏覽器都支援。但是有一個相容性問題。那就是ie8-的事件對象是作為window的屬性而不是作為參數傳進去的。所以要像下面這樣寫。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>    <script>        document.getElementById(‘a‘).onclick = function(event){            event = event || window.event;            alert(event);        }    </script></body></html>

c、DOM2事件綁定
主要指的是元素的addEventListener（）和removeEventListener（）。前者綁定，後者刪除。
這兩個函數都有三個參數，
第一個是事件類型，有click，focus，blur等
第二個是事件處理函數。
第三個是個布爾值，true代表在捕獲階段調用處理函數，false代表在冒泡階段調用處理函數。
要綁定事件：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>    <script>        document.getElementById(‘a‘).addEventListener(‘click‘,function(event){            alert(event);        },false)    </script></body></html>

假如想解除綁定，有人可能會這樣：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>    <script>        document.getElementById(‘a‘).addEventListener(‘click‘,function(event){            alert(event);        },false)        document.getElementById(‘a‘).removeEventListener(‘click‘,function(event){            alert(event);        },false)    </script></body></html>

但是這樣是不會成功的。因為函數是一個對象，兩個匿名函數是不同的對象，不相等。所以匿名函數是沒辦法解除綁定的。只能想下面這個，個函數一個名號。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>    <script>        var handler = function(event){            alert(event);        }        document.getElementById(‘a‘).addEventListener(‘click‘,handler,false)        document.getElementById(‘a‘).removeEventListener(‘click‘,handler,false)    </script></body></html>

ie8-的瀏覽器不支援DOM2級事件，但是有類似的方法attachEvent（）和detachEvent（）；用法上是一樣的，只是因為ie8-只有冒泡過程所以就沒有第三個參數。還有第一個參數要加個‘on’，比如click事件是‘onclick‘。另外，函數內this指向window。

事件對象

在js中所有的事件對象都繼承自Event。在chrome（左）和firefox（右）中Event對象的樣子。　　　　

　　　　可以看到在瀏覽器中Event對象還是有點區別的。但是下面的屬性和方法是公用的。

bubbles	是否冒泡
cancelable	是否可以取消預設行為
currentTarget	目前元素
target	目標元素
defaultPrevented	是否已被阻止預設行為
type	事件類型
eventPhase	事件流哪個階段1捕獲 2目標 3冒泡
detail	一些資訊
trusted	js建立的為false，瀏覽器建立為true
view	等同於window
preventDefault()	阻止預設行為
stopPropagation()	阻止冒泡和捕獲
stopImmediatePropagation()	立即阻止冒泡和捕獲

　　　　在ie8—中事件對象，是這個樣子：

cancelBubble	是否取消冒泡，為true先頂一下stopPropagation（）
returnValue	傳回值，為false相當於preventDefault（）
srcElement	目標元素，相當於target
type	事件類型

UI事件
load：頁面載入完、img映像載入完、所有架構載入完、嵌入內容載入完在object元素觸發。在ie9+瀏覽器中，<script>元素也會觸發該事件。
注意：頁面載入完表示，所有的外部css，js，映像等都下載完。
　　img元素，一旦加了src屬性就開始下載。
　　script元素一定要插入文檔才開始下載。
這個事件的事件對象不會包含什麼資訊，除了在相容dom的瀏覽器中有target資訊。
　　在ie8之前沒有加進文檔的映像不會產生event對象。
unload：文檔被完全卸載後觸發。
resize：瀏覽器視窗被調整大小時。
注意：ie8前event不提供任何屬性。
　　相容DOM的瀏覽器會提供target=document。
　　Firefox老版本會在停止改變之後才觸發，現在所有瀏覽器都是每變一個像素都會觸發一次。
scroll：在window對象發生，表示的是文檔被滾動。可以通過body元素的scrollLeft和scrollTop來監控。
注意：經過測試現在chrome，safari支援body上的這兩個屬性，ie11，firefox支援documentElement上的這兩個屬性。所以要這樣寫scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

焦時間點事件
focus,focusin 會在得到焦點的元素上觸發，focus不冒泡，focusin冒泡。
blur，focusout在失去焦點的元素上觸發，blur不冒泡，focuout冒泡。

滑鼠和滾輪事件
click：可以通過滑鼠或鍵盤觸發，冒泡。
dblclick:通過雙擊滑鼠主按鈕觸發（有些瀏覽器中鍵和右鍵也可以）。冒泡。
　　觸發dbclick的過程：mousedown--mouseup--click--mousedown--mouseup--click--dblclick
　　但是ie8及以前的瀏覽器中有bug：mousedown--mouseup--click--mouseup--dblclick
mousedown/mouseup:按下任意的滑鼠鍵/釋放。冒泡。
　　注意：當在一個元素按下會觸發這個元素的mousedown，如果不釋放移動到另一個元素在釋放，就會觸發後一個元素的mouseup。

mouseenter：從元素外部進入元素內部觸發。不冒泡。進入後代元素不觸發。ie、Firefox9+、Opera支援。
mouseleave：從元素內部移出元素是觸發。不冒泡。進入後代元素不觸發。ie、Firefox9+、Opera支援。

mouseover：進入元素內部時觸發。冒泡。
mouseout：移出元素時觸發。冒泡。移進後代元素也觸發。

mousemove：在元素內部移動的時候。冒泡。

在這些事件中，event事件對象會有一些新增的屬性。
在DOM標準中。

clientX、clientY
which	1、左　　2、右　　3、中
detail	單擊次數
ctrlKey
altKey
metaKey
shiftKey
pageX、pageY
screenX、screenY

在ie8以及以前的瀏覽器

clientX、clientY
button	0：沒按下，1：主滑鼠，2：次滑鼠，3：同步選取主次按鈕，4：中間按鈕，5：主和中間按鈕，6：按下次和右滑鼠，7：三個都按下
offsetX、offsetY
ctrlKey
altKey
metaKey
shiftKey
fromElement	mouseover
toElement	mouseout

jquery中對統一用which來代替button和which。

if ( !event.which && button !== undefined ) {                event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );            }

用位與運算，把button的1、3、5、7修正為1；2,6修正為2；

鍵盤與文本事件
keydown：按下鍵盤任意鍵觸發，按著不放會重複觸發。
keyup：釋放鍵盤按鍵是觸發。
　　上面的事件都有一個keyCode，表示按下鍵的鍵碼。數字字母是ASCII中的數字和小寫字母的編碼。charCode為0.
在Firefox和Opera中，按下分號keyCode為ASCII的59；ie，Safari和chreome中為鍵碼186.

keypress：按下字元鍵是觸發。ie9+的瀏覽器，charCode等於ASCII碼。此時的keyCode不確定，不同瀏覽器可能是0，鍵碼或ASCII碼。
在ie8和Opera中，keyCode等於ASCII碼。所以跨瀏覽器：
　　
1. ```
charCode = event.charCode || event.keyCode
```
這三個事件的順序是keydown--keypress--keyup。前兩個事件在文字框變化之前。
變動事件
DOMSubtreeModified：在DOM結構發生任何變化時候觸發，在其他變動事件之後觸發。冒泡。目標是插入或者刪除的元素的父元素。

DOMNodeInserted:在一個節點插入另一個節點時觸發。冒泡，目標是被插入的節點，event.relatedNode是父元素，觸發時已經插入文檔。
DOMNodeInsertedIntoDocument：在DOMNodeInserted之後觸發。在DOMNodeInserted之後觸發。不冒泡，目標是刪除的節點或後代節點，從刪除的節點到後代元素的順序。

DOMNodeRemoved：在一個節點移除是觸發。冒泡。事件目標是被觸發的節點，event.relatedNode是父元素，觸發時未被從文檔中刪除。
DOMNodeRemovedFromDocument：在DOMNodeRemoved之後觸發。不冒泡，目標是刪除的節點或後代節點，從刪除的節點到後代元素的順序。

DOMAttrModified：特性被修改之後觸發。
DOMCharacterDataModified：文本節點的值變化的時候觸發。

這些事件要通過DOM2的Binder 方法才能綁定成功。ie9+，O9+,FF3+,S3+,C支援。

javascript原生事件總結

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript原生事件總結

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support