jQuery學習5 jQuery事件模型

更新時間：2010年02月07日 10:13:34 作者：

jQuery 事件模型相關資料，需要的朋友可以參考下。

jQuery事件模型的功能有：
提供建立事件處理程序的統(tǒng)一方法；
允許在每個元素上為每個時間類型建立多個處理程序；
采用標準的事件類型名稱，例如click或mouseover；
使用Event實例可用作處理程序的參數(shù)；
對Event實例的最常用的屬性進行規(guī)范化；
為取消事件和阻塞默認操作提供統(tǒng)一方法。
jQuery綁定事件處理程序：
bind()命令
$('img').bind('click',funciton(event){alert('Hi there');}); 該語句為頁面上的圖片綁定已提供的內聯(lián)函數(shù)，作為點擊事件處理程序。

建立事件處理程序，無需瀏覽器特定代碼

復制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>jQuery Events Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('#vstar') 
.bind('click',function(event) { 
say('Whee once!'); 
}) 
.bind('click',function(event) { 
say('Whee twice!'); 
}) 
.bind('click',function(event) { 
say('Whee three times!'); 
}); 
}); 
function say(text) { 
$('#console').append('<div>'+text+'</div>'); 
} 
</script> 
</head> 
<body> 
<img id="vstar" src="vstar.jpg"/> 
<div id="console"></div> 
</body> 
</html> 

刪除事件處理程序unbind(event,listener),unbind(event)
從包裝集的所有元素中刪除可選的已傳遞參數(shù)所指定的事件處理程序。如果不提供參數(shù)，則從元素中刪除所有的監(jiān)聽器(即事件處理程序)
起切換作用的監(jiān)聽器toggle()
toggle(listenerOdd,listenerEven)把已傳遞函數(shù)建立為包裝集所有元素的一對click事件處理程序，每當觸發(fā)click事件就相互切換。
每當點擊事件發(fā)生時，調用互補的監(jiān)聽器

復制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>jQuery Toggle Command Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('#vstar').toggle( 
function(event) { 
$(event.target).css('opacity',0.4); 
}, 
function(event) { 
$(event.target).css('opacity',1.0); 
} 
); 
}); 
</script> 
</head> 
<body> 
<img id="vstar" src="vstar.jpg"/> 
</body> 
</html> 

在元素上方懸停鼠標指針hover(overListener,outListener)建立已匹配元素的mouseover和mouseout事件處理程序。這些處理程序當兒僅當元素所覆蓋區(qū)域被進入和退出時觸發(fā)，忽視鼠標指針從父元素到子元素上的遷移

鼠標停留事件

復制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Hover example</title> 
<link rel="stylesheet" type="text/css" href="hover.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
function report(event) { 
$('#console').append('<div>'+event.type+'</div>'); 
} 
$(function(){ 
$('#outer1') 
.bind('mouseover',report) 
.bind('mouseout',report); 
$('#outer2').hover(report,report); 
}); 
</script> 
</head> 
<body> 
<div class="outer" id="outer1"> 
Outer 1 
<div class="inner" id="inner1">Inner 1</div> 
</div> 
<div class="outer" id="outer2"> 
Outer 2 
<div class="inner" id="inner2">Inner 2</div> 
</div> 
<div id="console"></div> 
</body> 
</html> 