快捷導(dǎo)航

不同的jQuery API來處理不同的瀏覽器事件

更新時(shí)間：2012年12月09日 18:03:01 作者：

我們將探討不同的API jQuery來處理不同的瀏覽器事件,需要的朋友可以參考下

在今天的網(wǎng)絡(luò)瀏覽器處理事件是有點(diǎn)困難的一部分，不同的瀏覽器以不同的方式處理事件。因此，要克服這些跨瀏覽器的問題，人們可以利用jQuery的事件處理API。

jQuery是一個(gè)小的JavaScript庫，提供了廣大的API來處理不同的瀏覽器事件和效果和更大量。閱讀更多有關(guān)處理使用JavaScript瀏覽器的用戶界面效果。在本教程中，我們將探討不同的API jQuery來處理不同的瀏覽器事件。
Page Load事件
就緒（FN），
這是所有類型的事件，jQuery的支持的基礎(chǔ)上。你可能想設(shè)置形式的焦點(diǎn)，當(dāng)頁面被載入或做一些UI效果。

復(fù)制代碼代碼如下:

 
$(document).ready(function () { 
$("p").text("The DOM is now loaded and can be manipulated."); 
}); 

事件處理
綁定（類型，數(shù)據(jù)，F(xiàn)N），
您可能要綁定一個(gè)處理一個(gè)或多個(gè)事件的任何元素（單擊/雙擊等）。使用此功能結(jié)合custome任何元素的事件處理程序。

復(fù)制代碼代碼如下:

 
$("p").bind("click", function(e) { 
var str = "( " + e.pageX + ", " + e.pageY + " )"; 
$("span").text("Click happened! " + str); 
}); 
$("p").bind("dblclick", function() { 
$("span").text("Double-click happened in " + this.tagName); 
}); 
$("p").bind("mouseenter mouseleave", function(e) { 
$(this).toggleClass("over"); 
}); 

觸發(fā)（事件，資料）
觸發(fā)每一個(gè)匹配的元素上的事件，
這也將導(dǎo)致瀏覽器具有相同的名稱（如果存在的話）要執(zhí)行的默認(rèn)操作。例如，通過觸發(fā)（）的功能也將導(dǎo)致瀏覽器提交表單的“提交”。返回綁定到事件的職能之一虛假的默認(rèn)行為是可以預(yù)防的。
觸發(fā)的事件并不局限于基于瀏覽器的事件，你也可以自定義事件觸發(fā)綁定注冊(cè)。

復(fù)制代碼代碼如下:

 
$("button:first").click(function () { 
update($("span:first")); 
}); 
$("button:last").click(function () { 
$("button:first").trigger('click'); 
update($("span:last")); 
}); 
function update(j) { 
var n = parseInt(j.text(), 10); 
j.text(n + 1); 
} 

交互輔助活動(dòng)
在今天的Web 2.0應(yīng)用程序，用戶intraction處理是非常重要的。jQuery提供了一些API，可以用來處理這些相互作用。懸停（多出）此功能提供了懸停功能，即當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到一個(gè)匹配的元素，第一個(gè)指定的功能被解雇。當(dāng)鼠標(biāo)移動(dòng)的元素，第二個(gè)指定的功能火災(zāi)。此外，檢查的地方看到，如果鼠標(biāo)仍然是在指定的元素（例如，一個(gè)div里面的圖像），如果是這樣，它會(huì)繼續(xù)“徘徊”，并沒有遷出（一種常見的在使用mouseout事件處理程序）的錯(cuò)誤。

復(fù)制代碼代碼如下:

 
$("li").hover( 
function () { 
$(this).append($("<span> ***</span>")); 
}, 
function () { 
$(this).find("span:last").remove(); 
} 
); 

輔助其他活動(dòng)
以下是功能，可用于處理不同類型的事件清單。
模糊（）
：觸發(fā)每一個(gè)匹配元素的blur事件。

復(fù)制代碼代碼如下:

 
$("input").blur(function () { 
$(this).next("span").css('display','inline').fadeOut(1000); 
}); 
模糊（FN） 
：每一個(gè)匹配元素的blur事件中綁定一個(gè)處理函數(shù)。 
[code] 
$("input").blur(function () { 
$(this).next("span").css('display','inline').fadeOut(1000); 
}); 

（FN）
：每一個(gè)匹配元素的change事件中綁定一個(gè)功能。

復(fù)制代碼代碼如下:

 
$("select").change(function () { 
var str = ""; 
$("select option:selected").each(function () { 
str += $(this).text() + " "; 
}); 
$("div").text(str); 
}) 
.change(); 

點(diǎn)擊（FN）
：綁定到每一個(gè)匹配元素的click事件的功能。

復(fù)制代碼代碼如下:

 
$("p").click(function () { 
$(this).slideUp(); 
}); 
$("p").hover(function () { 
$(this).addClass("hilite"); 
}, function () { 
$(this).removeClass("hilite"); 
}); 

雙擊（FN）
：觸發(fā)每一個(gè)匹配元素的DblClick事件。

復(fù)制代碼代碼如下:

 
var divdbl = $("div:first"); 
divdbl.dblclick(function () { 
divdbl.toggleClass('dbl'); 
}); 

按鍵（FN）
：每一個(gè)匹配元素的keypress事件中綁定一個(gè)功能。

復(fù)制代碼代碼如下:

 
$("input").keypress(function (e) { 
if (e.which == 32 || (65 <= e.which &amp; e.which <= 65 + 25) 
|| (97 <= e.which && e.which <= 97 + 25)) { 
var c = String.fromCharCode(e.which); 
$("p").append($("<span/>")) 
.children(":last") 
.append(document.createTextNode(c)); 
} else if (e.which == 8) { 
// backspace in IE only be on keydown 
$("p").children(":last").remove(); 
} 
$("div").text(e.which); 
}); 

的mousedown（FN）
：綁定到每一個(gè)匹配元素的mousedown事件的功能。

復(fù)制代碼代碼如下:

 
$("p").mouseup(function(){ 
$(this).append('<span style="color:#F00;">Mouse up.</span>'); 
}).mousedown(function(){ 
$(this).append('<span style="color:#00F;">Mouse down.</span>'); 
}); 

滾動(dòng)（FN）
：每一個(gè)匹配元素的scroll事件中綁定一個(gè)處理函數(shù)。

復(fù)制代碼代碼如下:

 
$("p").clone().appendTo(document.body); 
$("p").clone().appendTo(document.body); 
$("p").clone().appendTo(document.body); 
$(window).scroll(function () { 
$("span").css("display", "inline").fadeOut("slow"); 
}); 

您可能感興趣的文章: