2006-3-5
使IE和FireFox事件停止的方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
</script>
<body>
<input name="Hello" type="button" value="Hello" onclick="Show(this)" />
<a id="myLink"
target="_blank">
mouseDown me
</a>
<script type="text/javascript">
var myLink = document.getElementById("myLink");
var oldHandler = myLink.onclick;
function newHandler()
{
alert("new handler");
//去掉下面的注釋，就會(huì)將事件關(guān)閉。
//return false;
}
function newHandler1()
{
alert("I can’t Show");
}
myLink.onclick = function(){
if(oldHandler!=undefined)
oldHanlder();
return newHandler();
} </script>
</body>
</html>
通常，如果瀏覽器執(zhí)行某種默認(rèn)動(dòng)作來響應(yīng)一個(gè)事件，那么可以返回false阻止瀏覽器執(zhí)行相應(yīng)的動(dòng)作。
判斷DOM標(biāo)準(zhǔn)的方法：document.implementation.hasFeature(“Events”,”2.0”);
IE的事件：
由于IE不支持DOM2的事件模型，那么我們只有為IE編寫特定的事件模型：
在DOM2的模型中，我們可以使用addEventListener來添加新的事件函數(shù)，而我們可以在
IE中添加一個(gè)新的函數(shù)來處理事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
</script>
<body>
<input name="Hello" type="button" value="Hello" onclick="Show(this)" />
<div id="mydiv">mouseDown me</div>
<script type="text/javascript">
var mydiv = document.getElementById("mydiv");
var oldHandler = mydiv.onclick;
function newHandler()
{
alert("new handler");
}
mydiv.onclick = function(){ newHandler(); if(oldHandler!=undefined) oldHanlder();}
</script>
</body>
</html>
IE Event對(duì)象,只能通過window.event
Event屬性
作用
type
與DOMEvent的type相同
srcElement
發(fā)生事件的文檔元素。與DOM Event對(duì)象的target屬性兼容
button
1表示左鍵，2表示右鍵，4表示中間鍵
clientX,clientY
同DOM的MouseEvent對(duì)象的同名屬性兼容
offsetX,offsetY
相對(duì)于源元素的位置。
altKey,ctrlKey,
shitfKey
同DOM
keyCode
得到Keydown，keyup事件的鍵代碼的Unicode
fromElement,
toElement
fromElement聲明mouseover事件中鼠標(biāo)移動(dòng)過的文檔元素。
toElement聲明mouseout事件中鼠標(biāo)移到文檔元素。它們等價(jià)于2級(jí)DOM中的MouseEvent對(duì)象的relatedTarget屬性。
cancelBubble
把它設(shè)為true，可以組織當(dāng)前事件進(jìn)一步氣泡到包容層次的元素。
returnValue
可以組織瀏覽器執(zhí)行與事件相關(guān)的默認(rèn)動(dòng)作。
FireFox的事件總結(jié)：
由于FireFox支持DOM2的事件模型，而且我們也可以使用IE定義事件的方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
</script>
<body>
<input name="Hello" type="button" value="Hello" onclick="Show(this)" />
<div id="mydiv">mouseDown me</div>
<script type="text/javascript">
var mydiv = document.getElementById("mydiv");
function down()
{
alert(‘down‘);
}
mydiv.onclick = down;
mydiv.addEventListener("click",function(e){ alert("down2");},false);
</script>
</body>
</html>
由于FireFox的支持DOM2的事件模型。所以我們可以使用:
得到FireFox的事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>
<body>
<div id="myDiv">
<a id="myLink" >Link Test Event</a>
</div>
<script type="text/javascript">
function TestThis(event)
{
alert(this.href);
alert(event);
alert(typeof event.preventDefault);
alert(event.screenX);
alert(event.screenY);
alert(event.clientX);
alert(event.clientY);
}
var myLink = document.getElementById("myLink");
myLink.addEventListener("click",TestThis,true);
</script>
</body>
</html>
DOM2的事件模型函數(shù)
作用
addEventListener
添加事件監(jiān)聽函數(shù)。
removeEventListener
刪除事件監(jiān)聽函數(shù)。
preventDefault
組織默認(rèn)事件的發(fā)生
stopPropagation
可以組織事件從當(dāng)前正在處理它的節(jié)點(diǎn)傳播
createEvent
創(chuàng)建事件
Event屬性
作用
type
發(fā)生的事件的類型
target
發(fā)生事件的節(jié)點(diǎn)
currentTarget
發(fā)生當(dāng)前在處理的事件的節(jié)點(diǎn)
eventPhase
指明了當(dāng)前事件傳播過程。
Event.CAPTURING_PHASE,Event.AT_TARGET,Event.BUBBLING_PHASE
timestamp
一個(gè)Date對(duì)象，聲明了事件何時(shí)發(fā)生
bubbles
一個(gè)布爾值，是否在文檔樹中氣泡
cancelable
一個(gè)布爾值，是否能用preventDefault
作用的對(duì)象類型DOMFocusIn,DOMFocusOut和DOMActivate。
UIEvent屬性
作用
view
發(fā)生事件的Window對(duì)象
detail
一個(gè)數(shù)字，對(duì)于click事件，mousedown，mouseup的事件。1代表點(diǎn)擊一次，2代表雙擊，3代表點(diǎn)擊三次。
對(duì)于DOMActivate事件,這個(gè)字段的值為1，表示正常激活，2表示超級(jí)激活，例如雙擊鼠標(biāo)或同時(shí)按下Shift和Enter鍵。
MouseEvent屬性
作用
button
0表示左鍵，1表示中間鍵，2表示右鍵。
altKey,ctrlKey,metaKey
,shitKey
是否Alt鍵，Ctrl鍵，Meta鍵，Shift鍵。
clientX,clientY
聲明鼠標(biāo)指針相對(duì)客戶區(qū)或?yàn)g覽器窗口的X坐標(biāo)和Y坐標(biāo)。
screenX,screenY
聲明鼠標(biāo)指針相對(duì)于用戶顯示器的左上角X坐標(biāo)和Y坐標(biāo)。
relateTarget
對(duì)于mouseover事件，它是鼠標(biāo)移動(dòng)到目標(biāo)上時(shí)所離開的那個(gè)節(jié)點(diǎn)。對(duì)于mouseout事件，他是離開目標(biāo)時(shí)，鼠標(biāo)進(jìn)入節(jié)點(diǎn)。
事件傳播三個(gè)階段：1，捕捉階段，事件從Document對(duì)象沿著文檔樹向下傳播給目標(biāo)節(jié)點(diǎn)。
2，目標(biāo)節(jié)點(diǎn)觸發(fā)階段：在目標(biāo)上的適合的事件處理程序?qū)⑦\(yùn)行。3，氣泡階段，在這個(gè)階段，事件將從目標(biāo)元素向上傳播或者氣泡回Document對(duì)象的文檔層次。
