我要评论在今天的网络处理事件是有点困难的一部分，不同的浏览器以不同的方式处理事件。因此，要克服这些跨浏览器的问题，人们可以利用jquery的事件处理api。
jquery是一个小的javascript库，提供了广大的api来处理不同的浏览器事件和效果和更大量。更多有关处理使用javascript浏览器的用户界面效果。在本教程中，我们将探讨不同的api jquery来处理不同的浏览器事件。
page load事件
就绪（fn），
这是所有类型的事件，jquery的支持的基础上。你可能想设置形式的焦点，当页面被载入或做一些ui效果。
. 代码如下:
$(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").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);
}
交互辅助活动
在今天的web 2.0应用程序，用户intraction处理是非常重要的。jquery提供了一些api，可以用来处理这些相互作用。悬停（多出）此功能提供了悬停功能，即当鼠标光标移动到一个匹配的元素，第一个指定的功能被解雇。当鼠标移动的元素，第二个指定的功能火灾。此外，检查的地方看到，如果鼠标仍然是在指定的元素（例如，一个p里面的图像），如果是这样，它会继续“徘徊”，并没有迁出（一种常见的在使用mouut事件处理程序）的错误。
. 代码如下:
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
辅助其他活动
以下是功能，可用于处理不同类型的事件清单。
模糊（）
：触发每一个匹配元素的blur事件。
. 代码如下:
$("input").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() + " ";
});
$("p").text(str);
})
.change();
点击（fn）
：绑定到每一个匹配元素的click事件的功能。
. 代码如下:
$("p").click(function () {
$(this).slideup();
});
$("p").hover(function () {
$(this).addclass("hilite");
}, function () {
$(this).removeclass("hilite");
});
双击（fn）
：触发每一个匹配元素的dblclick事件。
. 代码如下:
var pdbl = $("p:first");
pdbl.dblclick(function () {
pdbl.toggleclass('dbl');
});
按键（fn）
：每一个匹配元素的keypress事件中绑定一个功能。
. 代码如下:
$("input").keypress(function (e) {
if (e.which == 32 || (65 <= e.which & 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();
}
$("p").text(e.which);
});
的mousedown（fn）
：绑定到每一个匹配元素的mousedown事件的功能。
. 代码如下:
$("p").mouseup(function(){
$(this).append('<span style="color:#f00;">mouse up.</span>');
}).mousedown(function(){
$(this).append('<span style="color:#00f;">mouse down.</span>');
});
滚动（fn）
：每一个匹配元素的scroll事件中绑定一个处理函数。
. 代码如下:
$("p").clone().appendto(document.body);
$("p").clone().appendto(document.body);
$("p").clone().appendto(document.body);
$(window).scroll(function () {
$("span").css("display", "inline").fadeout("slow");
});
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论