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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
Vue实现手机计算器
Aug 17 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
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
js中的this关键字详解
2013/09/25 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python调用cmd复制文件代码分享
2013/12/27 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python+django实现文件下载
2016/01/17 Python
浅谈python中set使用
2016/06/30 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python基础教程之while循环
2019/08/14 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
HTML5文档结构标签
2017/04/21 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
竞选村长演讲稿
2014/04/28 职场文书
标准发言稿结尾
2019/07/18 职场文书
教你用python实现12306余票查询
2021/06/30 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android