最近在使用Bootstrap.js,一不小心趴开源码看了一下，尤其是看到tab.js
1 var hideEvent = $.Event('hide.bs.tab', { 2 relatedTarget: $this[0] 3 }) 4 5 var showEvent = $.Event('show.bs.tab', { 6 relatedTarget: $previous[0] 7 }) 8 9 $previous.trigger(hideEvent) 10 $this.trigger(showEvent)
看到这里的时候，顿时一头雾水！然后立马去查了jquery的官方API(http://api.jquery.com/category/events/event-object/),发现原来jQuery.Event 构造器暴露出来，然后通过$.trigger来触发,然后来了个简单的例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>$.Event</title> 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> 7 </head> 8 <body> 9 <input type="text" id="input-1" /> 10 <script> 11 $(function(){ 12 var e = jQuery.Event( "keydown",{name:65}); 13 $("#input-1").on("keydown",function(event){ 14 console.log(event.name);//初始化的时候输出 65 ，以后每次keydown都是undefined 15 }) 16 $( "#input-1" ).trigger( e ); 17 }) 18 </script> 19 </body> 20 </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，我们仿造其原理制作如下函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>$.Event</title> 6 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> 7 </head> 8 <body> 9 <input type="text" id="input-1" /> 10 <script> 11 +function($){ 12 function testEvent(){ 13 var hidden = jQuery.Event( "hide.bs",{ 14 user:"foo", 15 pass:"bar", 16 relatedTarget: $("#input-1")[0] 17 }); 18 $( "#input-1" ).trigger(hidden); 19 } 20 $("#input-1").on("click",testEvent); 21 }(jQuery) 22 $(function(){ 23 $( "#input-1" ).on("hide.bs",function(event){ 24 alert(event.relatedTarget.tagName)//INPOUT 25 alert(event.user)//foo 26 }) 27 }) 28 </script> 29 </body> 30 </html>
事实证明$.Event在自定义函数上面有很强大的 功能存在，通过relatedTarget来指向对应事件的目标DOM元素，如果你看了bootstrap的tab的案例，瞬间就会觉得此功能作用甚大，可是不经间发现了transition.js中对于$.Event的用法让人大吃一惊，在原生js中有handleEvent(IE9+支持)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js Handler 事件</title> 6 </head> 7 <body> 8 <button id="btn-1">点击执行click事件</button> 9 <input type="text" id="input-1" /> 10 <script type="text/javascript"> 11 var Events={ 12 handleEvent: function(event) { 13 switch (event.type) { 14 case "click": 15 this.clickEvent(event); 16 break; 17 case "focus": 18 this.focusEvent(event); 19 break; 20 } 21 }, 22 clickEvent:function(){ 23 alert("执行了click的事件"); 24 }, 25 focusEvent:function(){ 26 alert("执行了focus的事件"); 27 } 28 } 29 if(window.addEventListener){ 30 document.getElementById("btn-1").addEventListener("click",Events,false); 31 document.getElementById("input-1").addEventListener("focus",Events,false); 32 } 33 </script> 34 </body> 35 </html>
同样作为大名鼎鼎的jquery，一定也实现了这种方式，果不其然，在transtion.js中可以看到赤裸裸的如何实现这样的方式，同样我们按照transtion.js做了一个精简来执行下面函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>handlerEvent</title> 7 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script> 8 <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.css"> 9 </head> 10 11 <body> 12 <button id="btn-1">按钮-1</button> 13 <script type="text/javascript"> 14 (function($) { 15 function transitionEnd() { 16 var el = document.createElement('bootstrap') 17 var transEndEventNames = { 18 WebkitTransition: 'webkitTransitionEnd', 19 MozTransition: 'transitionend', 20 OTransition: 'oTransitionEnd otransitionend', 21 transition: 'transitionend' 22 } 23 for (var name in transEndEventNames) { 24 if (el.style[name] !== undefined) { 25 return { 26 end: transEndEventNames[name] 27 } 28 } 29 } 30 return false // explicit for ie8 ( ._.) 31 } 32 $.fn.emulateTransitionEnd = function(duration) { 33 $(this).one('bsTransitionEnd', function() { 34 alert("执行one('bsTransitionEnd')自定义事件"); 35 }) 36 //在webkit的条件下$.support.transition.end=webkitTransitionEnd 37 $(this).trigger($.support.transition.end) 38 39 } 40 $(function() { 41 $.support.transition = transitionEnd(); 42 if (!$.support.transition) return; 43 $.event.special.bsTransitionEnd = { 44 bindType: $.support.transition.end, 45 delegateType: $.support.transition.end, 46 handle: function(e) { 47 if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) 48 } 49 } 50 }) 51 })(jQuery) 52 $(function(){ 53 $("#btn-1").emulateTransitionEnd(); 54 }) 55 56 57 58 </script> 59 </body> 60 61 </html>
通过$.event.special.bsTransitionEnd的方式来查找对应执行函数，这个其实就是原声js 的 handleEvent的jQuery实现方式！有时候一个点就可以带出一个面！