编程 Javascript

js给onclick事件赋值，动态传参数实例解说

Posted in Javascript onMarch 28, 2013

我们先看看错误的例子
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事件句柄赋值,并支持参数的传递.

js给onclick事件赋值，动态传参数实例解说

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS代码放在head和body中的区别分析

Dec 01 Javascript

Javascript实现页面跳转的几种方式分享

Oct 26 Javascript

JSON相关知识汇总

Jul 03 Javascript

创建自己的jquery表格插件

Nov 25 Javascript

全面解析Bootstrap手风琴效果

Apr 17 Javascript

一个仿微博登陆邮箱提示框js开发案例

Jul 28 Javascript

jquery实现折叠菜单效果【推荐】

Mar 08 Javascript

移动端使用localResizeIMG4压缩图片

Apr 22 Javascript

Angular2学习笔记之数据绑定的示例代码

Jan 03 Javascript

JS随机数产生代码分享

Feb 24 Javascript

VueCli3构建TS项目的方法步骤

Nov 07 Javascript

微信小程序pinker组件使用实现自动相减日期

May 07 Javascript

自定义jQuery选项卡插件实例

Mar 27 #Javascript

js数组的操作详解

Mar 27 #Javascript

jquery获取tr中控件值并操作tr实现思路

Mar 27 #Javascript

css transform 3D幻灯片特效实现步骤解读

Mar 27 #Javascript

JS删除数组元素的函数介绍

Mar 27 #Javascript

jquery struts 验证唯一标识(公用方法)

Mar 27 #Javascript

Json对象与Json字符串互转(4种转换方式)

Mar 27 #Javascript