快捷導(dǎo)航

jQuery學(xué)習(xí)4 瀏覽器的事件模型

更新時(shí)間：2010年02月07日 10:11:46 作者：

首先要知道DOM的兩級(jí)模式：DOM0級(jí)和DOM2級(jí) 在DOM0級(jí)事件處理程序是通過把函數(shù)實(shí)例的引用指派到DOM元素的屬性而聲明的。

首先要知道DOM的兩級(jí)模式：DOM0級(jí)和DOM2級(jí)

在DOM0級(jí)事件處理程序是通過把函數(shù)實(shí)例的引用指派到DOM元素的屬性而聲明的。

聲明DOM第0級(jí)事件處理程序

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>DOM Level 0 Events Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('#vstar')[0].onmouseover = function(event) { 
say('Whee!'); 
} 
}); 

function say(text) { 
$('#console').append('<div>'+new Date()+' '+text+'</div>'); 
} 
</script> 
</head> 

<body> 
<img id="vstar" src="vstar.jpg" onclick="say('Vroom vroom!')"/> 
<div id="console"></div> 
</body> 
</html> 

事件冒泡：在目標(biāo)元素獲得機(jī)會(huì)處理事件之后，事件模型檢查目標(biāo)元素的父元素，看是否為同類型事件建立了處理程序。如果是，則也調(diào)用父元素的處理程序。再檢查其父元素，直至檢查到DOM樹的頂部，這個(gè)過程稱之為事件冒泡。

事件傳播從起點(diǎn)到DOM樹的頂部

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

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html id="greatgreatgrandpa"> 
<head> 
<title>DOM Level 0 Bubbling Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('*').each(function(){ 
var current = this; 
this.onclick = function(event) { 
if (!event) event = window.event; 
var target = (event.target) ? 
event.target : event.srcElement; 
say('For ' + current.tagName + '#'+ current.id + 
' target is ' + target.id); 
} 
}); 
}); 

function say(text) { 
$('#console').append('<div>'+text+'</div>'); 
} 
</script> 
</head> 

<body id="greatgrandpa"> 
<div id="grandpa"> 
<div id="pops"> 
<img id="vstar" src="vstar.jpg"/> 
</div> 
</div> 
<div id="console"></div> 
</body> 
</html> 

DOM第2級(jí)事件模型

DOM第0級(jí)的缺點(diǎn)是，屬性被用于存儲(chǔ)作為事件處理程序的函數(shù)的引用，所以每個(gè)元素對(duì)于任何特定的事件類型，每次只能注冊(cè)一個(gè)事件處理程序。

DOM第2級(jí)事件模型（也稱為監(jiān)聽器）被設(shè)計(jì)來解決這些類型的問題。每個(gè)DOM元素都定義名為addEventListener()的方法，用于把事件處理程序(監(jiān)聽器)附加到元素上。這個(gè)方法的格式如下所示：

addEventListener(enentType,listener,useCapture)

參數(shù)eventType是一個(gè)字符串，用于標(biāo)識(shí)將要處理的時(shí)間類型。例如：click、mouseover、keydown等。

參數(shù)listener是函數(shù)的引用（或內(nèi)聯(lián)函數(shù)），用于在元素上建立指定類型的處理程序。

參數(shù)useCapture是布爾類型。

利用DOM第2級(jí)模型建立事件處理程序

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

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>DOM Level 2 Events Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
var element = $('#vstar')[0]; 
element.addEventListener('click',function(event) { 
say('Whee once!'); 
},false); 
element.addEventListener('click',function(event) { 
say('Whee twice!'); 
},false); 
element.addEventListener('click',function(event) { 
say('Whee three times!'); 
},false); 
}); 

function say(text) { 
$('#console').append('<div>'+text+'</div>'); 
} 
</script> 
</head> 

<body> 
<img id="vstar" src="vstar.jpg"/> 
<div id="console"></div> 
</body> 
</html> 