JavaScript 动态给 onclick 赋值并传递参数的正确方法

错误示例：直接调用导致立即执行

HTML代码部分

 
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>

JavaScript代码部分

 
<script>
function show(value)
{ 
alert(value);
} 
btn.onclick = show(certid.value);
</script>

上述代码在执行时会报错。原因在于 `show(certid.value)` 这一行会立即执行 `show` 函数，而不是将函数对象赋值给 `btn.onclick` 事件处理程序，因此无法实现预期的延迟调用效果。

 
btn.onclick = show;

此时虽然正确赋值了函数对象，但无法向该函数传递参数。

因此，正确的写法应当如下所示，为了更清晰地展示参数传递过程，我们增加一个参数：

HTML代码部分

 
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>

JavaScript代码部分

 
<script>
function show(value1,value2)
{ 
alert(value1+","+value2);
} 
var i = 10;
btn.onclick = function(){
show(certid.value,i);
}; 
</script>

通过这种方式，我们成功实现了动态为 onclick 事件句柄赋值，并支持在事件触发时传递参数。