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 相关文章推荐
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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的5个入手程序
2006/11/23 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
jquery编写日期选择器
2017/03/16 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
定制FileField中的上传文件名称实例
2017/08/23 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Pytorch中.new()的作用详解
2020/02/18 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
中国央视网签名寄语
2014/01/18 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android