您當前位置：首頁 > web前端 > jquery > jQuery學習5：jQuery事件模型

jQuery學習5：jQuery事件模型

來源：程序員人生發布時間：2014-05-06 16:38:48 閱讀次數：4020次

jQuery事件模型的功能有：

提供建立事件處理程序的統一方法；

允許在每個元素上為每個時間類型建立多個處理程序；

采用標準的事件類型名稱，例如click或mouseover；

使用Event實例可用作處理程序的參數；

對Event實例的最常用的屬性進行規范化；

為取消事件和阻塞默認操作提供統一方法。

jQuery綁定事件處理程序：

bind()命令

$('img').bind('click',funciton(event){alert('Hi there');}); 該語句為頁面上的圖片綁定已提供的內聯函數，作為點擊事件處理程序。

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

<!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="http://www.jyygyx.com/uploads/Common/jquery-1.3.2.min.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="http://www.jyygyx.com/liehuo.net/images/liehuo2009/logo.gif"/><div id="console"></div></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

刪除事件處理程序unbind(event,listener),unbind(event)

從包裝集的所有元素中刪除可選的已傳遞參數所指定的事件處理程序。如果不提供參數，則從元素中刪除所有的監聽器(即事件處理程序)

起切換作用的監聽器toggle()

toggle(listenerOdd,listenerEven)把已傳遞函數建立為包裝集所有元素的一對click事件處理程序，每當觸發click事件就相互切換。

每當點擊事件發生時，調用互補的監聽器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>jQuery Toggle Command Example - Liehuo.Net</title><script type="text/javascript" src="http://www.jyygyx.com/uploads/Common/jquery-1.3.2.min.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="http://www.jyygyx.com/liehuo.net/images/liehuo2009/logo.gif"/></body></html><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

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

<!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="http://www.jyygyx.com/uploads/Common/jquery-1.3.2.min.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><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

作者博客：http://www.cnblogs.com/yangzhijia/

文章導讀：

jQuery學習1：認識和了解jQuery庫

jQuery學習2：選擇器的使用

jQuery學習3：操作元素屬性和特性

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生