读jQuery之十四 (触发事件核心方法)


Posted in Javascript onAugust 23, 2011

在 事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件。如下

... 
dispatch = w3c ? 
function(el, type){ 
try{ 
var evt = document.createEvent('Event'); 
evt.initEvent(type,true,true); 
el.dispatchEvent(evt); 
}catch(e){alert(e)}; 
} : 
function(el, type){ 
try{ 
el.fireEvent('on'+type); 
}catch(e){alert(e)} 
}; 
...

jQuery则完全没有用到dispatchEvent/fireEvent方法。它采用的是另外一种机制。
jQuery触发事件的核心方法是jQuery.event.trigger。它提供给客户端程序员使用的触发事件方法有两个:.trigger/.triggerHandler
读jQuery之十四 (触发事件核心方法)
一个事件的发生在某些元素中可能会导致两种动作,一个是默认行为,一个是事件handler。如链接A
<a href="http://mail.sina.com.cn" onclick="alert(1);">新浪邮箱</a>
点击后,弹出1(事件handler),点确定跳转(默认行为)到了mail.sina.com.cn。因此,设计的触发事件的函数要考虑到这两种情况。
jQuery使用.trigger和.triggerHandler区分了这两种情况:
.trigger 执行事件hanlder/执行冒泡/执行默认行为
.triggerHandler 执行事件handler/不冒泡/不执行默认行为
.trigger/.triggerHandler的源码如下 
trigger: function( type, data ) { 
return this.each(function() { 
jQuery.event.trigger( type, data, this ); 
}); 
}, 
triggerHandler: function( type, data ) { 
if ( this[0] ) { 
return jQuery.event.trigger( type, data, this[0], true ); 
} 
},

可以看出,两者都调用jQuery.event.trigger。调用时一个没有传true,一个传了。传了true的triggerHander就表示仅执行事件handler。
此外还需注意一点区别:.trigger是对jQuery对象集合的操作,而.triggerHandler仅操作jQuery对象的第一个元素。如下
<p>p1</p> 
<p>p1</p> 
<p>p1</p> 
<script> 
$('p').click(function(){alert(1)}); 
$('p').trigger('click'); // 弹3次,即三个p的click都触发了 
$('p').triggerHandler('click'); // 仅弹1次,即只触发第一个p的click 
</script>

好了,是时候贴出jQuery.event.trigger的代码了
trigger: function( event, data, elem, onlyHandlers ) { 
// Event object or event type 
var type = event.type || event, 
namespaces = [], 
exclusive; 
...... 
}

这就是jQuery.event.trigger的定义,省略了大部分。下面一一列举
if ( type.indexOf("!") >= 0 ) { 
// Exclusive events trigger only for the exact event (no namespaces) 
type = type.slice(0, -1); 
exclusive = true; 
}

这一段是为了处理.trigger('click!')的情形,即触发非命名空间的事件。变量exclusive挂在事件对象上后在jQuery.event.handle内使用。举个例子
function fn1() { 
console.log(1) 
} 
function fn2() { 
console.log(2) 
} 
$(document).bind('click.a', fn1); 
$(document).bind('click', fn2); 
$(document).trigger('click!'); // 2

为document添加了两个点击事件,一个是具有命名空间的"click.a",一个则没有"click"。使用trigger时参数click后加个叹号"!"。从输出结果为2可以看出不触发命名空间的事件。总结一下:
.trigger('click') 触发所有的点击事件
.trigger('click.a') 仅触发“click.a” 的点击事件
.trigger('click!') 触发非命名空间的点击事件
接着看
if ( type.indexOf(".") >= 0 ) { 
// Namespaced trigger; create a regexp to match event type in handle() 
namespaces = type.split("."); 
type = namespaces.shift(); 
namespaces.sort(); 
}

这段就很好理解了,就是对.trigger('click.a')的处理,即对具有命名空间事件的处理。
接着看
if ( (!elem || jQuery.event.customEvent[ type ]) && !jQuery.event.global[ type ] ) { 
// No jQuery handlers for this event type, and it can't have inline handlers 
return; 
}

对于一些特殊事件如"getData"或对于已经触发过的事件直接返回。
往下
event = typeof event === "object" ? 
// jQuery.Event object 
event[ jQuery.expando ] ? event : 
// Object literal 
new jQuery.Event( type, event ) : 
// Just the event type (string) 
new jQuery.Event( type );

