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


Posted in Javascript onDecember 09, 2012

在今天的网络浏览器处理事件是有点困难的一部分,不同的浏览器以不同的方式处理事件。因此,要克服这些跨浏览器的问题,人们可以利用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"); 
});
Javascript 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
flexigrid 参数说明
Nov 23 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
javascript实现密码强度显示
Mar 18 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 #Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 #Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 #Javascript
javascript操作JSON的要领总结
Dec 09 #Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 #Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 #Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
谈一谈收音机的高放电路
2021/03/02 无线电
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php常用数学函数汇总
2014/11/21 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
护士上岗前培训自我鉴定
2014/04/20 职场文书
我的小天地教学反思
2014/04/30 职场文书
我的老师教学反思
2014/05/01 职场文书
小学数学课题方案
2014/06/15 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
nginx 配置缓存
2022/05/11 Servers