23.事件對象

事件對象

 

學習要點：

1.事件對象

2.鼠標事件

3.鍵盤事件

4.W3C與IE

 

 

JavaScript事件的一個重要方面時它們擁有一些相對一致的特色，能夠給你的開發提供更強大的功能，最方便和強大的

就是事件對象，它們能夠幫你處理鼠標事件和鍵盤敲擊方面的狀況，此外還能夠修改通常事件的捕獲/冒泡流的函數。

 

1、事件對象

事件處理函數的一個標準特性是，以某種方式訪問的事件對象包含有關於當前事件的上下文信息。

事件處理三部分組成：對象.事件處理函數=函數。例如：單擊文檔任意處。

 

document.onclick = function(){

alert('journey');

};

 

PS：以上程序的名詞解釋：click表示一個事件類型，單擊。onclick表示一個事件處理函數或綁定對象的屬性（或者叫

事件監聽、偵聽器）。document表示一個綁定的對象，用於觸發某個元素區域。function()匿名函數是被執行的函數，

用於觸發後執行。

 

除了用匿名函數的方式做爲被執行的函數，也可設置成獨立的函數。

document.onclick = box; //直接賦值函數名便可，無須括號

function box(){

alert('journey');

};

 

this關鍵字和上下文

在面向對象那章咱們瞭解到：在一個對象裏，因爲做用域的關係，this表明着它最近對象。

 

var input = document.getElementsByTagName('input')[0];

input.onclick = function(){

alert(this.value); //HTMLInputElement，this表示input

};

 

 

從上面的拆分，咱們並無發現本章的重點；事件對象，那麼事件對象是什麼？它在哪裏呢？當觸發某個事件時，

會產生一個事件對象，這個對象包含着全部與事件有關的信息。

包括致使事件的元素、事件的類型、以及其餘與特定事件相關的信息。

事件對象，咱們通常稱爲event對象，這個對象是瀏覽器經過函數把這個對象做爲參數傳遞過來的。那麼首先，我

們就必須驗證一下，在執行函數中沒有傳遞參數，是否能夠獲得隱藏的參數。

 

 

function box(a,b){

alert(arguments.lenght); //獲取參數的值

};

box(4,5)

 

window.onload = function(){

document.onclick = function(){

alert(arguments.lenght); //若是是事件處理函數綁定的函數，瀏覽器會默認傳遞一個參數，這個參數就是event對象

}

}

 

window.onclick = function(){

document.onclick = function(){

alert(arguments[0]); //MouseEvent，鼠標事件對象

}

document.onkeydown =function(){

alert(arguments)[0]; //KeyboardEvent，鍵盤事件對象

}

}

 

經過上面兩組函數中，咱們發現，經過事件綁定的執行函數是能夠獲得一個隱藏參數的。說明，瀏覽器會自動分配

一個參數，這個參數其實就是event對象。

input.onclick = function(){

alert(arguments[0]); //MouseEvent，鼠標事件對象

};

 

上面這種作法比較累，那麼比較簡單的作法是，直接經過接收參數來獲得便可。

input.onclick = function(evt){ //接受event對象，名稱不必定非要event

alert(evt); //MouseEvent，鼠標事件對象

}

 

直接接收event對象，是W3C的作法，IE不支持，IE自定義了一個event對象，直接在window.event獲取便可。

input.onclick = function(evt){

var e = evt || window.event; //實現跨瀏覽器兼容獲取event對象

alert(e);

};

 

2、鼠標事件

鼠標事件時Web上面最經常使用的一類事件，畢竟鼠標仍是最主要的定位設備。那麼經過事件對象能夠獲取到鼠標按鈕

的信息和屏幕座標獲取等。

 

 

1.鼠標按鈕

只有在主鼠標按鈕被單擊時（常規通常是鼠標左鍵）纔會觸發click事件，所以檢測按鈕的信息並非必要的。但對於

mousedown和mouseup事件來講，則在其event對象存在一個button屬性，表示按下或釋放按鈕。

 

非IE（W3C）中的button屬性

值 說明

0 表示主鼠標按鈕（常規通常是鼠標左鍵）

1 表示中間的鼠標按鈕（鼠標滾輪按鈕）

2 表示次鼠標按鈕（常規通常是鼠標右鍵）

 

 

IE中的button屬性

值 說明

0 表示沒有按下按鈕

1 表示主鼠標按鈕（常規通常是鼠標左鍵）

2 表示次鼠標按鈕（常規通常是鼠標右鍵）

3 表示同時按下了主、次鼠標按鈕

