不同的jQuery API来处理不同的浏览器事件

162 阅读 0 评论 107 点赞

我是靠谱客的博主单纯犀牛，最近开发中收集的这篇文章主要介绍不同的jQuery API来处理不同的浏览器事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在今天的网络浏览器处理事件是有点困难的一部分，不同的浏览器以不同的方式处理事件。因此，要克服这些跨浏览器的问题，人们可以利用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，可以用来处理这些相互作用。悬停（多出）此功能提供了悬停功能，即当鼠标光标移动到一个匹配的元素，第一个指定的功能被解雇。当鼠标移动的元素，第二个指定的功能火灾。此外，检查的地方看到，如果鼠标仍然是在指定的元素（例如，一个div里面的图像），如果是这样，它会继续“徘徊”，并没有迁出（一种常见的在使用mouseout事件处理程序）的错误。

复制代码代码如下:

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