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

Juqery Html(),append()等方法的Bug解决方法

Dec 13 Javascript

12种不宜使用的Javascript语法整理

Nov 04 Javascript

js获取当前月的第一天和最后一天的小例子

Nov 18 Javascript

javascript通过元素id和name直接取得元素的方法

Apr 28 Javascript

全面解析jQuery $(document).ready()和JavaScript onload事件

Jun 08 Javascript

JS自定义混合Mixin函数示例

Nov 26 Javascript

拖动时防止选中

Feb 03 Javascript

详解Angular 自定义结构指令

Jun 21 Javascript

Vue.js常用指令之循环使用v-for指令教程

Jun 27 Javascript

Layui事件监听的实现(表单和数据表格)

Oct 17 Javascript

vue结合el-upload实现腾讯云视频上传功能

Jul 01 Javascript

原生js实现俄罗斯方块

Oct 20 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

初学CAKEPHP 基础教程

2009/11/02 PHP

php is_file()和is_dir()用于遍历目录时用法注意事项

2010/03/02 PHP

php中根据某年第几天计算出日期年月日的代码

2011/02/24 PHP

php实现有趣的人品测试程序实例

2015/06/08 PHP

PHP里面把16进制的图片数据显示在html的img标签上(实现方法)

2017/05/02 PHP

php实现统计IP数及在线人数的示例代码

2020/07/22 PHP

Prototype Template对象学习

2009/07/19 Javascript

jquery实现的一个简单进度条效果实例

2014/05/12 Javascript

javascript简单实现图片预加载

2014/12/03 Javascript

jQuery插件Tmpl的简单使用方法

2015/04/27 Javascript

JSON与XML优缺点对比分析

2015/07/17 Javascript

详解JavaScript编程中正则表达式的使用

2015/10/25 Javascript

JS实现来回出现文字的状态栏特效代码

2015/10/31 Javascript

基于jQuery实现复选框是否选中进行答题提示

2015/12/10 Javascript

微信小程序下拉菜单的实现

2017/04/06 Javascript

vue前端框架—Mint UI详解（更适用于移动端）

2019/04/30 Javascript

ssm+vue前后端分离框架整合实现(附源码)

2020/07/08 Javascript

Element Alert警告的具体使用方法

2020/07/27 Javascript

vue+ElementUI 关闭对话框清空验证,清除form表单的操作

2020/08/06 Javascript

在windows系统中实现python3安装lxml

2016/03/23 Python

Python 迭代器与生成器实例详解

2017/05/18 Python

Python+Turtle动态绘制一棵树实例分享

2018/01/16 Python

什么是Python中的匿名函数

2020/06/02 Python

python实现AdaBoost算法的示例

2020/10/03 Python

Expedia韩国官网：亚洲发展最快的在线旅游门户网站

2018/02/26 全球购物

英国名牌男装店：Standout

2021/02/17 全球购物

抽象方法、抽象类怎样声明

2014/10/25 面试题

应届大学生求职信

2013/12/01 职场文书

毕业生就业自荐书

2013/12/15 职场文书

《盲人摸象》教学反思

2014/02/16 职场文书

2014年食品安全工作总结

2014/12/04 职场文书

酒店温馨提示语

2015/07/14 职场文书

写给同事的离职感言

2015/08/04 职场文书

大学班干部竞选稿

2015/11/20 职场文书

如何理解Vue前后端数据交互与显示

2021/05/10 Vue.js

如何利用python创作字符画

2022/06/25 Python

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述