$.Event 你不知道的用法
最近在使用Bootstrap.js,一不小心趴开源码看了一下，尤其是看到tab.js
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})
var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})
$previous.trigger(hideEvent)
$this.trigger(showEvent)
看到这里的时候，顿时一头雾水！然后立马去查了jquery的官方API(http://api.jquery.com/category/events/event-object/),发现原来jQuery.Event 构造器暴露出来，然后通过$.trigger来触发,然后来了个简单的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.Event</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<input type="text" id="input-1" />
<script>
$(function(){
var e = jQuery.Event( "keydown",{name:65});
$("#input-1").on("keydown",function(event){
console.log(event.name);//初始化的时候输出 65 ，以后每次keydown都是undefined
})
$( "#input-1" ).trigger( e );
})
</script>
</body>
</html>
虽然keydown事件中event.name明显是不存在，但是我们通过$.Eevent依然可以输出值65，也就是$.Event通过trigger默认触发事件把属性name绑定到keydown的事件，所以页面加载的时候就输出65，如果你此刻再去对input进行keydown 就显示undefined，根据jQuery官网翻译知道传入的参数的参数可以根据事件的情况而变化，可以是altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, view, which
同样我们来拆解bootstrap中tab.js，我们仿造其原理制作如下函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.Event</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
</head>
<body>
<input type="text" id="input-1" />
<script>
+function($){
function testEvent(){
var hidden = jQuery.Event( "hide.bs",{
user:"foo",
pass:"bar",
relatedTarget: $("#input-1")[0]
});
$( "#input-1" ).trigger(hidden);
}
$("#input-1").on("click",testEvent);
}(jQuery)
$(function(){
$( "#input-1" ).on("hide.bs",function(event){
alert(event.relatedTarget.tagName)//INPOUT
alert(event.user)//foo
})
})
</script>
</body>
</html>
事实证明$.Event在自定义函数上面有很强大的 功能存在，通过relatedTarget来指向对应事件的目标DOM元素，如果你看了bootstrap的tab的案例，瞬间就会觉得此功能作用甚大，可是不经间发现了transition.js中对于$.Event的用法让人大吃一惊，在原生js中有handleEvent(IE9+支持)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js Handler 事件</title>
</head>
<body>
<button id="btn-1">点击执行click事件</button>
<input type="text" id="input-1" />
<script type="text/javascript">
var Events={
handleEvent: function(event) {
switch (event.type) {
case "click":
this.clickEvent(event);
break;
case "focus":
this.focusEvent(event);
break;
}
},
clickEvent:function(){
alert("执行了click的事件");
},
focusEvent:function(){
alert("执行了focus的事件");
}
}
if(window.addEventListener){
document.getElementById("btn-1").addEventListener("click",Events,false);
document.getElementById("input-1").addEventListener("focus",Events,false);
}
</script>
</body>
</html>
同样作为大名鼎鼎的jquery，一定也实现了这种方式，果不其然，在transtion.js中可以看到赤裸裸的如何实现这样的方式，同样我们按照transtion.js做了一个精简来执行下面函数
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>handlerEvent</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.css">
</head> <body>
<button id="btn-1">按钮-1</button>
<script type="text/javascript">
(function($) {
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition: 'webkitTransitionEnd',
MozTransition: 'transitionend',
OTransition: 'oTransitionEnd otransitionend',
transition: 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return {
end: transEndEventNames[name]
}
}
}
return false // explicit for ie8 ( ._.)
}
$.fn.emulateTransitionEnd = function(duration) {
$(this).one('bsTransitionEnd', function() {
alert("执行one('bsTransitionEnd')自定义事件");
})
//在webkit的条件下$.support.transition.end=webkitTransitionEnd
$(this).trigger($.support.transition.end) }
$(function() {
$.support.transition = transitionEnd();
if (!$.support.transition) return;
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function(e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
})(jQuery)
$(function(){
$("#btn-1").emulateTransitionEnd();
}) </script>
</body> </html>
通过$.event.special.bsTransitionEnd的方式来查找对应执行函数，这个其实就是原声js 的 handleEvent的jQuery实现方式！有时候一个点就可以带出一个面！
随机推荐
- C#中equals方法和==的区别
Msdn中对equals方法的解释是:确定指定的对象是否等于当前对象. Equals方法是比较对象的内容,而==则是比较整个对象是否相等. Equals方法判断的是堆中的值,而==则判断的是堆栈中的值 ...
- WCF如何在浏览器访问
1.新建wcf服务看到有如下两个方法,在浏览器调用框中的方法.
- 时间的获取和转换，C#和Sql
我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...
- C++输入和输出
本文转载:blog.csdn.net/zhanghaotian2011/article/details/8868577博客 输入和输出并不是C++语言中的正式组成成分｡C和C++本身都没有为输入和输出 ...
- Fragment之一：基本原理
1.低版本API对Fragment的支持 Fragment必须被加载进Acitivity中,才能呈现.而在低于3.0版本的API中,由于不存在Fragment,因此必须使用support包: (1)对 ...
- 懒省事的小明--nyoj55
懒省事的小明 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 小明很想吃果子,正好果园果子熟了.在果园里,小明已经将所有的果子打了下来,而且按果子的不同种类分成 ...
- SQL Server SQLOS
SQLOS 抽象出了: 1.任务高度管理子系统. 2.内存管理子系统. 3.错误,异常处理机制. 4.死锁侦测各解决机制. 5.运行第三方代码. 好处: 1.减少线种的上下文切换.空闲连接不占用线程.
- Java泛型介绍！！！
Java总结篇系列:Java泛型 转自:http://www.cnblogs.com/lwbqqyumidi/p/3837629.html 一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下 ...
- unity3D 锁屏再开程序崩溃
在Uniyt3d 调用Android Plugin 的时候,会出现锁屏后再开,程序就崩溃的的现象,解决办法就是在 AndroidManifest.xml 加入 android:configChang ...
- 安装oracle客户端（navicat for oracle）
本文使用Navicat for Oracle工具连接oracle 安装的过程我就不在此赘述,跟一般软件的安装过程类似.下面主要讲解Navicat的配置. 1.启动该工具,出现如下的开始界面,单击“连接 ...