编程 Javascript

读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之十事件模块概述

读jQuery之十事件模块概述

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个很简单的jquery+xml+ajax的无刷新树结构(无css，后台是c#)

Jun 02 Javascript

jquery取消选择select下拉框示例代码

Feb 22 Javascript

jquery使用remove()方法删除指定class子元素

Mar 26 Javascript

javascript简单实现滑动菜单效果的方法

Jul 27 Javascript

JavaScript动态提示输入框输入字数的方法

Jul 27 Javascript

JavaScript的函数式编程基础指南

Mar 19 Javascript

实例讲解JavaScript中的this指向错误解决方法

Jun 13 Javascript

jQuery常见面试题之DOM操作详析

Jul 05 jQuery

Vue.js 实现微信公众号菜单编辑器功能(二)

May 08 Javascript

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

May 31 jQuery

微信小程序实现卡片左右滑动效果的示例代码

May 01 Javascript

小试小程序云开发(小结)

Jun 06 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 Session变量不能传送到下一页的解决方法

2009/11/27 PHP

.htaccess文件保护实例讲解

2011/02/06 PHP

Codeigniter操作数据库表的优化写法总结

2014/06/12 PHP

php表单提交与$_POST实例分析

2015/01/26 PHP

php编写的一个E-mail验证类

2015/03/25 PHP

PHP执行SQL文件并将SQL文件导入到数据库

2015/09/17 PHP

yii2中添加验证码的实现方法

2016/01/09 PHP

浅谈PHP5.6 与 PHP7.0 区别

2019/10/09 PHP

arguments对象

2006/11/20 Javascript

Prototype使用指南之dom.js

2007/01/10 Javascript

javascript正则表达式中参数g(全局)的作用

2010/11/11 Javascript

Json序列化和反序列化方法解析

2013/12/19 Javascript

checkbox全选所涉及到的知识点介绍

2013/12/31 Javascript

通过url查找a元素并点击

2014/04/09 Javascript

在JavaScript中判断整型的N种方法示例介绍

2014/06/18 Javascript

21个JavaScript事件(Events)属性汇总

2014/12/02 Javascript

jQuery实现页面滚动时动态加载内容的方法

2015/03/20 Javascript

jQuery简单实现图片预加载

2015/04/20 Javascript

BootStrap的alert提示框的关闭后再显示怎么解决

2016/05/17 Javascript

JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析

2017/09/05 Javascript

简单实现vue验证码60秒倒计时功能

2017/10/11 Javascript

[03:48]大碗DOTA

2019/07/25 DOTA

Python基于pycrypto实现的AES加密和解密算法示例

2018/04/10 Python

python 读写excel文件操作示例【附源码下载】

2019/06/19 Python

Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统

2020/04/21 Python

解决IDEA 的 plugins 搜不到任何的插件问题

2020/05/04 Python

VSCode配合pipenv搞定虚拟环境的实现方法

2020/05/17 Python

css3动画过渡实现鼠标跟随导航效果

2018/02/08 HTML / CSS

Spartoo美国：欧洲排名第一的在线时装零售商

2019/12/12 全球购物

给排水专业应届生求职信

2013/10/12 职场文书

《蓝色的树叶》教学反思

2014/02/24 职场文书

捐赠仪式主持词

2014/03/19 职场文书

大学社团计划书

2014/05/01 职场文书

服务口号大全

2014/06/11 职场文书

井冈山红色之旅心得体会

2014/10/07 职场文书

家长对孩子的寄语

2015/02/26 职场文书

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述