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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
动态加载jquery库的方法
Feb 12 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
JavaScript适配器模式原理与用法实例详解
Mar 09 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上传文件的增强函数
2010/07/21 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
详解vue 组件注册
2020/11/20 Vue.js
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python实现定时发送qq消息
2019/01/18 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
大一学生职业生涯规划
2014/03/11 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
党员自我评价范文2015
2015/03/03 职场文书
九年级数学教学反思
2016/02/17 职场文书