读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 相关文章推荐
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
js实现九宫格布局效果
May 28 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP 高手之路(二)
2006/10/09 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
一张图带我们入门Python基础教程
2017/02/05 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python实现多线程的两种方式分析
2018/08/29 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
生产总经理岗位职责
2013/12/19 职场文书
教师学习培训邀请函
2014/02/04 职场文书
法学求职信
2014/06/22 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
python​格式化字符串
2022/04/20 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库