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對象每次點擊后依次調用函數。如果調用完了再從第一個開始調用.
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