4 表示按下了中間的鼠標按鈕

5 表示同時按下了主鼠標按鈕和中間的鼠標按鈕

6 表示同時按下了次鼠標按鈕和中間的鼠標按鈕

7 表示同時按下三個鼠標按鈕

 

 

PS：在絕大部分狀況下，咱們最多隻使用主次中三個單擊鍵，IE給出了其餘組合鍵通常沒法使用上。因此，咱們只

須要作上這三種兼容便可。

 

 

window.onload =function(){

document.onmouseup = function(event){

if(getButton(event) == 0) alert('左鍵');

if(getButton(event) == 1) alert('中鍵');

if(getButton(event) == 2) alert('右鍵');

}

}

 

//跨瀏覽器鼠標按鈕

function getButton(event){

var e = event || window.event;

if(event){

return e.button;

}else if(window.event){

switch(e.button){

case 1;

return 0;

case 4:

return 1;

case 2;

return 2;

case 0;

return 2;

}

}

}

 

 

2.可視區及屏幕座標

事件對象提供了兩組來獲取瀏覽器座標的屬性，一組是頁面可視區的左邊，另外一組是屏幕座標。

 

座標屬性

屬性 說明

clientX 可視區X座標，距離左邊框的位置

clientY 可視區Y座標，距離上邊框的位置

screenX         屏幕區X座標，距離左屏幕的位置

screenY         屏幕區Y座標，距離上屏幕的位置

 

document.onclick = function(event){

var e = event || window.event;

alert(e.clientX + '.' + e.clientY);

alert(e.screenX + ',' + e.screenY);

};

 

 

3.修改鍵

有時，咱們須要經過鍵盤上的某些鍵來配合鼠標來觸發一些特殊的事件。這些鍵爲：Shift、Ctrl、Alt和Meat（

Window中就是Windows鍵，蘋果機中是Cmd鍵），它們常常被用來修改鼠標事件和行爲，因此叫修改鍵。

 

修改鍵屬性

屬性 說明

shiftKey 判斷是否按下了Shift鍵

ctrlKey 判斷是否按下了Ctrl鍵

altKey 判斷是否按下了alt鍵

metaKey 判斷是否按下了windows鍵，IE不支持

 

function getKey(event){

var e = event || window.event;

var keys = [];

 

if(e.shiftKey)keys.push('shift'); //給數組添加元素

if(e.ctrlKey)keys.push('ctrl');

if(e.altKey)keys.push('alt');

 

return keys;

}

 

window.onload = function(){

document.onclick=function(event){

alert(getKey(event));

}

}

 

 

3、鍵盤事件

用戶在使用鍵盤時會觸發鍵盤事件。DOM2級事件最初規定了鍵盤事件，結果有刪除了相應的內容。最終仍是使用

最初的鍵盤事件，不過IE9已經率先支持DOM3級鍵盤事件。

 

1.鍵碼

在發生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對

數字字母字符集，keyCode屬性的值與ASCII碼中對應小寫字母或數字的編碼相同。字母中大小寫不影響。

 

document.onkeydown = function(event){

alert(event.keyCode); //按任意鍵，獲得相應的keyCode

};

 

不一樣的瀏覽器在keydown和keyup事件中，會有一些特殊的狀況：

在Firefox和Opera中，分號鍵時keyCode值爲59，也就是ASCII中分號的編碼；而IE和Safari返回186，即鍵盤中按

鍵的鍵碼。

PS：其餘一些特殊狀況因爲瀏覽器版本太老和市場份額過低，這裏不作補充

 

 

 

 

2.字符編碼

Firefox、Chrome和Safari的event對象都支持一個charCode屬性，這個屬性只有發生keypress事件時才包含值，

並且這個值是按下的那個鍵所表明字符的ASCII編碼。此時的keyCode一般等於0或者也可能等於所按鍵的編碼。

IE和Opera則是在keyCode中保存字符的ASCII編碼。

function getCharCode(event){

var e = event || window.event;

if(typeof e.charCode == 'number'){

return e.charCode;

}else{

return e.keyCode;

}

}

 

 

 charCode在使用keypress的狀況下，Firefox會返回字符鍵盤的編碼，支持大小寫

IE和Opera不支持charCode這個屬性

 

通常狀況下 咱們無論非字符鍵盤，基本上處理的都是字符按鍵

 

 

作一下兼容：

window.onload=function(){

document.onkeypress = function(event){

alert(getCharCode(event));

}

}

function getCharCode(event){

var e = event || window.event;

if(typeof e.charCod == 'number'){

return e.charCod;

}else{

return e.keyCode;

}

}

 

 

 

 

