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