不同的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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
用JS剩余字数计算的代码
Jul 03 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
javascript判断office版本示例
Apr 11 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
图片之间的切换
2006/06/26 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python模块之StringIO使用示例
2015/04/08 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python下10个简单实例代码
2017/11/15 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
详解django.contirb.auth-认证
2018/07/16 Python
django-初始配置(纯手写)详解
2019/07/30 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
英语系本科生个人求职信
2013/09/21 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
中学生自我评价范文
2015/03/03 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server