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 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
Python yield 使用方法浅析
2017/05/20 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
Python 防止死锁的方法
2020/07/29 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
行政文员岗位职责
2013/11/08 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
施工资料员岗位职责
2014/01/06 职场文书
汽车维修求职信
2014/06/15 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
瘦西湖导游词
2015/02/03 职场文书
人事聘任通知
2015/04/21 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL