js如何給繫結的事件處理函式傳遞引數

admin發表於2017-03-19
JS事件函式

在實際應用中，可能需要為繫結的事件處理函式傳遞引數，但是可能初學者對於此操作存在一定的使用誤區，下面就通過程式碼例項簡單對此做一下介紹，希望能給初學者帶來一定的幫助。

先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
div
{
  width:100px;
  height:100px;
  background:red;
}
</style>
<script type="text/javascript">  
function setWdith(obj,width)
{
  obj.style.width=width+"px";
}
window.onload=function()
{
  var thediv=document.getElementById("thediv");
  var bt=document.getElementById("bt");
  bt.onclick=setWdith(thediv,200)
}
</script>  
</head>  
<body>  
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

以上程式碼中，本意是當點選按鈕的時候，能夠設定div的寬度，但是上面的程式碼通過bt.onclick=setWdith(thediv,200)註冊事件處理函式是錯誤的，因為setWdith(thediv,200)直接就執行了，所以沒有點選按鈕的時候也會設定div的寬度，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<style type="text/css">
div
{
  width:100px;
  height:100px;
  background:red;
}
</style>
<script type="text/javascript">  
function setWdith(obj,width){
  return function(){
    obj.style.width=width+"px";
  }
}
window.onload=function(){
  var thediv=document.getElementById("thediv");
  var bt=document.getElementById("bt");
  bt.onclick=setWdith(thediv,200)
}
</script>  
</head>  
<body>  
<div id="thediv"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

以上程式碼實現了我們的要求，就是讓setWdith()函式一個函式的引用，此函式能夠設定尺寸。

相關文章