JavaScript為事件處理函式傳遞引數

antzone發表於2018-03-27
JavaScript事件函式

本章節就以click點選事件為例，介紹一下如何為事件處理函式傳遞引數。

[JavaScript] 純文字檢視 複製程式碼
ele.addEventListener('click', fun,false);
ele.attachevent('onclick',fun);
ele['onclick']=fun

上面的三種方式可以為元素註冊click事件處理函式。

特別說明第一種是標準瀏覽器的方式，第二種是IE11以下瀏覽器採用的方式，第三種就不用多說了，能夠相容各個瀏覽器。

但是為事件處理函式傳遞引數絕對不能是下面的方式:

[JavaScript] 純文字檢視 複製程式碼
ele.addEventListener('click',fun(arg1,arg2,arg3),false);
ele.attachevent('onclick',fun(arg1,arg2,arg3));
ele['onclick']=fun(arg1,arg2,arg3);

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function done(){
  arguments[0].innerHTML=arguments[1];
}
function bindFunction(obj,func){ 
  var args=[]; 
  for(var index=2;index<arguments.length;index++) {
    args.push(arguments[index]);
  }
  return function(){
    func.apply(obj,args);
  }
}
 
 
function addEvent(node,type,listener){
  if (node.addEventListener) { 
    node.addEventListener(type,listener,false); 
    return true;
  }
  else if (node.attachEvent) { 
    node.attachEvent('on' + type,listener); 
    return true; 
  }
};
window.onload=function(){
  var oshow=document.getElementById("show");
  var obt=document.getElementById("bt");
  addEvent(obt,"click",bindFunction(obt,done,oshow,"螞蟻部落"));
}
</script> 
</head> 
<body>
<div id="show"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了為事件處理函式傳遞引數的效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function done(){

  arguments[0].innerHTML=arguments[1];

}

宣告一個函式，當事件處理函式執行的時候，會呼叫此函式。

（2）.function bindFunction(obj,func){}，此函式可以返回一個匿名函式作為事件處理函式，並且此事件處理函式會為匿名函式傳遞一個陣列引數，第一個引數是元素物件，第二個引數是事件處理函式執行時呼叫的函式。

（3）.var args=[]，宣告一個陣列用來儲存傳遞的引數。

（4）.for(var index=2;index<arguments.length;index++) {

  args.push(arguments[index]);

}從第三個引數開始進行遍歷，因為從第三個引數開始，就相當於為事件處理函式傳遞的引數，並將相應的引數存入陣列。

（5）.return function(){

  func.apply(obj,args);

}

返回一個匿名函式，在這裡func函式使用apply進行了一下處理，目的是為了能夠接收一個陣列。

（6）.function addEvent(node,type,listener){

  if (node.addEventListener) { 

    node.addEventListener(type,listener,false); 

    return true;

  }

  else if (node.attachEvent) { 

    node.attachEvent('on' + type,listener); 

    return true; 

  }

};

為指定元素註冊事件處理函式，上面是相容性處理。

二.相關閱讀:

（1）.apply()方法參閱javascript apply()一章節。

（2）.push()方法參閱javascript push()一章節。

（3）.addEventListener()方法參閱addEventListener()用法一章節。

相關文章