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

2024-05-06 15:56:59

字體：大中小

來源：轉載

供稿：網友

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

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

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

復制代碼代碼如下:

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