jQuery學習4 瀏覽器的事件模型

2019-11-21 00:45:58

字體：大中小

來源：轉載

供稿：網友

首先要知道DOM的兩級模式：DOM0級和DOM2級

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

聲明DOM第0級事件處理程序

 
<!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> 

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

事件傳播從起點到DOM樹的頂部

復制代碼代碼如下:

 
<!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級事件模型

DOM第0級的缺點是，屬性被用于存儲作為事件處理程序的函數的引用，所以每個元素對于任何特定的事件類型，每次只能注冊一個事件處理程序。

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

addEventListener(enentType,listener,useCapture)

參數eventType是一個字符串，用于標識將要處理的時間類型。例如：click、mouseover、keydown等。

參數listener是函數的引用（或內聯函數），用于在元素上建立指定類型的處理程序。

參數useCapture是布爾類型。

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

復制代碼代碼如下:

 
<!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> 