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

一个对于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 职场文书

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述