本文通过实例解析如何在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 事件句柄赋值,并支持在事件触发时传递参数。