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事件句柄赋值,并支持参数的传递.
Javascript 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
Angular5.1新功能分享
Dec 21 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
JS简单表单验证功能完整示例
2020/01/26 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
python删除服务器文件代码示例
2018/02/09 Python
浅谈python常用程序算法
2019/03/22 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
学校先进集体事迹材料
2014/05/31 职场文书
简易版租房协议书范本
2014/10/13 职场文书
工作年限证明模板
2014/11/01 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js