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 函数链之演变
Apr 07 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue滑动吸顶及锚点定位的示例代码
May 10 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制作静态网站的模板框架(一)
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
在Python中使用元类的教程
2015/04/28 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
使用python绘制二维图形示例
2019/11/22 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
盛大笔试题
2016/11/05 面试题
机电一体化专业应届生求职信
2013/11/27 职场文书
《去年的树》教学反思
2014/04/11 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
教师节简报
2015/07/20 职场文书
2016年入党心得体会范文
2016/01/23 职场文书