$.Event 用法
来源:互联网 发布:雅克比矩阵满秩 编辑:程序博客网 时间:2024/06/10 21:46
$.Event 用法
最近在使用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都是undefined15 })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)//INPOUT25 alert(event.user)//foo26 })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=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的方式来查找对应执行函数,这个其实就是原声js 的 handleEvent的jQuery实现方式!有时候一个点就可以带出一个面!
- $.Event 用法
- JS event用法详解
- event.srcElement的用法
- JS event用法详解
- event.srcElement的用法
- js event 用法
- mysql event用法
- mysql event的用法
- event.srcElement用法
- wince event用法实例
- event.srcElement的用法
- js event keyCode 用法
- bootstrap之$.Event用法
- event.keyCode用法详解
- window.event对象用法讲解
- 内核事件对象---EVENT用法
- 同步对象Event的用法
- JavaScript中的Event对象用法
- Android使用系统调用相册的时候打开了云相册出现CRASH或者找不到截图程序的解决方案
- 众觅,让支付宝『到位』全国到位
- shell sed中引用shell变量及空格表示方法
- first-class function
- POJ 1681 Painter's Problem 高斯消元 枚举自由变量
- $.Event 用法
- Handlebars学习之——HTML转义
- iOS网络检测Reachability使用
- JS中对象定义的几种方式
- TextView selector
- vue中用动态组件实现选项卡切换效果
- ZooKeeper学习笔记-1---ZooKeeper简介
- 初探STM32掉电复位PDR
- 在shell脚本中进行MAC地址的加减