onclick事件處理函式傳遞引數

螞蟻小編發表於2017-03-16
事件函式

在實際應用中可能需要為事件處理函式傳遞引數，下面就介紹一下如何實現此功能。

先看一段簡單例項程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script type="text/javascript">
window.onload=function(){
  var txt="螞蟻部落";
  var bt=document.getElementById("bt");
  var thetxt=document.getElementById("thetxt");
  bt.onclick=function(ev,txt){
    bt.value=ev;
    thetxt.value=txt;
  }
}
</script>
</head> 
<body> 　
<input type="text" id="thetxt"/>　　 
<input type="button" id="bt" value="點選檢視效果" />
</body>  
</html>

由以上程式碼可以看出以此種方式傳遞引數，第一個傳遞的是事件物件，第二個不能夠傳遞引數，所以必須轉換一下思路。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<script type="text/javascript">
window.onload=function(){
  var txt="螞蟻部落";
  var bt=document.getElementById("bt");
  var thetxt=document.getElementById("thetxt");
  function set(txt){
    thetxt.value=txt;
  }
  bt.onclick=function(){
    set(txt);
  }
}
</script>
</head> 
<body> 　
<input type="text" id="thetxt"/>　　 
<input type="button" id="bt" value="點選檢視效果" />
</body>  
</html>

以上程式碼實現了我們的要求，其實非常的簡單，就是再事件處理函式中，再巢狀一層函式就可以了。

相關文章