最近在使用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/),發(fā)現(xiàn)原來jQuery.Event 構(gòu)造器暴露出來，然后通過$.trigger來觸發(fā),然后來了個簡單的例子
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都是undefined15 })16 $( "#input-1" ).trigger( e ); 17 })18 </script>19 </body>20 </html>
雖然keydown事件中event.name明顯是不存在，但是我們通過$.Eevent依然可以輸出值65，也就是$.Event通過trigger默認(rèn)觸發(fā)事件把屬性name綁定到keydown的事件，所以頁面加載的時候就輸出65，如果你此刻再去對input進(jìn)行keydown 就顯示undefined，根據(jù)jQuery官網(wǎng)翻譯知道傳入的參數(shù)的參數(shù)可以根據(jù)事件的情況而變化，可以是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，我們仿造其原理制作如下函數(shù)
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)//INPOUT25 alert(event.user)//foo26 })27 })28 </script>29 </body>30 </html>
事實證明$.Event在自定義函數(shù)上面有很強大的 功能存在，通過relatedTarget來指向?qū)?yīng)事件的目標(biāo)DOM元素，如果你看了bootstrap的tab的案例，瞬間就會覺得此功能作用甚大，可是不經(jīng)間發(fā)現(xiàn)了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">點擊執(zhí)行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("執(zhí)行了click的事件");24 },25 focusEvent:function(){26 alert("執(zhí)行了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，一定也實現(xiàn)了這種方式，果不其然，在transtion.js中可以看到赤裸裸的如何實現(xiàn)這樣的方式，同樣我們按照transtion.js做了一個精簡來執(zhí)行下面函數(shù)
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("執(zhí)行one('bsTransitionEnd')自定義事件");35 })36 //在webkit的條件下$.support.transition.end=webkitTransitionEnd37 $(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的方式來查找對應(yīng)執(zhí)行函數(shù)，這個其實就是原聲js 的 handleEvent的jQuery實現(xiàn)方式！有時候一個點就可以帶出一個面！
聯(lián)系客服
