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

在今天的網頁瀏覽器處理事件是有點困難的一部分，不同的瀏覽器以不同的方式處理事件。因此，要克服這些跨瀏覽器的問題，人們可以利用jQuery的事件來處理API。

jQuery是一個小的JavaScript庫，提供了廣大的API來處理不同的瀏覽器事件和效果和更大量。閱讀更多有關處理使用JavaScript瀏覽器的使用者介面效果。在本教學中，我們將探討不同的API jQuery來處理不同的瀏覽器事件。
Page Load事件
就緒（FN），
這是所有類型的事件，jQuery的支持的基礎上。你可能想要設定形式的焦點，當頁面被載入或做一些UI效果。

複製程式碼 程式碼如下:

$(document).ready(>

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

事件處理

事件處理 事件處理 綁定（類型，數據，FN），

您可能想要綁定一個處理一個或多個事件的任何元素（單擊/雙擊等）。使用此功能結合custome任何元素的事件處理程序。

複製程式碼


程式碼如下:


$("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");
});

觸發（事件，資料） 觸發每一個匹配的元素上的事件， 這也將導致瀏覽器具有相同的名稱（如果存在的話）要執行的預設操作。例如，透過觸發（）的功能也會導致瀏覽器提交表單的「提交」。返回綁定到事件的功能之一虛假的預設行為是可以預防的。

觸發的事件並不局限於基於瀏覽器的事件，你也可以自訂事件觸發綁定註冊。

複製程式碼


程式碼如下:


$("button:first"). () {
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); } 互動輔助活動

在今天的Web 2.0應用程序，用戶intraction處理是非常重要的。 jQuery提供了一些API，可以用來處理這些交互作用。懸停（多出）此功能提供了懸停功能，即當滑鼠遊標移動到一個匹配的元素，第一個指定的功能被解僱。當滑鼠移動的元素，第二個指定的功能火災。此外，檢查的地方看到，如果滑鼠仍然是在指定的元素（例如，一個div裡面的圖像），如果是這樣，它會繼續“徘徊”，並沒有遷出（一種常見的在使用mouseout事件處理程序）的錯誤。

複製程式碼


程式碼如下:

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

輔助其他活動 以下是功能，可用於處理不同類型的事件清單。 模糊（）

：觸發每一個匹配元素的blur事件。

複製程式碼
程式碼如下:


$("input").blur(function (blur(function (blur(function) {
$(this).next("span").css('display','inline').fadeOut(1000);
});

模糊（FN）

：每一個符合元素的blur事件中綁定一個處理函數。

[code] $("input").blur(function () { $(this).next("span").css('display','inline').fadeOut( 1000); }); （FN）

：每一個匹配元素的change事件中綁定一個功能。 複製程式碼 程式碼如下:

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

點選（FN）
：綁定到每一個符合元素的click事件的功能。

複製程式碼 程式碼如下:

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

雙擊（FN）
：觸發每一個匹配元素的DblClick事件。

複製程式碼 程式碼如下:

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

按鍵（FN）

>：每一個符合元素的keypress事件中綁定一個功能。




複製程式碼


程式碼如下:


$("input").keypress(function (ekeypress(function").keypress(function (ekeypress(function").keypress(function"). ) {
if (e.which == 32 || (65 || (97 var c = String.fromCharCode(e.which);
$("p").append($(""))
.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）
：綁定到每一個符合元素的mousedown事件的功能。

複製程式碼
程式碼如下:

$("p").mouseup(function() { $(this).append('Mouse up.'); }).mousedown(function(){ $ (this).append('Mouse down.'); });

滾動（FN ）

：每一個匹配元素的scroll事件中綁定一個處理函數。




複製程式碼

程式碼如下: $("p").clone().append (document.body); $("p").clone().appendTo(document.body); $("p").clone().appendTo(document.body); $(window).scroll(function () { $("span").css("display", "inline").fadeOut("slow"); });