不同的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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
了解JavaScript中let语句
May 30 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书