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 相关文章推荐
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
基于JS实现快速读取TXT文件
2020/08/25 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
python中pdb模块实例用法
2021/01/15 Python
python openpyxl模块的使用详解
2021/02/25 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL