读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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
Ucren Virtual Desktop V2.0
Nov 07 Javascript
php跨域调用json的例子
Nov 13 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
javascript中new关键字详解
Dec 14 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
vue中的mvvm模式讲解
Jan 31 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如何写APP接口详解
2016/08/23 PHP
PHP中的self关键字详解
2019/06/23 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
python模块restful使用方法实例
2013/12/10 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
12步教你理解Python装饰器
2016/02/25 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Django数据库迁移常见使用方法
2020/11/12 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
介绍Java的内部类
2012/10/27 面试题
经典c++面试题三
2015/07/08 面试题
出纳员岗位职责风险
2014/03/06 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
求职信范文大全
2014/05/26 职场文书
小学社会实践活动总结
2014/07/03 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
工作表扬信范文
2015/01/17 职场文书
通知格式
2015/04/27 职场文书
摘录式读书笔记
2015/07/01 职场文书