jQuery系列 第六章 jQuery框架事件处理-阿里云开发者社区

开发者社区> 文顶顶水水> 正文

jQuery系列 第六章 jQuery框架事件处理

简介: 第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动。虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框架增加并扩展了基本的事件处理机制,jQuery框架提供了更加优雅的事件处理语法,并极大的增强了事件处理能力。
+关注继续查看

第六章 jQuery框架事件处理

JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动。虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框架增加并扩展了基本的事件处理机制,jQuery框架提供了更加优雅的事件处理语法,并极大的增强了事件处理能力。

6.1 事件处理简单说明

jQuery框架在JavaScript的基础上进一步封装了不同类型的事件模型,形成了一套更强大和优雅的“jQuery事件模型”。

jQuery中的事件模型表现出以下特征:

① 使用DOM事件模型中标准的事件类型名称。
② 统一了事件处理中的各种方法。
③ 允许为每个元素的每个事件类型建立多个处理程序。
④ 统一了事件对象的传递方法并规范了事件对象的常用属性和方法。
⑤ 为事件管理和操作提供了统一的方法。

6.2 绑定事件

在jQuery中,我们可以有多种方式来为标签绑定事件,可以简单的区分为专用方法绑定事件和快捷方法绑定事件。

① 快捷方法绑定事件

jQuery框架中定义了24个快捷方法来为标签绑定特定类型的事件,这些方法和二级事件模型中的事件类型对应,名称相同。

具体的快捷方法如下:

blur() 当元素失去焦点时发生 blur 事件
change() 当元素的值发生改变时,会发生 change 事件
click() 当点击元素时,会发生 click 事件
dbclick() 当双击元素时,会发生 dblclick 事件
error() 当元素遇到错误(没有正确载入)时,发生 error 事件
focus() 当元素获得焦点时,发生 focus 事件
focusin() 当元素获得焦点时,发生 focusin 事件(包括子元素)
focusout() 当元素失去焦点时,发生 focusout事件(包括子元素)
keydown() 当按键被按下时,发生 keydown 事件
keyup() 当按键被松开时,发生 keyup 事件
keypress() 当按键被按下时,发生 keypress事件(响应每个字符)
mouseenter()当鼠标指针穿过元素时,会发生 mouseenter 事件
mouseleave()当鼠标指针离开元素时,会发生 mouseleave 事件
mouseover() 当鼠标指针位于元素上方时,会发生 mouseover 事件
mouseout() 当鼠标指针从元素上移开时,会发生 mouseout 事件
mousedown() 当鼠标进入元素,并按下按键时,会发生mousedown事件
mouseup() 当在元素上放松鼠标按钮时,会发生 mouseup 事件
mousemove() 当鼠标在指定的元素中移动时,会发生 mousemove 事件
resize() 当调整浏览器窗口的大小时,发生 resize 事件
scroll() 当用户滚动指定的元素时,会发生 scroll 事件
select() 当文本被选择时,会发生 select 事件
submit() 当提交表单时,会发生 submit 事件(表单)
load() 当指定的元素(及子元素)已加载时,会发生load事件
unload() 当用户离开页面时,会发生 unload 事件(1.8-)

 

② 专用方法绑定事件

jQuery中可以使用四种专用方法来绑定事件,分别是bind方法、live方法、delegate方法和on方法,每个版本各有区别,建议使用on方法。

补充说明

bind方法适用于所有的版本,1.7+ 推荐使用on方法来代替。
live方法适用于 1.9- 的版本,1.9+ 版本使用on方法来代替。
delegate方法适用于1.4.2 + 的版本。
on方法适用于1.7+ 的版本,1.7+ 用于替代bind和live方法。

 

on方法为指定的元素添加一个或者是多个事件,并规定这些事件发生时指定的函数。

on方法的语法:on(eventType,childselector,data,function)

参数说明:

eventType:必传参数,指定事件的类型如click等。
childselector:可选参数,用于事件委托。
data:可选参数,设计需要传递的数据。
function:必传参数,事件发生时,执行的函数。

示例代码

 1 //【1】使用快捷方法来给按钮添加点击事件
 2 $("button").click(function () {
 3           console.log("点击了按钮---1");
 4       });
 5 $("button").click(function () {
 6           console.log("点击了按钮---2");
 7       });
 8 //【2】使用on方法来给按妞添加点击事件
 9 $("button").on("click",{name:"wendingding"},function (event) 
10 {
11           console.log("点击了按钮----on");
12           console.log(event.data.name);
13       })

扩展:one方法的使用
one方法是on方法中的一种特殊使用方式,由one方法绑定的事件在执行一次响应之后就会失效。其设计思路是:在事件处理函数的内部注销当前事件

扩展:事件委托说明
事件委托是开发中常见的绑定事件方式,参考代码如下。