PS：可使用String.fromCharCode()將ASCII編碼轉換成實際的字符。

 

 

keyCode和charCode區別以下：好比當按下a鍵（重視是小寫的字母）時，在Firefox中會得到

keydown：keyCode is 65 charCode is 0

keyup：keyCode is 65 charCod is 0

keypress：keyCode is 0 charCode is 97

 

 

在IE中會得到

keydown：keyCode is 65 charCode is undefined

keyup：keyCode is 65 charCode is  undefined

keypress：keyCode is 97 charCode is undefined

 

而當按下shirt鍵時，在Firefox中會獲得

keydown：keyCode is 16 charCode is undefined

keyup：keyCode is 16 charCode is undefined

 

 

keypress：不會得到任何的charCode值，由於按shift並無輸入任何的字符，而且也不會觸發keypress事件

 

PS：在keypress事務裏面，事務包含了keyCode - 用戶按下的按鍵的物理編碼。在keypress裏，keyCode包含了

字符編碼，即默示字符的ASCII碼，如許的情勢實用於全部瀏覽器 - 除了火狐，它在keypress事務中的keyCode

返回值爲0。

 

 

 

 

 

4、W3C與IE

在標準的DOM事件中，event對象包含與建立它的特定事件有關的屬性和方法，觸發的事件類型不同，可用的屬

性和方法也不同。

 

 

W3C中event對象的屬性和方法

 

屬性和方法 類型 讀/寫 說明

bubbles Boolean 只讀 代表事件是否冒泡

cancelable Boolean 只讀 代表是否能夠取消事件的默認行爲

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

datail Integer 只讀 與事件相關的細節信息

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

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

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

target Element 只讀 事件的目標

type String 只讀 被觸發的事件類型

 

IE中event對象的屬性

 

屬性 類型 讀/寫 說明

cancelBubble Boolean 讀/寫 默認值爲false，但將其設置爲true就能夠取消事件冒泡

returnValue Boolean         讀/寫 默認值爲true，但將其設置爲false就能夠取消事件的默認行爲

srcElement Element 只讀 事件的目標

type String 只讀 被觸發的事件類型

 

在這裏，咱們只看全部瀏覽器都兼容的屬性或方法，首先第一個咱們瞭解一下W3C中的target和IE中的srcElement，

都表示事件的目標。

 

function getTarget(event){

var e = event || window.event;

return e.target || e.srcElement; //兼容獲得事件目標DOM對象

}

 

document.onclick = function(event){

var target = getTarget(event);

alert(target);

}

 

 

事件流

事件流是描述的從頁面接受事件的順序，當幾個都具備事件的元素層疊在一塊兒的時候，那麼你點擊其中一個元素，

並非只有當前被點擊的元素會觸發事件，而層疊在你點擊範圍的全部元素都會觸發事件，事件流包括兩種模式：

冒泡和捕捉。

 

事件冒泡，是從裏往外逐個觸發。事件捕捉，是從外往裏逐個觸發。那麼現代的瀏覽器默認狀況下都是冒泡模型，

而捕獲模式則是早期的Netscape默認狀況，而如今的瀏覽器要使用DOM2級模型的事件綁定機制才能手動定義事件

流模式。

Document

Document html

Document body

Document div

Document input

向下捕獲 向上冒泡

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

<link rel="stylesheet" href="">

</head>

<body>

<div id="box" style="width:100px; height:100px; background:red">

<input type="button" value="按鈕" />

</div>

</body>

</html>

 

 

 

window.onload = function(){

document.onclick = function(){

alert('document');

}

document.documentElement.onclick = function(){

alert('html');

}

document.body = function(){

alert('body')

}

document.getElementById('box').onclick =function(){

alert('div');

}

document.getElementsByTagName('input') = function(event){

alert('input');

var e = event || window.event;

e.stopPropagation(); //W3C取消冒泡

e.cancelBubble = true; //IE取消冒泡

setStop(event);

}

//document.querySelector('input').onclick=function(){

alert('input');

}

//document.querySelectorAll('input')[0].onclick=function(event){

alert('input');

}

}

在阻止冒泡的過程當中，W3C和IE採用的不一樣的方法，那麼咱們必須作一下兼容。

 

function setStop(event){

var e = event || window.event;

window.event?e.cancelBubble == true : e.stopPropagation();

}

或者用：

function setStop(event){

var e = event || window.event;

(typeof e.stopPropagation == 'function') ? e.stopPropagation() : e,cancelBubble = true;

}