萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 給事件響應函數傳參數的四種方式小結

給事件響應函數傳參數的四種方式小結

     這篇文章主要介紹了給事件響應函數傳參數的四種方式。需要的朋友可以過來參考下,希望對大家有所幫助

     如何給事件handler傳參數?在剛剛接觸Javascript的時候,由於對閉包理解不深刻,常常糾結於該問題。   在討論群裡也經常碰到這樣的問題,如下   代碼如下: <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8">     <title>如何給事件handler傳參數?</title> </head> <body>  <a href="#" id="aa">Click me</a>  <script type="text/javascript">   var E = {    on : function(el, type, fn){     el.addEventListener ?      el.addEventListener(type, fn, false) :      el.attachEvent("on" + type, fn);    },    un : function(el,type,fn){     el.removeEventListener ?      el.removeEventListener(type, fn, false) :      el.detachEvent("on" + type, fn);      }   };     var v1 = 'jack', v2 = 'lily';         function handler(arg1,arg2){    alert(arg1);    alert(arg2);   }     // 如何把參數v1,v2傳給handler?   // 默認事件對象將作為handler的第一個參數傳入,   // 這時點擊鏈接第一個彈出的是事件對象,第二個是undefined。       E.on(document.getElementById('aa'),'click',handler);  </script> </body> </html>   如何把參數v1,v2傳給handler?默認事件對象將作為handler的第一個參數傳入,這時點擊鏈接第一個彈出的是事件對象,第二個是undefined。   方案一 ,未保留事件對象作為第一個參數傳入      代碼如下: function handler(arg1,arg2){  alert(arg1);  alert(arg2); } E.on(document.getElementById('aa'),'click',function(){   handler(arg1,arg2);  });   方案二,保留事件對象作為第一個參數   代碼如下: function handler(e,arg1,arg2){  alert(e);  alert(arg1);  alert(arg2); } E.on(document.getElementById('aa'),'click',function(e){  handler(e,arg1,arg2); });   方案三,給Function.prototype添加getCallback,不保留事件對象  代碼如下: Function.prototype.getCallback = function(){  var _this = this, args = arguments;    return function(e) {         return _this.apply(this || window, args);     }; } E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));   方案四,給Function.prototype添加getCallback,保留事件對象作為第一個參數傳入  代碼如下: Function.prototype.getCallback = function(){  var _this = this, args = [];  for(var i=0,l=arguments.length;i<l;i++){   args[i+1] = arguments[i];  }  return function(e) {   args[0] = e;         return _this.apply(this || window, args);     }; } E.on(document.getElementById('aa'),'click',handler.getCallback(v1,v2));    
copyright © 萬盛學電腦網 all rights reserved