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

Javascript实现的类似Google的Div拖动效果代码

Aug 09 Javascript

Jquery $.getJSON 在IE下的缓存问题解决方法

Oct 10 Javascript

js一维数组、多维数组和对象的混合使用方法

Apr 03 Javascript

Node.js的项目构建工具Grunt的安装与配置教程

May 12 Javascript

js获取Html元素的实际宽度高度的方法

May 19 Javascript

JavaScript数组合并的多种方法

May 22 Javascript

jQuery查看选中对象HTML代码的方法

Jun 17 Javascript

js实现上传文件添加和删除文件选择框

Oct 24 Javascript

获取本机IP地址的实例(JavaScript / Node.js)

Nov 24 Javascript

vue中input的v-model清空操作

Sep 06 Javascript

Vue 数组和对象更新,但是页面没有刷新的解决方式

Nov 09 Javascript

vue-admin-template配置快捷导航的代码（标签导航栏）

Sep 04 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

Could not load type System.ServiceModel.Activation.HttpModule解决办法

2012/12/29 PHP

Yii操作数据库实现动态获取表名的方法

2016/03/29 PHP

php使用高斯算法实现图片的模糊处理功能示例

2016/11/11 PHP

firefox中JS读取XML文件

2006/12/21 Javascript

js简单的弹出框有关闭按钮

2014/05/05 Javascript

一个字符串反转函数可实现字符串倒序

2014/09/15 Javascript

html的DOM中Event对象onblur事件用法实例

2015/01/21 Javascript

JS模态窗口返回值兼容问题的完美解决方法

2016/05/28 Javascript

如何使用Bootstrap创建表单

2017/03/29 Javascript

用Electron写个带界面的nodejs爬虫的实现方法

2019/01/29 NodeJs

vue缓存的keepalive页面刷新数据的方法

2019/04/23 Javascript

JavaScript对象属性操作实例解析

2020/02/04 Javascript

Typescript3.9 常用新特性一览(推荐)

2020/05/14 Javascript

基于JS+HTML实现弹窗提示是否确认提交功能

2020/06/17 Javascript

用Python编程实现语音控制电脑

2014/04/01 Python

推荐11个实用Python库

2015/01/23 Python

python实现的jpg格式图片修复代码

2015/04/21 Python

小议Python中自定义函数的可变参数的使用及注意点

2016/06/21 Python

Python开发微信公众平台的方法详解【基于weixin-knife】

2017/07/08 Python

python+selenium+autoit实现文件上传功能

2017/08/23 Python

Python爬虫实战：分析《战狼2》豆瓣影评

2018/03/26 Python

使用Python读取安卓手机的屏幕分辨率方法

2018/03/31 Python

Python将文本去空格并保存到txt文件中的实例

2018/07/24 Python

Pandas读取并修改excel的示例代码

2019/02/17 Python

pandas数据集的端到端处理

2019/02/18 Python

python 安装教程之Pycharm安装及配置字体主题,换行,自动更新

2020/03/13 Python

Python HTMLTestRunner测试报告view按钮失效解决方案

2020/05/25 Python

CSS3的文字阴影—text-shadow的使用方法

2012/12/25 HTML / CSS

英国灯具和灯泡网上商店：Lights.co.uk

2018/02/02 全球购物

ASOS西班牙官网：英国在线时尚和美容零售商

2020/01/10 全球购物

美国在线购买内衣网站：HerRoom

2020/02/22 全球购物

Chi Chi London官网：购买连衣裙和礼服

2020/10/25 全球购物

信息与工商管理职业规划范文：为梦想而搏击

2014/09/11 职场文书

恋恋笔记本观后感

2015/06/16 职场文书

MySQL官方导出工具mysqlpump的使用

2021/05/21 MySQL

浅谈Python从全局与局部变量到装饰器的相关知识

2021/06/21 Python

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述