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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
js数组常用最重要的方法
Feb 04 Javascript
express 项目分层实践详解
Dec 10 Javascript
js中实现继承的五种方法
Jan 25 Javascript
详解Vue router路由
Nov 20 Vue.js
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
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python global和nonlocal用法解析
2020/02/03 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
python名片管理系统开发
2020/06/18 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
考试没考好检讨书
2015/05/06 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
Apache POI的基本使用详解
2021/11/07 Servers