瀏覽器中的事件都是以對(duì)象的形式存在的,同樣ie瀏覽器與標(biāo)準(zhǔn)dom瀏覽器之間存在獲取事件對(duì)象上也存在差別。在ie瀏覽器中事件對(duì)象是windows對(duì)象的一個(gè)屬性event,訪問(wèn)通常采用如下方法。
oP.onclick = function(){
var oEvent = window.event;
}
盡管它是window對(duì)象屬性,但event對(duì)象還是只能在事件發(fā)生時(shí)被訪問(wèn),所有的事件處理函數(shù)執(zhí)行完之后,該對(duì)象就消失了。
而標(biāo)準(zhǔn)的dom規(guī)定event對(duì)象必須作為唯一的參數(shù)傳給事件處理函數(shù)。一次在類似火狐瀏覽器中訪問(wèn)事件對(duì)象通常作為參數(shù),代碼如下:
oP.onclick = function(oEvent){
}
因此,為了兼容兩種瀏覽器,通常采用下面的方法
oP.onclick = function(oEvent){
if(window.event)oEvent = window.event;
}
瀏覽器在獲取了事件的對(duì)象后就可以通過(guò)它的一系列屬性和方法處理各種事件了,例如鼠標(biāo)事件,鍵盤(pán)事件和瀏覽器事件。等
以下羅列了常用的屬性和方法:

從以上可以看出,兩類瀏覽器還是有一些相似之處,例如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屬性盤(pán)對(duì)事件的名稱。
在檢測(cè)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í)候,開(kāi)發(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屬性中,代碼如下
var oTarget = oEvent.srcElement;
而在標(biāo)準(zhǔn)的DOM瀏覽器中,目標(biāo)則包含在target屬性中,代碼如下
var oTarget = oEvent.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語(yǔ)句的條件,代碼如下
if (oEvent.srcElement)
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
這種方法在其它屬性中也是常用的。