编程 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实现的一个图片滚动切换

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 数据库

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述