首頁 > 開發者 > JavaScript
jQuery有關事件綁定的函數太豐富了，今天由於某需求，需要一種每次點擊觸發不同的回呼函數的效果，因此瞄一瞄jQuery的API，發現toggle正是我要的，於是也給我架構添一個。但jQuery的實現太複雜了，閉包套嵌過多，我換另一種思路輕鬆實現了它。
下面是jQuery的實現：
//===============代理函數=============== proxy: function( fn, proxy, thisObject ) { if ( arguments.length === 2 ) { if ( typeof proxy === "string" ) { thisObject = fn; fn = thisObject[ proxy ]; proxy = undefined; } else if ( proxy && !jQuery.isFunction( proxy ) ) { thisObject = proxy; proxy = undefined; } } if ( !proxy && fn ) { proxy = function() { return fn.apply( thisObject || this, arguments ); }; } // Set the guid of unique handler to the same of original handler, so it can be removed if ( fn ) { proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; } // So proxy can be declared as an argument return proxy; },//===============綁定切換函數=============== toggle: function( fn ) { // Save reference to arguments for access in closure var args = arguments, i = 1; // link all the functions, so any of them can unbind this click handler while ( i < args.length ) { jQuery.proxy( fn, args[ i++ ] ); } return this.click( jQuery.proxy( fn, function( event ) { // Figure out which function to execute var lastToggle = ( jQuery.data( this, "lastToggle" + fn.guid ) || 0 ) % i; jQuery.data( this, "lastToggle" + fn.guid, lastToggle + 1 ); // Make sure that clicks stop event.preventDefault(); // and execute the function return args[ lastToggle ].apply( this, arguments ) || false; })); },
這是我的實現：
toggle:function(/*fn1,fn2,fn3*/){ var callback = function(event){ var self = arguments.callee; try{ self["fn"+self._toggle].call(this,event) }catch(e){ self._toggle =0 ; self["fn"+self._toggle].call(this,event) } self._toggle ++ } for(var i=0;i<arguments.length;i++){ callback["fn"+i] = arguments[i]; } return this.click(callback) }
由於我不可能把我的事件模組放出來，它與jQuery的事件模組一樣精緻與複雜，換言之，一樣易碎，強行分割就動彈不了。不過結合我早期放出的addEvent函數，還是能做出來的，雖然事件隊列與事件對象還沒有現整化。
var addEvent = function(el, type, fn) { if (el.addEventListener) { el.addEventListener(type, fn, false);//DOM2.0 }else if (el.attachEvent) { el.attachEvent('on' + type, function(){ fn.call(el,window.event) }); } } var toggle = function(el/*,fn1,fn2,fn3*/){ var callback = function(event){ var self = arguments.callee; try{ self["fn"+self._toggle].call(this,event) }catch(e){ self._toggle =0 ; self["fn"+self._toggle].call(this,event) } self._toggle ++ } var fns = [].slice.call(arguments,1); for(var i=0;i<fns.length;i++){ callback["fn"+i] = fns[i]; } addEvent(el,"click",callback); }//=========經群裡高人指點，繼續簡化與最佳化===== var toggle2 = function(el) { var fns = [].slice.call(arguments, 1), backup = fns.concat(); addEvent(el, 'click', function(e){ if (!fns.length) { fns = backup.concat()} fns[0].call(this,e); fns.shift(); }); };
用法與例子：
<br /><!doctype html><br /><html lang="en"><br /> <head><br /> <meta charset="utf-8" /><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <title>綁定切換 by 司徒正美 </title><br /> <style type="text/css"></p><p> #box {<br /> width:200px;<br /> height:200px;<br /> border:1px solid black;<br /> position:absolute;<br /> left:20ex;<br /> top:100px;<br /> background-color:#EEE8AA;<br /> }<br /> </style><br /> <link rel="kinetic-stylesheet" type="text/css" href="demo.kss" /> </p><p> <script type="text/javascript"><br /> var addEvent = function(el, type, fn) {<br /> if (el.addEventListener) {<br /> el.addEventListener(type, fn, false);//DOM2.0<br /> }else if (el.attachEvent) {<br /> el.attachEvent('on' + type, function(){<br /> fn.call(el,window.event)<br /> });<br /> }<br /> }<br /> var toggle = function(el/**/){<br /> var callback = function(event){<br /> var self = arguments.callee;<br /> try{<br /> self["fn"+self._toggle].call(this,event)<br /> }catch(e){<br /> self._toggle =0 ;<br /> self["fn"+self._toggle].call(this,event)<br /> }<br /> self._toggle ++<br /> }<br /> var fns = [].slice.call(arguments,1);<br /> for(var i=0;i<fns.length;i++){<br /> callback["fn"+i] = fns[i];<br /> }<br /> addEvent(el,"click",callback);<br /> }<br /> window.onload = function(){<br /> var el = document.getElementById("box");<br /> toggle(el,function(e){<br /> alert(e.type)<br /> alert("這是回呼函數一")<br /> },function(e){<br /> alert("切換到回呼函數二")<br /> },function(){<br /> alert(this)<br /> alert("切換到回呼函數三")<br /> });<br /> }</p><p> </script><br /> </head><br /> <body></p><p> <div id="box"></div></p><p> </body><br /></html><br />
運行代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
