读jQuery之十 事件模块概述


Posted in Javascript onJune 27, 2011

后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。

虽然事件模块代码很难读,但其提供的API接口还是很清晰的。如下
读jQuery之十 事件模块概述
1 添加事件(bind/one/live/delegate/hover/toggle)
bind 基本的添加事件函数。
one 添加只执行一次的事件函数。
live 事件代理(使用document代理)。
delegate 事件代理(使用指定元素代理)。
hover 模拟css的hover。
toggle 显示/隐藏。

bind/one/live 都是使用内部的jQuery.event.add 来完成事件添加。
delegate 内部调用的是live。
hover 内部使用mouseenter/mouseleave,而mouseenter/mouseleave又使用bind。
toggle 内部使用click,而click内部又调用的是bind。

实际上jQuery的一个each调用就给jQuery对象上增加了24个添加事件的快捷方法
如下图

如下图

读jQuery之十 事件模块概述


记住,bind调用的是jQuery.event.add,因此 jQuery.event.add 才是整个jQuery添加事件模块的核心。以上所有的方法都是在其之上构建的上层应用。如图

读jQuery之十 事件模块概述


2 删除事件 (unbind/die/undelegate)

unbind 删除事件基础方法。可以删除一个指定handler,还可以删除某类型事件的全部handler,甚至可以删除挂在element上的全部事件。其内部调用jQuery.event.remove。

die/undelegate 删除事件代理。 内部都使用unbind。


因此, jQuery.event.remove 才是整个jQuery删除事件模块的核心。unbind/die/undelegate都是在其之上构建的上层应用。如图

读jQuery之十 事件模块概述


3 触发事件(trigger/triggerHandler)

trigger 触发一个事件(会冒泡)

triggerHandler 触发一个事件(不会冒泡)


trigger/triggerHandler 内部调用的都是jQuery.event.trigger,因此jQuery.event.trigger 才是整个jQuery触发事件模块的核心。如图
读jQuery之十 事件模块概述

Javascript 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
js中的string.format函数代码
Aug 11 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
js实现索引图片切换效果
Nov 21 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 #Javascript
jQuery表格行换色的三种实现方法
Jun 27 #Javascript
19个很有用的 JavaScript库推荐
Jun 27 #Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 #Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 #Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 #Javascript
You might like
php中文本操作的类
2007/03/17 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
Django如何重置migration的几种情景
2021/02/24 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
如何安装ruby on rails
2014/02/09 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
求职简历自荐信范文
2013/10/21 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
暑假家长评语大全
2014/04/17 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
用人单位聘用意向书
2015/05/11 职场文书
大学生实习证明
2015/06/16 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
MySQL 全文检索的使用示例
2021/06/07 MySQL
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技