不同的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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js改变Iframe中Src的方法
May 05 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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
基于PHP的简单采集数据入库程序
2014/07/30 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php图片上传类 附调用方法
2016/05/15 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
python处理大日志文件
2019/07/23 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
环保建议书500字
2014/05/14 职场文书
银行自荐信范文
2015/03/25 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL