读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 事件绑定问题
Jan 01 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
js实现简易聊天对话框
Aug 17 Javascript
js禁止表单重复提交
Aug 29 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php简单分页类实现方法
2015/02/26 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python易忽视知识点小结
2015/05/25 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Python底层封装实现方法详解
2020/01/22 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
自荐信要包含哪些内容
2013/11/06 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
食品工程专业求职信
2014/06/15 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2015年测量员工作总结
2015/05/23 职场文书
会议简报格式范文
2015/07/20 职场文书