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載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。
jquery中頁面載入已經(jīng)用了很多次了$(function(){code}); 這個(gè)是jquery載入的簡寫形式,下面說一下jquery頁面載入代碼.
全寫代碼:$(document).ready(function(){code});
使用 $(document).ready() 的簡寫，同時(shí)內(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)移動到層外面時(shí),觸發(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ù),也可多個(gè)參數(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]);在每一個(gè)匹配的元素上觸發(fā)某類事件。也就是觸發(fā)事件
舉例:$("#1").trigger("click"); 當(dāng)jquery運(yùn)行到這里則id=1的層觸發(fā)了click事件,用jquery代替鼠標(biāo)等.
如果有參數(shù)時(shí),$("#1").bind('click',function(event,canshu1,canshu2){});
執(zhí)行$("#1").trrgger("click",['參數(shù)1','參數(shù)2']);
(4).triggerHandler(type,[data]);這個(gè)特別的方法將會觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會執(zhí)行瀏覽器默認(rèn)動作，也不會產(chǎn)生事件冒泡。
這個(gè)方法的行為表現(xiàn)與trigger類似，但有以下三個(gè)主要區(qū)別：
* 第一，他不會觸發(fā)瀏覽器默認(rèn)事件。 http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E
* 第二，只觸發(fā)jQuery對象集合中第一個(gè)元素的事件處理函數(shù)。
* 第三，這個(gè)方法的返回的是事件處理函數(shù)的返回值，而不是據(jù)有可鏈性的jQuery對象。此外，如果最開始的jQuery對象集合為空，則這個(gè)方法返回 undefined 。
使用方法跟trigger一樣.
(5).unbind([type],[fn]);bind()的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件.
jquery舉例:$("#1").unbind();刪除了所有綁定事件$("#1").unbind("click");刪除了click事件,$("#1").unbind("click",functionname);刪除了綁定的click事件中的functionname函數(shù).
3.jQuery事件委派
(1).live(type,[data],fn);jQuery 給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來的也有效.這個(gè)的用法跟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事件。如果也指定了第二個(gè)參數(shù)function,則只移出指定的事件處理函數(shù)。
4.事件的切換.
(1).hover(overfunction,outfunction);一個(gè)模仿懸停事件（鼠標(biāo)移動到一個(gè)對象上面及移出這個(gè)對象）的方法。這是一個(gè)自定義的方法，它為頻繁使用的任務(wù)提供了一種“保持在其中”的狀態(tài)。鼠標(biāo)在上面時(shí)觸發(fā)overfunction事件,如果移出則觸發(fā)outfunction事件
(2).toggle(fn, fn2, [fn3, fn4, ...]);對jquery對象每次點(diǎn)擊后依次調(diào)用函數(shù)。如果調(diào)用完了再從第一個(gè)開始調(diào)用.
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試