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

document.getElementById为空或不是对象的解决方法

Jan 24 Javascript

jquery实现的缩略图预览滑块实例

Jun 25 Javascript

jQuery简单实现两级下拉菜单效果代码

Sep 15 Javascript

jQuery实现悬浮在右上角的网页客服效果代码

Oct 24 Javascript

Node.js服务器环境下使用Mock.js拦截AJAX请求的教程

May 23 Javascript

jQuery查找节点并获取节点属性的方法

Sep 09 Javascript

jQuery实现的无限级下拉菜单功能示例

Sep 12 Javascript

js数组操作方法总结(必看篇)

Nov 22 Javascript

JavaScript比较两个数组的内容是否相同(推荐)

May 02 Javascript

详解ElementUI之表单验证、数据绑定、路由跳转

Jun 21 Javascript

在Vue中如何使用Cookie操作实例

Jul 27 Javascript

移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐

Apr 02 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

#{}(1) 小喇叭开始广播了(1) 增删查改(1) 脏读(2) SQL注入(2) IC-R9500(1) 小喇叭(1) S-2000(1) 外键(1) 克隆(1)

You might like

基于qmail的完整WEBMAIL解决方案安装详解

2006/10/09 PHP

PHP运行模式的深入理解

2013/06/03 PHP

php实现过滤UBB代码的类

2015/03/12 PHP

php使用pecl方式安装扩展操作示例

2019/08/12 PHP

JavaScript中null与undefined分析

2009/07/25 Javascript

jquery.simple.tree插件更简单，兼容性更好的无限树插件

2010/09/03 Javascript

jQuery.buildFragment使用方法及思路分析

2013/01/07 Javascript

javascript学习笔记--数字格式类型

2014/05/22 Javascript

node.js适合游戏后台开发吗？

2014/09/03 Javascript

JavaScript显示表单内元素数量的方法

2015/04/02 Javascript

js/jquery判断浏览器类型的方法小结

2015/05/12 Javascript

requireJS模块化实现返回顶部功能的方法详解

2017/10/16 Javascript

基于datepicker定义自己的angular时间组件的示例

2018/03/14 Javascript

[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27

2020/11/30 DOTA

python登录豆瓣并发帖的方法

2015/07/08 Python

用Python的Django框架来制作一个RSS阅读器

2015/07/22 Python

深入理解python中的闭包和装饰器

2016/06/12 Python

Python中字符串的处理技巧分享

2016/09/17 Python

Django后台获取前端post上传的文件方法

2018/05/28 Python

详解python做UI界面的方法

2019/02/27 Python

Python3中_(下划线)和__(双下划线)的用途和区别

2019/04/26 Python

利用python实现周期财务统计可视化

2019/08/25 Python

Python OrderedDict的使用案例解析

2019/10/25 Python

python进行参数传递的方法

2020/05/12 Python

基于Tensorflow一维卷积用法详解

2020/05/22 Python

荷兰电脑专场：Paradigit

2018/05/05 全球购物

工业学校毕业生自荐信范文

2014/01/03 职场文书

给导游的表扬信

2014/01/10 职场文书

优秀老师事迹材料

2014/02/05 职场文书

设计顾问服务计划书

2014/05/04 职场文书

2015年艾滋病防治工作总结

2015/05/22 职场文书

今日说法观后感

2015/06/08 职场文书

校运会新闻稿

2015/07/17 职场文书

女儿满月酒致辞

2015/07/29 职场文书

2016基督教会圣诞节开幕词

2016/03/04 职场文书

vue-cil之axios的二次封装与proxy反向代理使用说明

2022/04/07 Vue.js

读jQuery之十 事件模块概述

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

3 触发事件(trigger/triggerHandler)

读jQuery之十事件模块概述