有三种情况
,event 本身就是jQuery.Event类的实例
,event是个普通js对象(非jQuery.Event类的实例)
,event是个字符串,如"click"

event.type = type;
event.exclusive = exclusive;
event.namespace = namespaces.join(".");
event.namespace_re = new RegExp("(^|\\.)" + namespaces.join("\\.(?:.*\\.)?") + "(\\.|$)");
需要注意exclusive/namespace/namespace_re挂到了event上了,在jQuery.event.handle中可以用到(事件命名空间)。
往下是
// triggerHandler() and global events don't bubble or run the default action 
if ( onlyHandlers || !elem ) { 
event.preventDefault(); 
event.stopPropagation(); 
}

onlyHandlers 只在 .triggerHandler用到了,即不触发元素的默认行为,且停止冒泡。
下面是
// Handle a global trigger 
if ( !elem ) { 
// TODO: Stop taunting the data cache; remove global events and always attach to document 
jQuery.each( jQuery.cache, function() { 
// internalKey variable is just used to make it easier to find 
// and potentially change this stuff later; currently it just 
// points to jQuery.expando 
var internalKey = jQuery.expando, 
internalCache = this[ internalKey ]; 
if ( internalCache && internalCache.events && internalCache.events[ type ] ) { 
jQuery.event.trigger( event, data, internalCache.handle.elem ); 
} 
}); 
return; 
}

这里是个递归调用。如果没有传elem元素,那么从jQuery.cache里取。
接着是
// Don't do events on text and comment nodes 
if ( elem.nodeType === 3 || elem.nodeType === 8 ) { 
return; 
}

属性,文本节点直接返回。
下面是
// Clone any incoming data and prepend the event, creating the handler arg list 
data = data != null ? jQuery.makeArray( data ) : []; 
data.unshift( event );

先将参数data放入数组,event对象放在数组的第一个位置。
接着是
// Fire event on the current element, then bubble up the DOM tree 
do { 
var handle = jQuery._data( cur, "handle" ); 
event.currentTarget = cur; 
if ( handle ) { 
handle.apply( cur, data ); 
} 
// Trigger an inline bound script 
if ( ontype && jQuery.acceptData( cur ) && cur[ ontype ] && cur[ ontype ].apply( cur, data ) === false ) { 
event.result = false; 
event.preventDefault(); 
} 
// Bubble up to document, then to window 
cur = cur.parentNode || cur.ownerDocument || cur === event.target.ownerDocument && window; 
} while ( cur && !event.isPropagationStopped() );

这段代码很重要,做了以下事情
,取handle
,执行
,执行通过onXXX方式添加的事件(如onclick="fun()")
,取父元素
while循环不断重复这四步以模拟事件冒泡。直到window对象。
接下是
// If nobody prevented the default action, do it now 
if ( !event.isDefaultPrevented() ) { 
var old, 
special = jQuery.event.special[ type ] || {}; 
if ( (!special._default || special._default.call( elem.ownerDocument, event ) === false) && 
!(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { 
// Call a native DOM method on the target with the same name name as the event. 
// Can't use an .isFunction)() check here because IE6/7 fails that test. 
// IE<9 dies on focus to hidden element (#1486), may want to revisit a try/catch. 
try { 
if ( ontype && elem[ type ] ) { 
// Don't re-trigger an onFOO event when we call its FOO() method 
old = elem[ ontype ]; 
if ( old ) { 
elem[ ontype ] = null; 
} 
jQuery.event.triggered = type; 
elem[ type ](); 
} 
} catch ( ieError ) {} 
if ( old ) { 
elem[ ontype ] = old; 
} 
jQuery.event.triggered = undefined; 
} 
}

这一段是对于浏览器默认行为的触发。如form.submit(),button.click()等。
注意,由于Firefox中链接的安全性限制,jQuery对链接的默认行为都统一为不能触发。即不能通过.trigger()使链接跳转。
Javascript 相关文章推荐
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
DWR中各种java方法的调用
May 04 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 #Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 #Javascript
jquery 回车事件实现代码
Aug 23 #Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 #Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 #Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 #Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 #Javascript
You might like
javascript web页面刷新的方法收集
2009/07/02 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Python 制作糗事百科爬虫实例
2016/09/22 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python读取xml文件方法解析
2020/08/04 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
劳动竞赛口号
2014/06/16 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
律师催款函范文
2015/06/24 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
排查MySQL生产环境索引没有效果
2022/04/11 MySQL