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和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
Jquery Fade用法详解
Nov 06 jQuery
微信小程序实现页面左右滑动
Nov 16 Javascript
前端如何实现动画过渡效果
Feb 05 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支持页面回退的两种方法[转]
2007/02/14 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
一个javascript参数的小问题
2008/03/02 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
Python脚本处理空格的方法
2016/08/08 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
考试作弊检讨书大全
2014/02/18 职场文书
家长学校培训材料
2014/08/20 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
你需要掌握的20个Python常用技巧
2022/02/28 Python
Java实现注册登录跳转
2022/06/16 Java/Android