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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Node与Python 双向通信的实现代码
Jul 16 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
我的论坛源代码(八)
2006/10/09 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Python 备份程序代码实现
2017/03/06 Python
python八皇后问题的解决方法
2018/09/27 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
浅析python 字典嵌套
2020/09/29 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
导游词之青城山景区
2019/09/27 职场文书
PHP策略模式写法
2021/04/01 PHP
Java 多态分析
2022/04/26 Java/Android