快捷導(dǎo)航

JavaScript 事件的一些重要說明

更新時間：2009年10月25日 18:51:17 作者：

關(guān)于JavaScript中事件的一些重要說明,需要的朋友可以參考下。

1，JavaScript異步回調(diào)

 
<script language="javascript"> 
//注冊回調(diào)函數(shù)loaded到處理函數(shù)window.onload上 
window.onload = loaded; 
//把方法window.alert地址傳遞給show函數(shù) 
var show = window.alert; 
function loaded(){ 
show("success"); 
} 
</script> 

2，事件對象
　　下面的js實現(xiàn)當(dāng)在textarea文本框里面鍵入回車時，并不導(dǎo)致?lián)Q行。即禁用回車鍵

復(fù)制代碼代碼如下:

 
<textarea ></textarea> 
<script language = "javascript"> 
/* 
事件的對象的棘手部分在于，IE的實現(xiàn)與W3C的規(guī)范有查表。IE使用一個獨立的全局事件對象(它可以再全局變量屬性window.event中找到)，而其他瀏覽器則使用獨立的包含事件對象的參數(shù)傳遞。 
*/ 
document.getElementsByTagName("textarea")[0].onkeypress = function(e) 
{ 
//如果不存在事件對象，則獲取全局的(僅IE)的對象 
var e = e || window.event; 
//如果敲擊了回車鍵，返回false(使它不發(fā)生任何行為) 
return e.keyCode != 13; 
} 
</script> 

3，this關(guān)鍵字
　　瀏覽器會把this關(guān)鍵字等同于引用該函數(shù)(含有this關(guān)鍵字的函數(shù))的當(dāng)前元素

復(fù)制代碼代碼如下:

 
<body> 
<div id = "body"> 
<ul class = "links"> 
<li> 
<a href = "/">Home</a> 
</li> 
<li> 
<a href = "./">mappath</a> 
</li> 
<li> 
<a href = "../">parentpath</a> 
</li> 
</ul> 
</div> 
</body> 
<script language = "javascript"> 
var li = document.getElementsByTagName("li"); 
for (var i = 0; i < li.length; i++) 
{ 
li[i].onclick = handeClick; 
} 
function handeClick() 
{ 
this.style.backgroundColor = "blue"; 
this.style.color = "red"; 
} 
</script> 

4，取消事件冒泡
　　通常當(dāng)你對子元素作樣式作修改，或者觸發(fā)事件，根據(jù)冒泡原理，其父元素也會作相同改變，為防止這類事情發(fā)生，需要做取消事件冒泡的處理。
　　下面實例展示了鼠標(biāo)會為其懸停的當(dāng)前元素加上紅色的邊框。如果不阻止事件冒泡的話，每次把鼠標(biāo)移到一個元素上時，該元素及其父元素都會有紅色的邊框，這是我們不希望看到的。

復(fù)制代碼代碼如下:

 
<body> 
<div id = "body"> 
<ul class = "links"> 
<li> 
<a href = "/">Home</a> 
</li> 
<li> 
<a href = "./">mappath</a> 
</li> 
<li> 
<a href = "../">parentpath</a> 
</li> 
</ul> 
</div> 
</body> 
<script language="javascript"> 
//阻止冒泡的通用函數(shù) 
function stopBubble(e) 
{ 
if (e && e.stopPropagation) 
//w3c方法 
e.stopPropagation(); 
else 
//ie方法 
window.event.cancelBubble = true; 
} 
var li = document.getElementsByTagName("*"); 
for (var i = 0; i < li.length; i++) 
{ 
//監(jiān)聽用戶鼠標(biāo)，當(dāng)移動到元素上時，為元素加上紅色邊框 
li[i].onmouseover = function(e) 
{ 
this.style.border = "1px solid red"; 
stopBubble(e); 
} 
//檢查用戶鼠標(biāo)，當(dāng)移開元素時，刪除我們加上的邊框 
li[i].onmouseout = function(e) 
{ 
this.style.border = "0px"; 
stopBubble(e); 
} 
} 
</script> 

