事件是腳本編程的靈魂,本篇來(lái)介紹jQuery中的事件處理及事件對(duì)象. 事件與事件對(duì)象 首先,我們來(lái)看一下經(jīng)常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="showMsg();" />
<script type="text/javascript">
function showMsg() {
alert("msg is showing!");
}
</script> 我們最常用的是為元素添加onclick元素屬性的方式來(lái)添加事件.現(xiàn)在,我們來(lái)看另一種添加事件的方式,通過(guò)修改dom屬性的方式來(lái)添加事件: <input type="button" id="btn2" value="click me!" />
<script type="text/javascript">
function showMsg() {
alert("msg is showing!");
}
$(function () {
document.getElementById("btn2").onclick=showMsg;
});
</script>
添加元素屬性和修改dom屬性這兩種方法的效果相同,但不等效. $(function () {
//等效于<input type="button" id="btn2" value="click me!" onclick="alert('msg is showing!')" />
document.getElementById("btn2").onclick = showMsg;
});
//相當(dāng)于:
// document.getElementById("btn").onclick=function(){
// alert("msg is showing!");
// }
<input type="button" id="btn" value="click me!" onclick="showMsg();" />
這兩種方式的弊端是: - 只能為一個(gè)事件添加一個(gè)事件處理函數(shù).使用賦值符會(huì)將前面的函數(shù)沖掉.
- 在事件處理函數(shù)中,獲取事件對(duì)象的方式不同.
- 添加多播委托的函數(shù)在不同瀏覽器中不同.
多播委托指:在ie中通過(guò)dom.attachEvent,在firefox中通過(guò)dom.addEventListener方式來(lái)添加事件.
所以,我們應(yīng)該摒棄在通過(guò)修改元素屬性和通過(guò)對(duì)Dom屬性修改的方式添加事件,而應(yīng)該使用多播事件的委托方式添加事件處理函數(shù). jQuery中的事件使用jQuery事件處理函數(shù)的好處是: 1.添加的是多播事件委托 我們可以為dom的click事件添加一個(gè)函數(shù)后,再次添加一個(gè)函數(shù).
2.統(tǒng)一了事件名稱 添加多播委托時(shí),ie在事件名稱前加了"on",而firefox則直接使用事件名稱
3.可以將對(duì)象行為全部用腳本控制 使用腳本控制元素行為,使用HTML標(biāo)簽控制元素內(nèi)容,用CSS控制元素樣式,從而達(dá)到了元素的行為、內(nèi)容、樣式分離的狀態(tài).
下面是基礎(chǔ)的jQuery事件處理函數(shù): | 函數(shù)名 | 說(shuō)明 | 例子 | | bind(type,[data],fn) | 為匹配元素的指定事件添加事件處理函數(shù)
data為可選參數(shù),data為數(shù)組 | function secondClick() {
alert("second click!");
}
$("#dv1").bind("click", secondClick); | | one(type,[data],fn) | 為匹配元素的指定事件添加一次性事件處理函數(shù)
通過(guò)fn函數(shù)的參數(shù)的data屬性可獲取值 | //數(shù)據(jù)通過(guò)fn的參數(shù)傳遞過(guò)去
// 例如fn的參數(shù)是e,則在fn內(nèi)部可以通過(guò)e.data獲取設(shè)定的參數(shù)
$("#dv1").one("click", { name: "zzz", age: 20 }, function (e) {
alert(e.data.name);
}); | | trigger(event,[data]) | 在匹配的元素上觸發(fā)某類事件
此函數(shù)會(huì)導(dǎo)致瀏覽器同名的默認(rèn)行為被執(zhí)行
data為可選參數(shù),data為數(shù)組 | 見(jiàn)下例 | | triggerHandler(event,[data]) | 觸發(fā)指定的事件類型上所綁定的處理函數(shù)
不會(huì)執(zhí)行瀏覽器默認(rèn)行為 | 見(jiàn)下例 | | unbind(type,fn) | 為匹配的元素解除指定事件的處理函數(shù) | //如果沒(méi)有參數(shù),則解除匹配元素的所有事件處理函數(shù)
$("#dv1").unbind();
//如果提夠了事件類型參數(shù),則只刪除該事件類型的處理函數(shù)
$("#dv1").unbind("click");
//如果把綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)傳遞,則只刪除該處理函數(shù)
$("#dv1").unbind("click", secondClick); |
注意: 我們可以為同一個(gè)事件綁定多個(gè)事件處理函數(shù),代碼如下: $("#dv1").bind("click", function () { alert("first click!"); })
.bind("click", function () { alert("second click!"); });
trigger和triggerHandler函數(shù)舉例:
<script type="text/javascript">
$(function () {
//客戶端:
// alert("client clicked!");
//服務(wù)器端:
// 返回from server
$("#button").click(function () {
alert("client clicked!");
});
//trigger觸發(fā)了id為button的客戶端事件,并使其提交
$("#trigger").click(function () {
$("#button").trigger("click");
});
//triggerHandler觸發(fā)了id為button的客戶端處理函數(shù),但并不使其提交,觸發(fā)服務(wù)器端事件.
//即,triggerHandler只觸發(fā)了id為button的click事件處理函數(shù)
// function () {
// $("#button").triggerHandler("click");
// }
$("#triggerHandler").click(function () {
$("#button").triggerHandler("click");
});
});
</script>
<form id="form1" runat="server">
<input type="button" id="trigger" value="trigger" />
<input type="button" id="triggerHandler" value="triggerHandler" />
<asp:Button runat="server" ID="button" Text="click me!" onclick="button_Click" />
</form>
那么在使用trigger和triggerHandler函數(shù)時(shí),如何傳遞參數(shù)呢? $(function () {
//click快捷事件綁定的參數(shù)的第一個(gè)參數(shù)為事件對(duì)象
// 第二個(gè)參數(shù)為數(shù)據(jù)
$("#button").click(function (event, msg) {
alert(msg);
});
$("#trigger").click(function () {
$("#button").trigger("click", ["client!"]);
});
$("#triggerHandler").click(function () {
$("#button").triggerHandler("click", ["client!"]);
});
});
快捷事件我們可以使用事件處理函數(shù)完成對(duì)象事件的幾乎所有操作,但jQuery提供了更加簡(jiǎn)單的辦法來(lái)封裝事件. 在jQuery中,單擊事件對(duì)應(yīng)著的兩個(gè)方法是click()和click(fn),分別用來(lái)觸發(fā)單擊事件和設(shè)置單擊事件.
//設(shè)置click事件
$("#dv1").click(function () { alert("click!"); });
//click(fn)方法等效于
$("#dv1").bind("click", function () { alert("click!"); })
//觸發(fā)click事件
//$("#dv1").click();
//click()方法等效于
// 注意此處:等效于trigger,而不是triggerHandler
$("#dv1").trigger("click");
jQuery有許多快捷事件,具體參見(jiàn)幫助.
事件委派1、live(type,fn) 說(shuō)明: 給所有當(dāng)前以及將來(lái)可能匹配的元素綁定一個(gè)事件處理函數(shù)
與bind方法的區(qū)別: 用live來(lái)綁定事件會(huì)給當(dāng)前以及未來(lái)可能匹配的元素綁定事件處理函數(shù).而bind只為當(dāng)前匹配的元素綁定事件處理函數(shù).
2、die([type],[fn]) 說(shuō)明: 移除使用live函數(shù)綁定的事件. 如果指定了type和fn參數(shù),則移除指定type的fn事件處理函數(shù) 如果指定了type參數(shù),則移除指定type的所有事件處理函數(shù) 如果沒(méi)有指定函數(shù),則移除匹配元素的所有事件處理函數(shù)
例子: $(function () {
//為所有的段落添加一個(gè)click事件
$("p").live("click", function () {
alert(this.innerHTML);
});
//添加一個(gè)段落
$("#add").click(function(){
$("<p/>").html(new Date().getTime()).insertAfter($("p:last"));
});
//刪除段落的click事件處理函數(shù)
$("#remove").click(function(){
$("p").die();
});
});
事件切換 事件切換方法有以下兩個(gè): | 函數(shù)名 | 說(shuō)明 | | hover(over,out) | 一個(gè)模仿懸停事件的方法.
over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)
out:鼠標(biāo)移出元素要觸發(fā)的函數(shù) | | toggle(fn,fn) | 每次點(diǎn)擊后,依次觸發(fā)函數(shù)
如果點(diǎn)擊了一個(gè)匹配的元素后,則執(zhí)行指定的第一個(gè)事件處理函數(shù);
當(dāng)再次點(diǎn)擊該元素時(shí),會(huì)執(zhí)行下一個(gè)事件處理函數(shù);
如果有更多函數(shù),則依次觸發(fā),直到最后一個(gè),然后循環(huán)調(diào)用. |
hover(over,out)函數(shù)舉例： $("#menu").hover(function () { $("#submenu").css("display", "block"); },
function () { $("#submenu").css("display", "none"); }
);
toggle(fn,fn)函數(shù)舉例： $("#menu").toggle(function () { $("#menu").css("color", "red"); },
function () { $("#menu").css("color", "green"); },
function () { $("#menu").css("color", "blue"); }
);
使用jQuery事件對(duì)象jQuery統(tǒng)一了事件對(duì)象,當(dāng)綁定事件處理函數(shù)時(shí),會(huì)將jQuery格式化后的事件對(duì)象作為唯一參數(shù)傳入: $("#dv1").bind("click", { foo: "ooo" }, function (e) {
alert(e.data.foo)
});
在上例中,{foo:"ooo"}是通過(guò)e.data傳遞進(jìn)事件處理函數(shù)內(nèi)部的.現(xiàn)在我們來(lái)看看e有哪些常用的屬性和方法.
jQuery事件對(duì)象的屬性,屬性是隨著事件類型而變化的,例如對(duì)于click事件,則么有currentTarget屬性,而對(duì)于mouseover事件,則擁有該參數(shù).下表僅列了部分屬性: | 屬性名 | 說(shuō)明 | | currentTarget | 冒泡前的當(dāng)前事件的Dom對(duì)象,等同于this | | data | 事件調(diào)用時(shí)傳遞的數(shù)據(jù) | | result | 上一個(gè)事件處理函數(shù)返回的值 | | target | 獲取事件觸發(fā)者的Dom對(duì)象 | | timeStamp | 事件發(fā)生的時(shí)間戳 | | type | 事件類型 |
下圖列了大部分常用的屬性,可大致了解,隨用隨看. 
jQuery事件對(duì)象的函數(shù): | 函數(shù)名 | 說(shuō)明 | 例子 | | preventDefault() | 取消元素事件的默認(rèn)動(dòng)作
例如:
對(duì)于超級(jí)鏈接a來(lái)說(shuō),有href屬性,那么在點(diǎn)擊a的時(shí)候就會(huì)導(dǎo)航至href所指向位置.我們?cè)賏的click事件中,調(diào)用本方法,就不會(huì)導(dǎo)航到指定位置 | //取消事件默認(rèn)動(dòng)作
$("a").bind("click", function (e) {
e.preventDefault();
}); | | isDefaultPrevented() | 是否調(diào)用過(guò)preventDefault()方法 | | | stopPropagation() | 取消事件冒泡 | | | isPropagationStopped() | 是否調(diào)用過(guò)stopPropagation()方法 | | | stopImmediatePropagation() | 取消執(zhí)行該元素該事件處理函數(shù)的后續(xù)事件處理函數(shù),
并取消事件冒泡 | $("a").bind("click", function (e) {
e.stopImmediatePropagation();
});
//不會(huì)被執(zhí)行到
$("a").click(function () {
alert("我被點(diǎn)擊了");
}); | | isImmediatePropagationStopped() | 是否調(diào)用過(guò)stopImmediatePropagation()方法 | $("a").bind("click", function (e) {
e.stopImmediatePropagation();
alert(e.isImmediatePropagationStopped());
|
|
