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 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
自定义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
mysql 全文搜索 技巧
2007/04/27 PHP
php发送post请求函数分享
2014/03/06 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python threading多线程编程实例
2014/09/18 Python
Python中的各种装饰器详解
2015/04/11 Python
python列表list保留顺序去重的实例
2018/12/14 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Django 重写用户模型的实现
2019/07/29 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
中软国际Java程序员笔试题
2014/07/19 面试题
毕业赠语大全
2015/06/23 职场文书
创业计划书之水果店
2019/07/18 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
分析Python list操作为什么会错误
2021/11/17 Python
linux下安装redis图文详细步骤
2021/12/04 Redis