js创建一个input数组并绑定click事件的方法


Posted in Javascript onJune 12, 2014
</pre><pre name="code" class="javascript"><html> 
<body> 
<input type="button" name="input[]" value="按钮1" /><br /> 
<input type="button" name="input[]" value="按钮2" /><br /> 
<input type="button" name="input[]" value="按钮3" /><br /> <div id="add"></div> 
</body> 
</html> 
<script type="text/javascript"> 
// 通过 getElementsByTagName 获得都有 input 控件 
var inputs =document.getElementsByTagName("input"); 
// 为第0个button绑定onclick事件,alert一下 
inputs[0].onclick = function(){ 
alert("我测试一下"); 
} 
// 为每一个button绑定onclick事件,alert一下 
for(var i=0;i<inputs.length;i++){ 
inputs[i].onclick = function(){ 
alert("我测试一下"); 
} 
} 
window.onload = function(){ 
// 定义一个数组 arrs 
var arrs = new Array(); 
// 循环添加 
for(var i=0;i<2;i++){ 
// 循环添加两个 input type="button" value="新增"+i 
var input = document.createElement("input"); 
input.type = "button"; 
input.value = "新增" + i; 
// 记得把创建的 input 放入 arrs 中 
arrs.push(input); 
// 然后把 input 放入 id="add" 的div中 
document.getElementById("add").appendChild(input); 
} 
// 同样用 [0].onclick 绑定事件,依然没有问题 
arrs[0].onclick=function(){ 
alert("我又测试一下"); 
} 
}
</script>
Javascript 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 #Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 #Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
超级强大的表单验证
2006/06/26 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python使用pymysql小技巧
2017/06/04 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python程序如何进行保存
2020/07/03 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
入股协议书
2014/04/14 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
党小组鉴定意见
2015/06/02 职场文书
羊脂球读书笔记
2015/06/30 职场文书
结婚典礼致辞
2015/07/28 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python