读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实现的类似Google的Div拖动效果代码
Aug 09 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
推荐11个实用Python库
2015/01/23 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
pandas数据集的端到端处理
2019/02/18 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python