js给onclick事件赋值，动态传参数实例解说
时间：2020-12-13 11:11:48|栏目：JavaScript代码|点击： 次
我们先看看错误的例子
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事件句柄赋值,并支持参数的传递.
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事件句柄赋值,并支持参数的传递.
上一篇：JavaScript字符串对象substring方法入门实例（用于截取字符串）
栏 目：JavaScript代码
下一篇：bootstrap 模态框（modal）实现水平垂直居中显示
本文地址：http://www.codeinn.net/misctech/32441.html
