快捷導(dǎo)航

關(guān)于JavaScript 的事件綜合分析第1/2頁(yè)

更新時(shí)間：2010年08月10日 00:48:48 作者：

js下比較常用的方法，事件函數(shù)代碼。

A 事件流（event flow ）
事件模型分為兩種：冒泡型事件、捕獲型事件。

冒泡型（dubbed bubbling ）事件：指事件按照從最精確的對(duì)象到最不精確的對(duì)象的順序逐一觸發(fā)。
捕獲型（event capturing ）事件：它與冒泡型事件相反，指事件按照從最不精確的對(duì)象到最精確的對(duì)象的順序逐一觸發(fā)。

捕獲型事件也被稱作自頂向下（DOM層次）的事件模型。
由于IE 瀏覽器不支持捕獲型事件，因此并沒有被廣泛應(yīng)用。
B 事件監(jiān)聽
i > 通用監(jiān)聽方法
示例一：

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

<p onclick="alert('點(diǎn)擊了');">Click Me</p>

示例二：

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

 
<html> 
<head> 
<title> demo </title> 
<meta name="Author" content="xugang" /> 
<script type="text/javascript"> 
// 在onload 事件中添加所有標(biāo)簽的事件 
window.onload = function(){ 
// 找到對(duì)象 
var o_p = document.getElementById("myp"); 
// 添加對(duì)象的onclick 事件 
o_p.onclick = function(){ 
alert("我被點(diǎn)擊了"); 
} 
} 
</script> 
</head> 
<body> 
<p id="myp">Click Me</p> 
</body> 
</html> 

此代碼實(shí)現(xiàn)了結(jié)構(gòu)與行為的分離。
給瀏覽器添加監(jiān)聽方法，分為兩種：IE 中的監(jiān)聽方法、標(biāo)準(zhǔn)DOM 的監(jiān)聽方法。

ii > IE 中的監(jiān)聽方法
在IE 瀏覽器中，每個(gè)元素都有兩個(gè)方法來(lái)處理事件的監(jiān)聽。分別是：attachEvent( ) 和 detachEvent( ) 。
附加事件方法：[object].attachEvent(“事件名”，方法名);
分離事件方法：[object].detachEvent(“事件名”，方法名);
如：o_p.detachEvent("onclick",click_A);
示例：

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

 
<html> 
<head> 
<title> demo </title> 
<meta name="Author" content="xugang" /> 
<script type="text/javascript"> 
<!-- 
function click_A(){ 
alert("click_A"); 
//刪除監(jiān)聽函數(shù) 
o_p.detachEvent("onclick",click_B); 
} 
function click_B(){ 
alert("click_B, 我只調(diào)用一次。"); 
} 
var o_p; 
window.onload = function(){ 
o_p = document.getElementById("myP"); 
// 添加監(jiān)聽函數(shù) click_A 
o_p.attachEvent("onclick",click_A); 
// 添加監(jiān)聽函數(shù) click_B 
o_p.attachEvent("onclick",click_B); 
} 
//--> 
</script> 
</head> 
<body> 
<p id="myP">Click Me</p> 
</body> 
</html> 

注意：
● 使用這種方式可以為同一元素添加多個(gè)監(jiān)聽函數(shù)；
● 在IE 瀏覽器中，函數(shù)的執(zhí)行順序與函數(shù)的添加順序相反；
● 在IE 瀏覽器中，雖然函數(shù)有先后執(zhí)行順序，但都會(huì)同時(shí)調(diào)用；

iii > 標(biāo)準(zhǔn)DOM 的監(jiān)聽方法
在使用標(biāo)準(zhǔn)DOM 的瀏覽器中，每個(gè)元素也有兩個(gè)方法來(lái)處理事件的監(jiān)聽。分別是：addEventListener( ) 和 removeEventListener( ) 。
添加事件監(jiān)聽方法：[object].addEventListener(“事件名”，方法名，事件模型 );
移除事件監(jiān)聽方法：[object].removeEventListener(“事件名”，方法名，事件模型 );
注意：
這里的“事件名”不能帶 on ，如：click（如果是onclick 則錯(cuò)誤！）
“事件模型”為boolean 類型，通常設(shè)置為 false ，即“冒泡型”事件。（如果是true 則為“捕獲型”事件）
示例：

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

 
<html> 
<head> 
<title> demo </title> 
<meta name="Author" content="xugang" /> 
<script type="text/javascript"> 
<!-- 
function click_A(){ 
alert("click_A"); 
//刪除監(jiān)聽函數(shù) 
o_p.removeEventListener("click",click_B,false); 
} 
function click_B(){ 
alert("被click_A刪除, 一次都不能調(diào)用。"); 
} 
var o_p; 
window.onload = function(){ 
o_p = document.getElementById("myP"); 
// 添加監(jiān)聽函數(shù) click_A 
o_p.addEventListener("click",click_A,false); 
// 添加監(jiān)聽函數(shù) click_B 
o_p.addEventListener("click",click_B,false); 
} 
//--> 
</script> 
</head> 
<body> 
<p id="myP">Click Me</p> 
</body> 
</html> 

在Firefox 下運(yùn)行通過(guò)，在IE 下報(bào)錯(cuò)。
注意：
● 使用這種方式同樣可以為同一元素添加多個(gè)監(jiān)聽函數(shù)；
● 在Firefox 瀏覽器中，函數(shù)的執(zhí)行順序與函數(shù)的添加順序一致（Firefox 與IE 正好相反）；
● 在Firefox 瀏覽器中，這種方式添加的函數(shù)是執(zhí)行外一個(gè)再執(zhí)行另一個(gè)（逐個(gè)執(zhí)行）；

12 下一頁(yè)閱讀全文