給事件響應(yīng)函數(shù)傳參數(shù)的四種方式小結(jié)

2019-11-20 21:31:19

字體：大中小

供稿：網(wǎng)友

如何給事件handler傳參數(shù)？在剛剛接觸Javascript的時候，由于對閉包理解不深刻，常常糾結(jié)于該問題。

在討論群里也經(jīng)常碰到這樣的問題，如下

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>如何給事件handler傳參數(shù)？</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);
  }

  // 如何把參數(shù)v1，v2傳給handler？
  // 默認(rèn)事件對象將作為handler的第一個參數(shù)傳入，
  // 這時點擊鏈接第一個彈出的是事件對象，第二個是undefined。    
  E.on(document.getElementById('aa'),'click',handler);
 </script>
</body>
</html>

如何把參數(shù)v1，v2傳給handler？默認(rèn)事件對象將作為handler的第一個參數(shù)傳入，這時點擊鏈接第一個彈出的是事件對象，第二個是undefined。

方案一，未保留事件對象作為第一個參數(shù)傳入

復(fù)制代碼代碼如下:

function handler(arg1,arg2){
 alert(arg1);
 alert(arg2);
}
E.on(document.getElementById('aa'),'click',function(){ 
 handler(arg1,arg2); 
});

方案二，保留事件對象作為第一個參數(shù)

復(fù)制代碼代碼如下:

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，不保留事件對象

復(fù)制代碼代碼如下:

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，保留事件對象作為第一個參數(shù)傳入

復(fù)制代碼代碼如下:

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));