1 //思考:如何能够找到所有的span标签(已经存在的 + 尚未创建的)
2 //第一个参数:事件的类型
3 //第二个参数:给谁添加事件
4 //第三个参数:事件发生的回调函数
5 $("div").on("click","span",function () {
6         console.log("点击了标签");
7  })

6.3 注销事件

有时候我们需要把一些元素的绑定事件注销,可以使用off方法来注销事件。
注销事件的方法和注册事件的方法是相反的操作,参数和用法基本相同。

off方法的使用示例

1 //注销button标签上面的所有点击事件
2 $("button").off("click");
3 //注销button标签上面指定的鼠标移入事件,fn为绑定移入事件时的函数
4 $("button").off("mouseenter",fn);

6.4 事件对象

在注册事件的时候,event对象实例将作为第一个参数传递给事件的回调函数,这和DOM事件模型是完全相同的。另外,jQuery统一了IE事件模型和DOM事件模型中event对象属性和方法的用法,使其符合DOM标准事件模型的规范。

在事件处理函数(回调函数)中,我们可以获取事件对象的相关信息。

1 $("button").on("click",{name:"zs"},function (event) {
2            console.log("点击了按钮----2");
3            //获取事件的类型
4            console.log(event.type);
5            //获取目标对象
6            console.log(event.target);
7            //获取被省略的对象
8            console.log(event.data);
9 })

6.5 事件冒泡

事件冒泡的简单解释:如果某个标签的事件被触发,那么该标签父标签上被注册的相同类型事件也会被触发,并且会依次一直冒泡到顶端。

 1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>Title</title>
 5     <script src="js/jquery-3.2.1.js"></script>
 6     <style>
 7         .box1{
 8             width: 300px;
 9             height: 300px;
10             background: red;
11         }
12         .box2{
13             width: 200px;
14             height: 200px;
15             background: green;
16         }
17         .box3{
18             width: 100px;
19             height: 100px;
20             background: yellow;
21         }
22     </style>
23 </head>
24 <body>
25 <script>
26     $(function () {
27         $(".box1").click(function () {
28             console.log("点击了box1");
29         })
30         $(".box2").click(function (e) {
31             console.log("点击了box2");
32             //e.stopPropagation(); //return false;
33         });
34         $(".box3").click(function () {
35             console.log("点击了box3");
36         })
37     })
38 </script>
39 <div class="box1">
40     <div class="box2">
41         <div class="box3"></div>
42     </div>
43 </div>
44 </body>
45 </html>

阻止事件冒泡的两种方式:
【1】在回调函数中返回false。
【2】调用事件对象的stopPropagation方法。

6.6 触发事件和默认行为

默认行为

默认行为:页面中的一些标签常常存在默认的行为,比如表单的submit事件类型,如果该类型的事件被触发,则会导致表单的提交;比如a标签存在跳转网页连接的默认行为等。如果需要在事件被触发的时候,阻止标签默认的行为,可以考虑在处理函数内部调用事件对象的preventDefault()方法。

触发事件

触发事件:页面中标签的事件都是在特定条件下发生的,所以不同类型的事件触发时间其实无法预测。但有的时候,我们可能需要控制事件发生的时机。这时候,可以考虑使用trigger()或者是triggerHandler()方法来触发事件。

语法说明:
trigger(type),[data]
triggerHandler(type),[data]

参数说明:
type参数表示事件的类型,以字符串的形式传递。
data参数是可选的,利用该参数可以向事件的回调函数传递额外的数据。

代码示例:

1 $(".box3").trigger("click");
2 $("input").triggerHandler("click");

trigger和triggerHandler方法的对比

① triggerHandler方法不会触发标签的默认事件。
② triggerHandler方法只会触发jQ实例对象集合中第一个元素的事件回调。
③ triggerHandler方法返回的是事件回调函数的返回值,而非jQ对象。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery formatCurrency货币格式化处理
jquery formatCurrency是一个对货币格式进行格式化输入控制、显示的一个jquery插件,可以对文本框输入进行货币合法性验证,并且支持对文本输入字符串进行格式化显示。(国内的会计记账法是保留两位小数,整数位每3个千位使用,号隔开) 1.
796 0
【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123753 ...
761 0
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81087543 主要问题: 在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。
855 0
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
874 0
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
857 0
nodejs的事件处理机制以及事件环机制
nodejs的事件处理机制以及事件环机制 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。
1311 0
基于对象存储 OSS 的智能数据分析处理框架和功能
今年参加了 2019 全球闪存峰会(Flash Memory World),分享了“基于云存储的智能数据分析处理架构”,重点介绍在对象存储 OSS 之上的数据处理功能,现整理相关内容和大家探讨。
2132 0
+关注
文顶顶水水
JavaScript专家、技术讲师 关注前端开发和移动端开发
197
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载