DOM基礎(chǔ)教程之事件對(duì)象
瀏覽器中的事件都是以對(duì)象的形式存在的，同樣ie瀏覽器與標(biāo)準(zhǔn)dom瀏覽器之間存在獲取事件對(duì)象上也存在差別。在ie瀏覽器中事件對(duì)象是windows對(duì)象的一個(gè)屬性event，訪問通常采用如下方法。
oP.onclick = function(){
var oEvent = window.event;
}
盡管它是window對(duì)象屬性，但event對(duì)象還是只能在事件發(fā)生時(shí)被訪問，所有的事件處理函數(shù)執(zhí)行完之后，該對(duì)象就消失了。
而標(biāo)準(zhǔn)的dom規(guī)定event對(duì)象必須作為唯一的參數(shù)傳給事件處理函數(shù)。一次在類似火狐瀏覽器中訪問事件對(duì)象通常作為參數(shù)，代碼如下：
oP.onclick = function(oEvent){
}
因此，為了兼容兩種瀏覽器，通常采用下面的方法
oP.onclick = function(oEvent){
if(window.event)oEvent = window.event;
}
瀏覽器在獲取了事件的對(duì)象后就可以通過它的一系列屬性和方法處理各種事件了，例如鼠標(biāo)事件，鍵盤事件和瀏覽器事件。等
以下羅列了常用的屬性和方法：
從以上可以看出，兩類瀏覽器還是有一些相似之處，例如type屬性便是各種瀏覽器所兼容的，它表示獲取事件的類型，返回類似“click”，“mousemove”之類的值。
這對(duì)于同一個(gè)函數(shù)處理多個(gè)種類事件十分有用。
如下：同一個(gè)函數(shù) 處理多種事件。
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //處理兼容性，獲得對(duì)象
if (oEvent.type == "click")
disp.innerHTML += "你點(diǎn)擊了我！";
else if (oEvent.type == "mouseover")
disp.innerHTML += "你移動(dòng)到我的上面";
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onclick = handle;
oP.onmouseover = handle;
}
</script>
<div>
<div id="box" style="width:100px;height:100px;background:#ddd;"></div>
<p id="display">Click Me</p>
</div>
以上代碼給id="box"的div添加了兩個(gè)事件響應(yīng)函數(shù)，而這兩個(gè)事件卻是同一個(gè)函數(shù)
在這函數(shù)中首先考慮兼容獲得事件對(duì)象，然后利用type屬性盤對(duì)事件的名稱。
在檢測shift、alt、ctrl這三個(gè)按鍵時(shí)，兩類瀏覽器使用的方法也完全一樣，都具有 shiftKey，altKey，ctrlKey這三個(gè)屬性，
代碼如下：
var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
另外，在獲取鼠標(biāo)指針上，兩類瀏覽器使用的方法都一樣，都具有clientX、clientY和screenX、screenY。
其中，clientX和clientY表示鼠標(biāo)在客戶端區(qū)域的位置，不包括瀏覽器的狀態(tài)欄，菜單欄等。
代碼如下：
var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;
而screenX和sreenY則指的是鼠標(biāo)在整個(gè)計(jì)算機(jī)屏幕的位置，代碼是
var iScreenX = oEvent.screenX;
var iScreenY = oEvent.screenY;
很多時(shí)候，開發(fā)者想知道事件是由那個(gè)對(duì)象觸發(fā)的，即事件的目標(biāo)（target）。
假設(shè)<p>元素分配onclick事件處理函數(shù)，觸發(fā)click事件時(shí)<p>就會(huì)被認(rèn)為是目標(biāo)。
在IE瀏覽器中，目標(biāo)包含在event對(duì)象的srcElement屬性中，代碼如下
而在標(biāo)準(zhǔn)的DOM瀏覽器中，目標(biāo)則包含在target屬性中，代碼如下
獲取事件的目標(biāo)
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //處理兼容性，獲得對(duì)象
var oTarget;
if (oEvent.srcElement) //處理兼容性，獲得事件
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
disp.innerHTML += "元素名稱：" + oTarget.tagName +"<br>" + "元素內(nèi)容：" + oTarget.textContent + "<br>"
+ "之前緊隨的節(jié)點(diǎn)：" + oTarget.textContent + "<br>"
;
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onclick = handle;
}
</script>
<div>
<div id="box" style="width:100px;height:100px;background:#ddd;">
box內(nèi)容
</div>
<p id="display"></p>
</div>
（補(bǔ)充）Element 對(duì)象的屬性 http://www.w3school.com.cn/xmldom/dom_element.asp
（補(bǔ)充）Element 對(duì)象的方法 http://www.w3school.com.cn/xmldom/dom_element.asp
由于事件的目標(biāo)在兩類瀏覽器上不同，因此代碼必須保證兼容性，通常的做法就是直接將對(duì)象作為if語句的條件，代碼如下
if (oEvent.srcElement)
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
這種方法在其它屬性中也是常用的。
- html的DOM中Event對(duì)象onblur事件用法實(shí)例
- DOM基礎(chǔ)教程之事件類型
- jQuery 處理頁面的事件詳解
- DOM 事件流詳解
- DOM 中的事件處理介紹
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 下拉框應(yīng)用
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
- DOM3中的js textInput文本事件
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- html的DOM中Event對(duì)象onabort事件用法實(shí)例
相關(guān)文章
js之WEB開發(fā)調(diào)試?yán)?Firebug 下載
js之WEB開發(fā)調(diào)試?yán)?Firebug 下載...2007-01-01
今天的教程來自天才的Cody Lindley的新書：《JavaScript啟蒙教程 / JavaScript Enlightenment》。他討論了令人迷惑的關(guān)鍵字this，以及確定和設(shè)置this的值的方法。2016-06-06
JavaScript中使用Math.floor()方法對(duì)數(shù)字取整
這篇文章主要介紹了JavaScript中使用Math.floor()方法對(duì)數(shù)字取整,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JavaScript面向?qū)ο罄^承，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了淺談javascript 迭代方法的相關(guān)資料,需要的朋友可以參考下2015-01-01
javascript中經(jīng)常使用的對(duì)象判斷方式包括：typeof、constructor和Object.prototype.toString.call()2013-11-11
閉包向來給包括JavaScript程序員在內(nèi)的程序員以神秘，高深的感覺，事實(shí)上，閉包的概念在函數(shù)式編程語言中算不上是難以理解的知識(shí)2013-07-07
原生javascript 學(xué)習(xí)之js變量全面了解
下面小編就為大家?guī)硪黄鷍avascript 學(xué)習(xí)之js變量全面了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了淺談javascript 歸并方法的相關(guān)資料,需要的朋友可以參考下2015-01-01
閉包是一個(gè)比較抽象的概念,尤其是對(duì)js新手來說.書上的解釋實(shí)在是比較晦澀,對(duì)我來說也是一樣.2014-09-09