读jQuery之十 事件模块概述
后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。
虽然事件模块代码很难读，但其提供的API接口还是很清晰的。如下 
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个添加事件的快捷方法
如下图
如下图
记住，bind调用的是jQuery.event.add，因此 jQuery.event.add 才是整个jQuery添加事件模块的核心。以上所有的方法都是在其之上构建的上层应用。如图
2 删除事件 (unbind/die/undelegate)
unbind 删除事件基础方法。可以删除一个指定handler，还可以删除某类型事件的全部handler，甚至可以删除挂在element上的全部事件。其内部调用jQuery.event.remove。
die/undelegate 删除事件代理。 内部都使用unbind。
因此， jQuery.event.remove 才是整个jQuery删除事件模块的核心。unbind/die/undelegate都是在其之上构建的上层应用。如图
3 触发事件(trigger/triggerHandler)
trigger 触发一个事件（会冒泡）
triggerHandler 触发一个事件（不会冒泡）
trigger/triggerHandler 内部调用的都是jQuery.event.trigger，因此jQuery.event.trigger 才是整个jQuery触发事件模块的核心。如图
相关推荐
-
读jQuery之三（构建选择器）
为了叙述每一篇的重点,其示例代码都是最精简的,比如选择器只能传HTMLElement和id. 这篇我们增强下选择器,依据2/8原则,这里仅实现最常用的几种. 1, 通过id获取,该元素是唯一的$('#id') 2, 通过className获取$('.cls') 获取文档中所有className为cls的元素$('.cls', el)$('.cls', '#id')$('span.cls') 获取文档中所有className为cls的span元素$('span.cls', el) 获取指定元素中c
-
读jQuery之五（取DOM元素）
jQuery的$调用后想要获取DOM元素可以使用get方法,如下 复制代码 代码如下: // 方式1 $('div').get(1); // 获取页面中第二个div 当然,也可以使用数组索引方式获取 复制代码 代码如下: // 方式2 $('div')[1]; // 获取页面中第二个div 上面两种方式都可以获取某一个特定的DOM元素,而获取DOM元素集合却要使用toArray方法 复制代码 代码如下: $('div').toArray(); // 返回页面中所有的div,依次放入数组中 看看g
-
读jQuery之八 包装事件对象
比如,停止事件冒泡IE用 cancelBubble ,标准浏览器则用 stopPropagation . 获取事件源对象,IE用 srcElement ,标准浏览器则用 target 诸如此类. jQuery 对原生事件对象的修复和包装主要使用 jQuery.Event 类和 jQuery.event.fix 方法. 复制代码 代码如下: jQuery.Event = function( src ) { // Allow instantiation without the 'new' keywo
-
读jQuery之四（优雅的迭代）
jQuery的操作往往是分两步 1,获取元素集合(选择器) 2,操作元素集合 而第二步操作元素集合的主要方法就是jQuery.each.查看源码,我们发现jQuery.each及this.each分别调用了27次和31次.可见它是多么的重要. 这篇将分析下jQuery.each及this.each方法.看看他们如何与jQuery.extend一起扩展jQuery库.最后我会给zChain.js加上each方法. 部分源码如下 复制代码 代码如下: jQuery.fn = jQuery.proto
-
读jQuery之十一 添加事件核心方法
这篇看看其源码,这个add定义如下(省略大部分) 复制代码 代码如下: add: function( elem, types, handler, data ) { if ( elem.nodeType === 3 || elem.nodeType === 8 ) { return; } ... } 定义了四个参数elem.types.handler和data分别为HTMLElement.事件类型(如click).事件响应函数.数据.此外,types 可以以空格分开传多种事件("mouseover
-
读jQuery之七 判断点击了鼠标哪个键的代码
jQuery丢弃了标准的 button 属性采用 which,这有点让人费解. which 是Firefox引入的,IE不支持.which的本意是获取键盘的键值(keyCode). jQuery中的which即可以是键盘的键值,也可以是鼠标的键值.即当判断用户按下键盘的哪个键时可以使用which,当判断用户按下鼠标的哪个键时也可以用which.它一举两用了.源码 复制代码 代码如下: // Add which for key events if ( event.which == null &&am
-
读jQuery之十二 删除事件核心方法
.remove 所作的事情与上一篇提到的.add 刚好相反.且与.add中的处理代码一一对应,即 .add 中有多少种添加事件的方式.remove就有对应的删除方式. .remove 定义了四个参数 elem, types, handler, pos .从字面上看四个参数的意义很明了 elem 为HTMLElement types 为String类型,事件名称如'click'或'mouseover mouseout' handler 为Function类型,事件回调函数 pos 为Number
-
读jQuery之九 一些瑕疵说明
1,bind 方法,最后一个参数fn是多余的 复制代码 代码如下: // Handle object literals if ( typeof type === "object" ) { for ( var key in type ) { this[ name ](key, data, type[key], fn); } return this; } 2,注释 复制代码 代码如下: // Add which for click: 1 === left; 2 === middle; 3
-
读jQuery之二（两种扩展）
如下 复制代码 代码如下: jQuery.extend = jQuery.fn.extend = function() { ... }; 我们可以用$.extend去扩展自定义的对象,如 复制代码 代码如下: var myself = {name:jack}; $.extend(myself, {setName: function(n){this.name=n;} }); myself.setName("tom"); 通过$.extend为对象myself添加了setName方法.但这
-
读jQuery之一(对象的组成)
对于jQuery的写法甚是困惑,尤其在使用Prototype的$后,一度不能理解jQuery的$.对于现在前端同学来说,可能第一个接触的就是jQuery了,他们会觉得很习惯,很自然. 至今电脑里还存放着当时的API文档,发个图感叹下 在这段时间内,我的入门老师是墨墨,其实至今他仍然是我敬仰的同事之一.他的编程造诣很高,相信早已突破了编程语言的限制.在大家都在使用Prototype.js的时候,在jQuery尚未在国内流行的时候,他就已经把jQuery引入到项目中了. 言归正传吧,目前的jQuer
-
读jQuery之六 缓存数据功能介绍
很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 复制代码 代码如下: <div data="some data">Test</div> <script> div.getAttribute('data'); // some data </script> 给页面中div添加了自定义属性"data"及值"some data".后续JS代码中使用getAttribute获取. jQuer