1 . 綁定事件
語法 :
bind(type,data,fn)
描述 : 為每一個匹配的特定元素(像 click)綁定一個事件處理器函數.
type(String) : 事件類型
data(Object) : (可選)作為 event.data 屬性值傳遞給事件對象的額外數據對象/
fn(Function) : 綁定到每個匹配元素的事件上面的處理函數.
示例 :
當每個p標簽被點擊的時候,彈出器文本
$("p").bind("click",function(){
alert($(this).text() );
})
在事件處理前傳遞一些附加的數據.
function handler(event) { //event.data 可以獲取 bind()方法的第二個參數的數據 alert(event.data.foo) ; } $("p").bind("click", {foo: "bar"}, handler)
通過返回false來取消默認的行為並阻止事件的起泡.
$("form").bind("submit", finction() {return false; })
通過使用 preventDefault( ) 方法值取消默認的行為.
$("form").bind("submit", function(event){
event.preventDefault();
});
2 . 解除事件
語法 :
unbind(type,fn);
解釋 :
bind() 的反向操作,從每一個匹配元素中刪除綁定的事件.
如果沒有參數,則刪除綁定的事件.
如果把綁定時傳遞的處理函數作為第二個參數,則只有這個特定的事件處理函數被刪除.
type(String) : (可選),事件類型.
fn(Function) :(可選),要從每個匹配元素的事件中反綁定的事件處理函數.
示例 :
把所有段落的所有事件取消綁定
$("p").unbind()
將段落中的 click 事件取消綁定
$("p").unbind("click")
刪除特定函數的綁定,將函數作為第二個參數傳入.
var foo = function () { // 綁定事件 和 解除事件的事件處理函數 }; $("p").bind("click mouseenter", foo); // 給p段落綁定 click.mouseenter事件 $("p").unbind("click", foo); 只解除了p段落標簽的 click 事件
3 . 自定義事件
語法 :
trigger(type,data);
解釋 : 在每一個匹配的元素上觸發某類事件,它觸發的是由 bind() 注冊的自定義事件.
type(String) : 要觸發的事件類型.
data(Array) : (可選)傳遞給事件處理函數的附加參數.
示例 :
給一個按鈕添加自定義事件
$("button").bind('myClick',function(ev,a,b)) {
// 給按鈕 button 添加自定義事件 myClick 事件
}
然后通過 trigger() 觸發自定義事件
$('button').trigger('myClick',[1,2])
4 . 一次性事件
語法 :
one(type,data,fn)
解釋 : 為每一個匹配元素的特定事件(比如 click ) 綁定一個一次性的事件處理函數,在每個對象上,這個事件處理函數只會被執行一次,其他規則與 bind() 函數相同.
type(String) : 事件類型
data(Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象.
fn(Function) : 綁定到每個匹配元素的事件上面的處理函數.
示例 :
當所有段落被第一個點擊的時候,顯示所其文本.
$("p").one("click", function() {
// 只有第一次點擊的時候才會觸發,再次點擊不會觸發了.
alert($(this).text() );
});
5 . 單雙擊事件
在點擊按鈕的時候,會出現雙擊的時候會有2次單擊事件的發生.
比如 :
解決 ;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button>按鈕</button> <script src="jquery.js"></script> <script> $(function () { // var time = null; // // $('div').click(function () { // // 取消上次延時未執行的方法 // clearTimeout(time); // //執行延時 // time = setTimeout(function(){ // //do function在此處寫單擊事件要執行的代碼 // },300); // }); // // $('div').dblclick(functin ({ // // 取消上次延時未執行的方法 // clearTimeout(time); // //雙擊事件的執行代碼 // }); // 單雙擊 的時間 間隔 是300ms // 如果解決 單雙擊沖突 // 先做兩次單擊 一次雙擊 中間間隔 小於300ms // 定義 timer是null, var timer = null; $('button').click(function(event) { // console.log(timer); //清楚定時器,用定時器的時候要先清除定時器.當我們雙擊的時候,在點擊第一下的時候,時間沒到300ms, // 所以不會走 timer = setTimeout(function() 函數.第二下點擊的時候清除的是第一下點擊的定時器,所以第二次 // 沒有到300ms.所以顯示雙擊,在雙擊的時候清除第二次點擊的定時器. clearTimeout(timer); // 定時器 300ms 一次性定時器 timer = setTimeout(function(){ console.log('單機了'); }, 300); }); $('button').dblclick(function(event) { // console.log(timer); clearTimeout(timer); console.log('雙機了'); }); }) </script> </body> </html>
