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运行机制之this详细介绍
Feb 07 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
web打印小结
Jan 11 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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 CodeIgniter框架的工作原理研究
2015/03/30 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
js date 格式化
2017/02/15 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
利用python绘制正态分布曲线
2021/01/04 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
艺术用品:Arteza
2018/11/25 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
岗位职责风险点
2014/03/12 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang