jQuery學(xué)習(xí)5 jQuery事件模型

2019-11-21 00:45:55

字體：大中小

供稿：網(wǎng)友

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

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

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

 
<!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ù)建立為包裝集所有元素的一對(duì)click事件處理程序，每當(dāng)觸發(fā)click事件就相互切換。
每當(dāng)點(diǎn)擊事件發(fā)生時(shí)，調(diào)用互補(bǔ)的監(jiān)聽器

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

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

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

鼠標(biāo)停留事件

復(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> 