$.Event你不知道的⽤法
最近在使⽤Bootstrap.js,⼀不⼩⼼趴开源码看了⼀下，尤其是看到tab.js
1var hideEvent = $.Event('hide.bs.tab', {
2 relatedTarget: $this[0]
3 })
4
5var showEvent = $.Event('show.bs.tab', {
6 relatedTarget: $previous[0]
7 })
8
9 $igger(hideEvent)
10 $igger(showEvent)
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>$.Event</title>
6<script src="libs.baidu/jquery/1.10.2/jquery.js"></script>
7</head>
8<body>
9<input type="text" id="input-1"/>
10<script>
11 $(function(){
12var 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="libs.baidu/jquery/1.10.2/jquery.js"></script>
7</head>
8<body>
9<input type="text" id="input-1"/>
10<script>
11 +function($){
12function testEvent(){
13var 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 latedTarget.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">
11var Events={
12 handleEvent: function(event) {
13switch (pe) {
14case "click":
15this.clickEvent(event);
16break;
17case "focus":
18this.focusEvent(event);
19break;
20 }
21 },
22 clickEvent:function(){
23 alert("执⾏了click的事件");
24 },
25 focusEvent:function(){
26 alert("执⾏了focus的事件");
27 }
28 }
29if(window.addEventListener){
30 ElementById("btn-1").addEventListener("click",Events,false);
31 ElementById("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="libs.baidu/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($) {
15function transitionEnd() {
16var el = ateElement('bootstrap')
17var transEndEventNames = {
18 WebkitTransition: 'webkitTransitionEnd',
19 MozTransition: 'transitionend',
20 OTransition: 'oTransitionEnd otransitionend',
21 transition: 'transitionend'
22 }
23for (var name in transEndEventNames) {
24if (el.style[name] !== undefined) {
25return {
26 end: transEndEventNames[name]
27 }
28 }
29 }
30return false// explicit for ie8 ( ._.)
31 }
32 $.fn.emulateTransitionEnd = function(duration) {
33 $(this).one('bsTransitionEnd', function() {
34 alert("执⾏one('bsTransitionEnd')⾃定义事件");
35 })
36//在webkit的条件下$.d=webkitTransitionEnd
transition用法搭配37 $(this).trigger($.d)
38
39 }
40 $(function() {
41 $.ansition = transitionEnd();
42if (!$.ansition) return;
43 $.event.special.bsTransitionEnd = {
44 bindType: $.d,
45 delegateType: $.d,
46 handle: function(e) {
47if ($(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实现⽅式！有时候⼀个点就可以带出⼀个⾯！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论