不同的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 相关文章推荐
jQuery 联动日历实现代码
May 31 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
jQuery事件用法详解
Oct 06 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
vue component组件使用方法详解
Jul 14 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
vue3获取当前路由地址
Feb 18 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
javascript的内存管理详解
2013/08/07 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
python中的错误如何查看
2020/07/08 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
用Python 执行cmd命令
2020/12/18 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
一年级数学教学反思
2014/02/01 职场文书
会计学自我鉴定
2014/02/06 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
大学军训通讯稿
2015/07/18 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL