jquery第十五課,jquery對象綁定事件,事件處理,事件委派,以及事件的切換
參考共用代碼
<!doctype html public -//w3c//dtd html 4.0 transitional//en>
<html><head><title>jquery事件操作</title>
<script language=javascript src=jquery-1.4.2.min.js></script>
<style>
.www {height:100px;background-color:#ff0;}
.forasp {height:50px;}
.cn {height:80px;}
</style>
<script language=javascript>
$(function(){
<!--jquery文檔處理代碼區(qū)-->
});
</script>
<body>
<div id=1 class=www>jquery</div>
<div id=2>事件</div>
<div id=3>處理</div>
</body>
</html>
1.頁面載入,也就是dom中的onload.當(dāng)dom載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。
jquery中頁面載入已經(jīng)用了很多次了$(function(){code}); 這個是jquery載入的簡寫形式,下面說一下jquery頁面載入代碼.
全寫代碼:$(document).ready(function(){code});
使用 $(document).ready() 的簡寫，同時內(nèi)部的 jquery 代碼依然使用 $ 作為別名，而不管全局的 $ 為何。
簡寫形式:jquery(function(){code});或者$(function(){code});
2.jquery事件處理
(1).bind(type,[data],fn);用來對jquery元素進(jìn)行事件的綁定.我們逐步來說.
第一種簡單綁定: $(#1).bind(click,function(){alert(jquery在id=1綁定的click事件已經(jīng)觸發(fā))});
獲取id為1的jquery對象,然后綁定click事件,當(dāng)點(diǎn)擊(觸發(fā)click)事件,則彈出jquery在id=1綁定的click事件已經(jīng)觸發(fā)對話框.
第二種多事件綁定 $(#2).bind(mouseover mouseout,function(){if(event.type=='mouseover'){alert(觸發(fā)mouseover事件);}else if(event.type==mouseout){alert(觸發(fā)mouseout事件);}});
當(dāng)鼠標(biāo)移動到id=2層上觸發(fā)mouseover事件,當(dāng)鼠標(biāo)移動到層外面時,觸發(fā)mouseout事件.
第三種是第二種延續(xù),是不同事件調(diào)用不同函數(shù)的方法
$(#3).bind({mouseover:function(){alert(jquery觸發(fā)mouseover事件);},mouseout:function(){alert(jquery觸發(fā)mouseout事件);}}); 這樣就不用判斷事件類型來調(diào)用不同函數(shù).
第四種是傳遞了[date]參數(shù)的.
var temp=jquery參數(shù)操作;
$(#1).bind(click,{canshu:temp},function(event){alert(jquery傳遞參數(shù)事件:+event.data.canshu);}); 這樣就可以傳遞參數(shù),也可多個參數(shù),用,隔開
(2).one(type,[data],fn); 只調(diào)用一次的事件處理.
$(#2).one('click',function({alert('僅處理一次的事件');}));當(dāng)?shù)谝淮吸c(diǎn)擊可以用,以后再點(diǎn)擊就已經(jīng)消失了,其他多事件綁定跟.bind一樣的.
(3).trigger(type,[data]);在每一個匹配的元素上觸發(fā)某類事件。也就是觸發(fā)事件
舉例:$(#1).trigger(click); 當(dāng)jquery運(yùn)行到這里則id=1的層觸發(fā)了click事件,用jquery代替鼠標(biāo)等.
如果有參數(shù)時,$(#1).bind('click',function(event,canshu1,canshu2){});
執(zhí)行$(#1).trrgger(click,['參數(shù)1','參數(shù)2']);
(4).triggerhandler(type,[data]);這個特別的方法將會觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會執(zhí)行瀏覽器默認(rèn)動作，也不會產(chǎn)生事件冒泡。
這個方法的行為表現(xiàn)與trigger類似，但有以下三個主要區(qū)別：
* 第一，他不會觸發(fā)瀏覽器默認(rèn)事件。 http://%77%77%77%2e%66%6f%72%61%73%70%2e%63%6e
* 第二，只觸發(fā)jquery對象集合中第一個元素的事件處理函數(shù)。
* 第三，這個方法的返回的是事件處理函數(shù)的返回值，而不是據(jù)有可鏈性的jquery對象。此外，如果最開始的jquery對象集合為空，則這個方法返回 undefined 。
使用方法跟trigger一樣.
(5).unbind([type],[fn]);bind()的反向操作，從每一個匹配的元素中刪除綁定的事件.
jquery舉例:$(#1).unbind();刪除了所有綁定事件$(#1).unbind(click);刪除了click事件,$(#1).unbind(click,functionname);刪除了綁定的click事件中的functionname函數(shù).
3.jquery事件委派
(1).live(type,[data],fn);jquery 給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進(jìn)來的也有效.這個的用法跟bind一樣.不同的是,新加上來的匹配元素,也會加上事件.
$(.www).live(click,function(){alert(測試新添加的元素);});
$(body).append(<div class='www'>新添加元素</div>);
雖然綁定事件實(shí)在前面發(fā)生,但是下面的新的div也有click事件.
(2)die([type],[fn]);此方法與live正好完全相反。如果不帶參數(shù)，則所有綁定的live事件都會被移除。你可以解除用live注冊的自定義事件。如果提供了type參數(shù)，那么會移除對應(yīng)的live事件。如果也指定了第二個參數(shù)function,則只移出指定的事件處理函數(shù)。
4.事件的切換.
(1).hover(overfunction,outfunction);一個模仿懸停事件（鼠標(biāo)移動到一個對象上面及移出這個對象）的方法。這是一個自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。鼠標(biāo)在上面時觸發(fā)overfunction事件,如果移出則觸發(fā)outfunction事件
(2).toggle(fn, fn2, [fn3, fn4, ...]);對jquery對象每次點(diǎn)擊后依次調(diào)用函數(shù)。如果調(diào)用完了再從第一個開始調(diào)用.