首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 可排列的表实现代码
Nov 13 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
javascript实现计算器功能
Mar 30 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
okenizer(1) while(1) for(1) watch(1) re模块(2) 分词器(1) 无限迭代(1) sched(1) 事件调度器(1) 监听(2)
You might like
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python实现的几个常用排序算法实例
2014/06/16 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python饼状图的绘制实例
2019/01/15 Python
python next()和iter()函数原理解析
2020/02/07 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Omio意大利：全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
高考满分作文赏析（2篇）
2019/08/12 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Vue过滤器（filter）实现及应用场景详解
2021/06/15 Vue.js