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

如何傳參數給事件handler？剛接觸Javascript的時候，由於對閉包理解不深刻，常常糾結於此問題。

在討論群組也常常碰到這樣的問題，如下

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:





   
   


 Click me
 

  // 預設事件對象將作為handler的第一個參數傳入，
  // 這時點選連結第一個彈出的是事件對象，第二個是undefined。   E.on(document.getElementById('aa'),'click',handler);

 

如何把參數v1，v2傳給handler？預設事件對象將作為handler的第一個參數傳入，這時點選連結第一個彈出的是事件對象，第二個是undefined。 方案一，未保留事件物件作為第一個參數傳入

複製程式碼


程式碼如下:


function handler(arg1,arg2){

 alert(arg1);
 alert(arg2);
}

E.on(document.getElementById('aa'ById('aa'ById('aa'ById('aa'ById('aa'ById('aa'ById('aa'),' click',function(){  handler(arg1,arg2); });方案二，保留事件物件為第一個參數 

複製程式碼


程式碼如下:


function handler(e,arg1,arg2){
  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 = function(){
 var _this = this, args = function(){
 var _this = this, args = arguments; (e) {

        return _this.apply(this || window, args);    };}E.on(document.getElementById('lick),ler' .getCallback(v1,v2));方案四，加入Function.prototypegetCallback，保留事件物件作為第一個參數傳入 複製程式碼 程式碼如下:Function.prototype.getCallback = function(){ var _this = this, args = []; for(var i=0,l=arguments.length;i  args[i 1] = arguments[i]; } return function(e) {  args[0] = e;        return _this.apply(this || window, args);    };}}.on(docum 'click',handler.getCallback(v1,v2));