5，重載瀏覽器的默認(rèn)行為
　　瀏覽器都有這種默認(rèn)的行為，即當(dāng)我們在<a>標(biāo)簽上點擊的時候會鏈接到href屬性的地址上，有的時候我們并不希望這種事情發(fā)生，而想實現(xiàn)我們自己的效果，比如彈出警告框，示例如下。

復(fù)制代碼代碼如下:

 
<a href = "http://www.fzitv.net">重載瀏覽器的默認(rèn)行為</a> 
<script language = "javascript"> 
/* 
為了達(dá)到同<a href = "#" onclick = function(){alert("success");}>content</a>相同效果 
*/ 
function stopDefault(e) 
{ 
//W3C防止瀏覽器默認(rèn)行為 
if (e && e.preventDefault) 
e.preventDefault(); 
//IE防止瀏覽器默認(rèn)行為 
else 
window.event.returnValue = false; 
return false; 
} 
var a = document.getElementsByTagName("a"); 
for (var i = 0; i < a.length; i++) 
{ 
a[i].onclick = function(e) 
{ 
alert("我已經(jīng)修改了瀏覽器的默認(rèn)行為了"); 
return stopDefault(e); 
//好像直接寫下面一句也可以 
//return false; 
} 
} 
</script> 

6，事件的親和力(accessibility,又稱可訪問性)
　　為了使得自己的網(wǎng)站更有親和力，可以這樣考慮，當(dāng)我們把鼠標(biāo)放在一個元素上或者通過鍵盤的tab鍵訪問時，其樣式應(yīng)該保持一致，如下代碼

復(fù)制代碼代碼如下:

 
<body> 
<div id = "body"> 
<ul class = "links"> 
<li> 
<a href = "/">Home</a> 
</li> 
<li> 
<a href = "./">mappath</a> 
</li> 
<li> 
<a href = "../">parentpath</a> 
</li> 
</ul> 
</div> 
</body> 
<script language="javascript"> 
var a = document.getElementsByTagName("a"); 
for (var i = 0; i < a.length; i++) 
{ 
//綁定鼠標(biāo)懸停和聚焦事件處理函數(shù)到<a>元素上 
//當(dāng)用戶把鼠標(biāo)懸停到鏈接上，或者(使用鍵盤)聚焦到鏈接上時，它會把<a>的背景顏色變成藍(lán)色 
a[i].onmouseover = a[i].onfocus = function() 
{ 
this.style.backgroundColor = "blue"; 
} 
//綁定鼠標(biāo)離開和模糊事件處理函數(shù)到<a>元素上 
//當(dāng)用戶從鏈接移開時，它會把<a>的背景顏色變成白色 
a[i].onmouseout = a[i].onblur = function() 
{ 
this.style.backgroundColor = "white"; 
} 
} 
</script> 

7，綁定事件監(jiān)聽

復(fù)制代碼代碼如下:

 
//addEventt()添加事件 
//Scott Andrew's original addEvent() function 
//elm元素,document.getElementId('btn1') 
//evType事件名稱,要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on",如Click 
//fn當(dāng)然就是綁定的函數(shù)了,記住不要跟括號,如showalert 
//useCapture布爾值，表示該事件的響應(yīng)順序.userCapture若為true,則瀏覽器采用Capture,若為false則采用bubbing方式.建議用false 
function addEvent(elm, evType, fn, useCapture) 
{ 
if (elm.addEventListener) 
{//firefox,navigation,etc.. 
elm.addEventListener(evType, fn, useCapture); 
} 
else if (elm.attachEvent) 
{//IE 
var r = elm.attachEvent('on' + evType,fn); 
} 
else 
{ 
elm['on' + evType] = fn; 
} 
} 
//removeEvent()注銷事件 
//參數(shù)名同addEvent()函數(shù) 
function removeEvent(elm, evTye, useCapture) 
{ 
if (elm.detachEvent) 
{ 
elm.detachEvent('on' + evType); 
} 
else if (elm.removeEventListener) 
{ 
elm.removeEventListener(evType, userCapture); 
} 
} 