jQuery中的事件——《锋利的JQuery》
虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。
1、加载DOM
在JavaScript中,通常用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。下面来看看这两种方法的不同之处:
1.1 执行时机
window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行。而通过jQuery的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用。jQuery中提供了一个与window.onload相同的方法——load()方法。
$(window).load(function(){ //编写代码 }) 等价于 window.onload = function() { //编写代码 } .
1.2 多次使用
window.onload方法只能使用一次,再次使用将会被重写。而$(document).ready().可以被多次使用.
1.3 简写方式
- /* 第一种 */
- $(document).ready(function() {
- //编写代码
- })
- /* 第一种 */
- $().ready(function() {
- //编写代码
- })
- /* 第三种 */
- $(function() {
- //编写代码
- })
2、事件绑定
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用off()方法。
提示:如需添加只运行一次的事件然后移除,请使用 one()方法。
语法:
参数 | 描述 |
---|---|
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。 |
childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data | 可选。规定传递到函数的额外数据。 |
function | 可选。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
简写绑定事件:像click、mouseover、mouseout这类常用事件,jQuery为此提供了一套简写方法。
- $("#id").mouseover(function() {
- $(this).next().show();
- }).mouseout(function(){
- $(this).next().hide();
- });
3、合成事件
jQuery有两个合成事件——hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle方法都属于jQuery自定义方法。
3.1 hover()方法
语法结构: hover(enter, leave);
- $(function(){
- $("#id").hover(functioin(){
- $(this).next().show();
- },function(){
- $(this).next().hide();
- });
- });
3.2 toggle()方法
语法结构: toggle(fn1,fn2,...fnN);
toggle()方法在jQuery中还有另外一个作用:切换元素的可见状态。如果可见,单击会隐藏;反之亦然。
- $(function(){
- $("#id").toggle(function(){
- $(this).next().show(); //$(this).next().toggle();
- },function(){
- $(this).next().hide(); //$(this).next().toggle();
- })
- })
4、事件冒泡
4.1 事件对象
由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件对象变得比较困难。针对这个问题,jQuery进行了封装,从而使得任何浏览器都能轻松地获取事件对象以及事件的一些属性。
4.2 停止事件冒泡
- $("#content").on("click",function(event){ // event: 事件对象
- var txt = $('#msg').html() + "<p>外层div元素被单击。</p>";
- $('#msg').html(txt);
- event.stopPropagation(); // 停止事件冒泡
- });
4.3 阻止默认行为
网页中的元素有自己的默认行为,例如,单击超链接会跳转、单击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。
- $("#submit").on("click",function(event){
- var username = $("#username").val(); // 获取元素的值
- if(username == ""){ //提示信息
- $("#msg").html("<p>文本框不能为空</p>"); //提示信息
- event.preventDefault(); // 阻止默认行为(表单提交)
- }
- });
附:并非所有主浏览器都支持事件捕获,并且这个缺陷无法通过JavaScript弥补。jQuery不支持事件捕获,如需要,请直接使用原生JavaScript。
5、事件对象的属性
5.1 event.type
- $("a").click(function(event){
- alert(event.type); //获取事件类型
- return false; // 阻止链接跳转
- });
5.2 event.preventDefault()方法:阻止默认行为
5.3 event.stopPropagation()方法:阻止事件的冒泡
5.4 event.target:获取触发事件的元素
5.5 event.relatedTarget:在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素用event.relatedTarget来访问。event.relatedTarget在mouseover中相当于IE的event.fromElement,在mouseout中相当于IE的event.toElement,jQuery对其进行了封装,使之能兼容任何浏览器。
5.6 event.pageX和event.pageY:相对于页面文档的坐标
5.7 event.which:该方法作用是鼠标点击事件中获取鼠标的左、中、右键,返回数值。
5.8 event.metaKey:jQuery也封装event.metaKey属性,返回布尔值。
6、移除事件
在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件:
- /* 依次弹出 */
- $("p").on("click",function(){
- alert(1);
- }).on("click",function(){
- alert(2);
- }).on("click",function(){
- alert(3);
- });
移除按钮元素上以前注册的事件 —— off()方法
off() 方法通常用于移除通过on()方法添加的事件处理程序。
自 jQuery 版本 1.7 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。
提示:如需添加只运行一次的事件然后移除,请使用 one()方法。
语法:
参数 | 描述 |
---|---|
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。 |
selector | 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。 |
function(eventObj) | 可选。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
7、模拟事件
7.1 常用模拟
- $("#btn").trigger("click"); //页面加载完毕后,立即执行点击事件
- $("#btn").click(); //和上面效果一样
7.2 触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称事件。
- $('#btn').on("myClick",function(){ //定义一个自定义事件
- alert("自定义事件执行");
- });
- $('#btn').trigger("myClick"); // 触发自定义事件
7.3 传递数据
trigger(type,[data])方法有俩个参数,第一个参数是要触发的事件类型,第二个是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调数来区别这次事件是代码触发还是用户触发。
- $('#btn').on("myClick",fucntion(event,message1,message2){ //获取数据
- $('#test').append("<p>"+message1+message2+"</p>");
- });
- $('#btn').trigger("myClick",["我的自定义","事件"]); //传递俩个数据
7.4 执行默认操作
trigger()和triggerHandler()方法都可以触发事件程序执行,但后者不会执行浏览器默认操作。比如:
- /* 仅触发获取焦点事件程序,input不会获取焦点 */
- $('input').triggerHandler("focus");
8、其他用法
8.1 绑定多个事件类型:为一个元素一次性绑定多个事件类型
- /* 为一个元素一次性绑定多个事件类型 */
- $('div').on("mouseover mouseout",function(){
- $(this).toggleClass("over");
- });
- /* 和下面的相同 */
- $('div').on("mouseover",function(){
- $(this).toggleClass("over");
- }).on("mouseout",function(){
- $(this).toggleClass("over");
- });
8.2 添加事件命名空间,便于管理:为元素绑定的多个事件类型用命名空间规范起来。
- $('div').on("click.plugin",function(){
- $("body").append("<p>click事件</p>");
- });
- $('div').on("mouseover.plugin",function(){
- $("body").append("<p>mouseover事件</p>");
- });
- $('div').on("dblclick.plugin",function(){
- $("body").append("<p>dblclick事件</p>");
- });
- $('button').click(function(){
- $("div").off(".plugin"); //前面添加的事件都会被删除
- });
8.3 相同事件名称,不同命名空间执行方法:为元素绑定相同的事件类型,然后以命名空间的不同按需调用。
- $('div').on("click",function(){
- $('body').append("<p>click事件</p>");
- });
- $('div').on("click.plugin",function(){
- $('body').append("<p>click.plugin事件</p>");
- });
- $('button').click(functiion(){
- $('div').trigger("click!"); //注意click后面的感叹号
- });
- /* 当点击<div>,会触发click事件和click.plugin事件。如果只点击<button>,则只触发click事件。注意:trigger("click")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。 */
事件部分到此结束,下期更新jQuery中的动画!
jQuery中的事件——《锋利的JQuery》的更多相关文章
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
随机推荐
- ARKit入门
ARKit介绍 ARKit是iOS11引入的一个全新的框架,使用Visual Inertial Odometry(VIO,视觉惯性里程计)来精确跟踪现实世界中的真实场景.相比其它设备平台,ARKit中 ...
- 【题解】 UVa11300 Spreading the Wealth
题目大意 圆桌旁边坐着\(n\)个人,每个人有一定数量的金币,金币的总数能被\(n\)整除.每个人可以给他左右相邻的人一些金币,最终使得每个人的金币数量相等.您的任务是求出被转手的金币的数量的最小值. ...
- react.js学习之路五
最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...
- BeanShell Processor_使用Java处理脚本
版权声明:本文为博主原创文章,未经博主允许不得转载. [try-catch] 建议使用Try----Catch块,这样Java语句出现问题时,日志更清晰: try { //java代码 } catch ...
- 自已的sql server练习小记
print getdate(); print datediff(year,'1987-09-13',getdate()) select * from CallRecords select top 5 ...
- springcloud微服务总结四 负载均衡
一:Ribbon简介 Ribbon是Netflix公司开源的一个负载均衡的项目,是一个客户端负载均衡器,运行在客户端上.它是一个经过了云端测试的IPC库,可以很好地控制HTTP和TCP客户端的一些行为 ...
- Qt 学习之路 2(27):渐变
Qt 学习之路 2(27):渐变 豆子 2012年11月20日 Qt 学习之路 2 17条评论 渐变是绘图中很常见的一种功能,简单来说就是可以把几种颜色混合在一起,让它们能够自然地过渡,而不是一下子变 ...
- java.math.BigDecimal cannot be cast to java.lang.String
从数据库总查询出的count(*) 函数统计的值,类型转换方法: Map<String,Integer> map = new HashMap<String,Integer>() ...
- HDU - 1403 后缀数组初步
题意:求两个串的最长公共子串 两个串连接起来然后求高度数组 注意两个sa值必须分别在不同一侧 本题是用来测试模板的,回想起青岛那次翻车感觉很糟糕 #include<iostream> #i ...
- URAL - 1146
从来不会DP的家伙终于要开始重拾DP了 最大子矩阵没啥好说的,注意单调最大子矩阵不用这么高复杂度,另行更新 #include<bits/stdc++.h> #define rep(i,j, ...