编程 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 相关文章推荐

Microsoft Ajax Minifier 压缩javascript的方法

Mar 05 Javascript

使用javascript获取页面名称

Dec 23 Javascript

推荐一个自己用的封装好的javascript插件

Jan 29 Javascript

JS区分浏览器页面是刷新还是关闭

Apr 17 Javascript

微信小程序 video组件详解

Oct 25 Javascript

javascript删除html标签函数cIsHTML

Jan 09 Javascript

使用prop解决一个checkbox选中后再次选中失效的问题

Jul 05 Javascript

微信小程序开发之animation循环动画实现的让云朵飘效果

Jul 14 Javascript

AngularJS实现的2048小游戏功能【附源码下载】

Jan 03 Javascript

vue-router路由懒加载的实现（解决vue项目首次加载慢）

Aug 28 Javascript

微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

Jun 24 Javascript

js实现简单的轮播图效果

Dec 13 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 gzip压缩输出的实现方法

2013/04/27 PHP

joomla jce editor 解决上传中文名文件失败问题

2013/06/09 PHP

PHP+MySQL之Insert Into数据插入用法分析

2015/09/27 PHP

PHP判断数组是否为空的常用方法(五种方法)

2017/02/08 PHP

Symfony查询方法实例小结

2017/06/28 PHP

PHP实现的最大正向匹配算法示例

2017/12/19 PHP

php7 list()、session及其他模块的修改实例分析

2020/05/25 PHP

同一个表单根据要求递交到不同页面的实现方法小结

2009/08/05 Javascript

浅谈下拉菜单中的Option对象

2015/05/10 Javascript

jQuery中on方法使用注意事项详解

2017/02/15 Javascript

详解vue-router 2.0 常用基础知识点之导航钩子

2017/05/10 Javascript

深入理解JavaScript创建对象的多种方式以及优缺点

2017/06/01 Javascript

解决VUEX刷新的时候出现数据消失

2017/07/03 Javascript

详解win7 cmd执行vue不是内部命令的解决方法

2017/07/27 Javascript

jquery实现吸顶导航效果

2020/01/08 jQuery

详解JavaScript中精度失准问题及解决方法

2020/02/04 Javascript

微信小程序实现多图上传

2020/06/19 Javascript

[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日

2020/10/31 DOTA

用Python解决计数原理问题的方法

2016/08/04 Python

一个Python最简单的接口自动化框架

2018/01/02 Python

python距离测量的方法

2018/03/06 Python

python判断设备是否联网的方法

2018/06/29 Python

详解基于django实现的webssh简单例子

2018/07/17 Python

PyTorch中常用的激活函数的方法示例

2019/08/20 Python

Python 异常处理Ⅳ过程图解

2019/10/18 Python

Python Django框架模板渲染功能示例

2019/11/08 Python

python 用 xlwings 库生成图表的操作方法

2019/12/22 Python

通过实例解析Python return运行原理

2020/03/04 Python

python爬虫开发之selenium模块详细使用方法与实例全解

2020/03/09 Python

使用sublime text3搭建Python编辑环境的实现

2021/01/12 Python

FORZIERI澳大利亚站：全球顶级奢华配饰精品店

2016/12/31 全球购物

运动会100米解说词

2014/01/23 职场文书

制药工程专业职业生涯规划范文

2014/03/10 职场文书

企业精细化管理实施方案

2014/03/23 职场文书

七一讲话心得体会

2014/09/05 职场文书

早会开场白台词大全

2015/06/01 职场文书

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述