JS基礎——事件對象event，js事件event

JS基礎——事件對象event，js事件event

事件為什麼會是對象呢？先瞭解一下事件處理

一、事件處理

   JS在事件處理函數中提供了事件對象，協助處理滑鼠和鍵盤事件。同時還可以修改一些事件的捕獲和冒泡流的函數。

事件處理分為三部分：對象.事件處理函數=函數

document.onclick=function(){     alert(this.value); //this代表著在該範圍中離它最近的對象。}

以上事件處理中，document為對象，click是事件處理類型，onclick為事件處理函數。function()為匿名函數，用於觸發後執行。

那麼什麼是事件對象呢？當我們觸發document的click事件時，便會產生一個事件對象，這個對象中包含著這個事件的相關資訊，包括導致事件的元素、事件的類型、以及其它與特定事件相關的資訊等。這個對象是在執行事件時，瀏覽器通過函數傳遞過來的。

小例子：

document.onclick=function(){alert(arguments.length); //瀏覽器會預設傳遞一個參數alert(arguments[0]);//[object MouseEvent]，如果是keydown,則為[object KeyboardEvent]}

可以看出，事件處理中，瀏覽器已經預設將一個參數傳遞過來了。而在普通函數和匿名函數中，是不傳遞event對象的。

event對象的接收：

在W3C中可以直接接受event對象，如：

input.onclick = function (evt) { //接受 event 對象，名稱不一定非要 event    alert(evt); //MouseEvent，滑鼠事件對象 IE不支援};

但是IE中，不支援直接接收，而是通過window.event來接收。

二、擷取滑鼠和鍵盤事件資訊

1、滑鼠事件

   主要是在滑鼠事件執行後，通過事件對象來擷取相關事件的一些屬性，比如左鍵還是右鍵。在按鍵時，是否按住了所規定的鍵值如ctrl,shift等常用鍵，或者滑鼠點擊的位置等相關資訊。

  通過clientX/Y來擷取滑鼠點擊的在可視地區的橫縱座標，screenX/Y可獲得在整個螢幕的橫縱座標。

關於修改鍵的一個小例子：

首先瞭解一下事件對象關於修改鍵的一些方法：

window.onload=function(){document.onclick=function(evt){var e=evt||window.event; <span style="font-family:SimSun;">//跨瀏覽器安全色事件對象</span>alert(getKey(evt));};}function getKey(evt){var e=evt||window.event;var keys=[];  <span style="font-family:SimSun;">//建立一個數組，用來存放按下的索引值</span>if(e.shiftKey) keys.push('shift');if(e.ctrlKey) keys.push('ctrl');if(e.altKey) keys.push('alt'); //單擊+Alt和360快速鍵衝突return keys;}

現在是不是對事件對象的功能有了一個大概的印象呢？看一下鍵盤事件

2、鍵盤事件

   主要應用於按鍵時，擷取按下各個鍵值的鍵碼或字元編碼。主要發生在keydown和keypress事件中

   keycode：不區分大小寫，與鍵盤上的鍵值位置一一對應。用於keydown和keyup事件

   charcode：字元編碼，區分大小寫，其實返回的就是ASCII碼。只支援keypress事件

三、事件流

 事件流包括兩種模式：冒泡和捕獲。

   1、冒泡：從裡向外逐個觸發。

   2、捕獲：從外向裡逐個觸發

  事件流是描述的從頁面接受事件的順序，當幾個都具有事件的元素層疊在一起的時候而層疊在你點擊範圍 ， 並不是只有當前被點擊的元素會觸發事件 ， 那麼你點擊其中一個元素的所有元素都會觸發事件。而如果我們想要只觸發其中一個事件時，此時就需要取消冒泡或捕獲。現代瀏覽器預設都是冒泡類型，所以通常只需要取消冒泡即可。

   如何取消？

function stopPro(evt) {var e = evt || window.event;window.event ? e.cancelBubble = true : e.stopPropagation(); <span style="font-family:SimSun;">//相容W3C和IE</span>}

四、事件對象中的this傳遞問題

  以上是關於事件對象的一些基礎，此外，還需注意在現代事件綁定中匿名函數通過call來進行對象冒充時，傳遞參數時，第一個參數預設傳遞給要冒充的事件對象，而從第二個參數開始才開始真正傳遞給實際要傳遞的參數。什麼意思呢？看一個小例子：

1、事件綁定函數

function addEvent(obj,type,fn){if ( typeof obj.addEventListener!='undefined'){ //W3Cobj.addEventListener(type,fn,false);}else if(typeof obj.attachEvent!='undefined'){//IEobj.attachEvent('on'+type,function(){fn.call(123<span style="font-family:SimSun;">,456,789</span>); <span style="font-family:SimSun;">//利用對象冒充來解決this傳遞問題</span>});}}

2、調用

 

window.onload=function(){    addEvent(document,'click',fn);}function fn(a,b){    alert(this);//123，預設第一個參數為傳遞要冒充的對象，為123    alert(a);//call中從第二個參數起賦值給函數的參數，456     alert(b);<span style="font-family:SimSun;">//789</span>}

總結：事件對象即是事件觸發時，瀏覽器傳遞給事件處理的一個對象，通過這個對象，我們可以獲得相應時間處理的一些相關資訊，以便於我們對接下來的操作做進一步處理。

一個js的event事件的問題

這是舊版IE和其他瀏覽器的區別。
// mousedown的時候進入這個函數function whichKey(evnt) { if (document.all) { // 舊版IE裡，evnt是空的 // 所以要使用全域event對象 x = event.button; if (x == 1) alert("你單擊了左鍵"); if (x == 2) alert("你單擊了右鍵"); } else { // 非IE瀏覽器會把event對象傳進來，可以使用evnt x = evnt.button; if (x == 1) alert("你單擊了左鍵"); if (x == 3) alert("你單擊了右鍵"); return false; }}
 
onclick事件,不可以擷取js事件來源對象，財富不多，希望幫忙看看，給些建議，

因為你onclick是直接調用check的不是attachEvent或者addEventLicenser的，在onclick裡面，this就是事件來源對象，你可以把this傳進去，check(this)