首頁 >web前端 >js教程 >關於jQuery事件處理的特性(事件命名機制)

關於jQuery事件處理的特性(事件命名機制)

不言
不言原創
2018-07-02 14:41:301369瀏覽

這篇文章主要介紹jquery事件處理的一些特徵,jquery事件命名機制的相關知識,介紹的非常詳細,具有參考借鑒價值,有興趣的朋友一起看吧

##JQuery中的bind()和unbind(),提供了事件的綁定和取消機制,既可以綁定html預設支援的事件,也能夠綁定自訂的事件。 JQuery支援自訂事件,這顯然為程式設計帶來了極大的靈活性。下面就一起學習下,jquery事件處理的一些特性。


1、JQuery中事件可以重複綁定,不會覆寫。

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

當點擊button1的時候,這2個事件處理函數都會觸發。也許你會說,上面綁定的是不同的匿名函數,佔用不同的記憶體空間。的確是這樣的,不過就算是同一個處理函數,依然存在重複綁定問題。當button1被點擊的時候,下面的事件處理函數同樣會被呼叫2次。

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

絕大部分場景下,事件處理函數都只需要綁定一次,所以一定要注意JQuery事件的重複綁定這個特性,事件多次執行,就算沒有bug,終究也不是好的做法。


2、使用bind一次綁定多個事件和處理函數。


如果多個事件需要註冊相同的處理函數,那麼可以使用如下程式碼進行簡化(事件名稱使用空格分隔):

$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});

如果每個事件的處理函數不同,那麼可以使用如下的方式(json物件):

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

3、傳遞event物件和自訂參數。


#一般來說,使用jquery的時候我們很少需要event對象,也不需要傳遞自訂的參數給事件處理函數。不過如果我們真的需要這麼做,JQuery也是支持的。

$("#button1").bind("click", {name:"aty"}, function(eventObject){ 
alert("params=" + eventObject.data.name); 
});

eventObject很像IE和FF中的event對象,透過它能夠取得事件發生時更詳細的資訊。如果我們指定了自訂的參數,那麼JQuery會將它放在事件物件的data屬性中,也就是透過eventObject.data就能夠拿到我們傳遞的參數值。

4、事件取消的三種形式。


unbind用來取消先前透過bind綁定的事件處理函數,總的來說有三種形式:取消所有事件、取消某種類型的事件、取消某種類型下的某個事件處理函數。


假如我們給button1綁定了click、mouseup、mousedown事件,其中click事件綁定2個處理函數。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

$("#button1").unbind():取消button1上所有已經綁定的事件處理函數。


$("#button1").unbind("click"):只取消button1上綁定的click類型的事件處理函數。


這2種形式很好理解,也是我們平常程式設計最常用的做法。上面的程式碼我們註冊了2個click類型的事件處理函數,如果要取消第2個click事件處理函數,第1個保留,該怎麼辦呢?由於我們註冊的是匿名函數,所以沒有辦法實作。下面的程式碼是錯誤的,達不到預期的效果。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

雖然bind和unbind是用的匿名函數功能是相同的,但是這2個函數不是同一個javascript對象,因為它們佔用不同的記憶體空間。聰明的你可能已經想到:如果bind和unbind使用不同函數,是不是就能達到目的了?確實是這樣,下面的程式碼是正確的。

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

這就是unbind的第三種使用形式,可以看到這種做法非常的不好,因為這種做法不允許使用匿名函數,我們不得不暴露全局的函數(至少要求unbind的時候能夠看得見)。 JQuery提供了事件命名空間機制,個人感覺就是為了解決這個問題。


5、事件命名空間。


上面已經提到,事件命名空間就是為了解決unbind第三種形式遇到的問題。以下是JQuery官方API文檔的解釋:


Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.


所謂事件命名空間,其實就是在事件類型後面以點語法附加一個別名,以便引用事件,如”click.a”,其中”a”就是click當前事件類型的別名,即事件命名空間。由於點號是用來定義命名空間的,所以如果我們使用了自訂事件,那麼事件名稱一定不要包含點號,否則會引起意想不到的問題。這種問題,沒有嘗試的必要,特殊字元能不用則不用,否則是給自己找麻煩。

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

可以看到:使用命名空間,能夠以更優雅的方式取消某種事件類型下的某個事件處理函數。這裡值得一提:使用了命名空間與unbind並不衝突,上面三種形式的unbind依然可以正常使用。 $("#button1").unbind()依然可以取消button1上的所有事件,$("#button1").unbind("click")依然可以取消所有的click事件。這種相容性設計是非常棒的。


使用命名空间还要1个好处:能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

这段代码我们使用2个命名空间a和b,如果我只想要保留第2个click事件处理函数,其余的全部删除。我们可以有2种方式达到目的:

方式1:

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

方式2:

$("#button1").unbind(".a");

很显然方式2更加简单,更加技巧性,虽然代码更不容易看懂,不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码,只有2种情况:要么别人不行,代码写的烂;要么自己不行,知识懂的少。如果不熟悉某种语言,又怎能用它写好代码呢?所以,代码质量、开发效率,和个人技能水平,团队水平紧密相关。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jquery获取url参数及url加参数的方法

Jquery ajax技术实现间隔N秒向某页面传值

以上是關於jQuery事件處理的特性(事件命名機制)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn