javascript如何給事件處理函式傳遞引數

antzone發表於2017-03-15
JavaScript事件函式

在實際應用中，事件處理函式也是需要引數，下面就通過例項程式碼介紹一下如何實現此功能。

先看一段例項程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件處理函式傳遞引數-螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var ocontent=document.getElementById("content");
  var bt=document.getElementById("bt");
  function setContent(content){
     ocontent.innerHTML=content;
  }
  bt.onclick=setContent("螞蟻部落");
}
</script>
</head>
<body>
<div id="content"></div>
<input type="button" value="檢視結果" id="bt"/>
</body>
</html>

通過以上方式並不能夠正確的註冊事件處理函式，因為函式直接就執行了，下面簡單做一下變通，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件處理函式傳遞引數-螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var ocontent=document.getElementById("content");
  var bt=document.getElementById("bt");
  function setContent(content){
     ocontent.innerHTML=content;
  }
  bt.onclick=function(){setContent("螞蟻部落");}
}
</script>
</head>
<body>
<div id="content"></div>
<input type="button" value="檢視結果" id="bt"/>
</body>
</html>

以上程式碼實現了我們的要求，成功模擬實現了為事件處理函式傳遞引數。

相關文章