js创建一个input数组并绑定click事件的方法_javascript技巧

复制代码 代码如下:

</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>

时间: 2024-09-22 19:44:52

js创建一个input数组并绑定click事件的方法_javascript技巧的相关文章

js实现一个链接打开两个链接地址的方法_javascript技巧

本文实例讲述了js实现一个链接打开两个链接地址的方法.分享给大家供大家参考.具体如下: <script type="text/javascript"> <!-- function adClick(ad, site) { window.open(ad); window.location = site; } --> </script> <a href="javascript:adClick('http://www.163.com/','h

js实现浏览器窗口大小被改变时触发事件的方法_javascript技巧

本文实例讲述了js实现浏览器窗口大小被改变时触发事件的方法.分享给大家供大家参考.具体分析如下: 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 复制代码 代码如下: <span id="info_jb51_net">请改变浏览器窗口大小</span> <script> window.onresiz

JS控制一个DIV层在指定时间内消失的方法_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>定时关闭的层<

js动态添加onload、onresize、onscroll事件(另类方法)_javascript技巧

window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加. 也就是说,它只能这样来(以 onload 为例,下同): 复制代码 代码如下: window.onload = function() { // ... }; 但这有个问题,就是想再为 onload 增加新的事件处理程序时,不能直接为 window.onload 赋值了,否则前面的赋值就会被覆盖了. 可这样做: 复制代码 代

jquery单选框radio绑定click事件实现方法

 这篇文章主要介绍了jquery单选框radio绑定click事件实现方法,可实现针对单选框radio值的改变作出响应,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下:   代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-t

jquery单选框radio绑定click事件实现方法_jquery

本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

JS中使用FormData上传文件、图片的方法_javascript技巧

关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

如何创建一个JavaScript弹出DIV窗口层的效果_javascript技巧

在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的

js读写cookie实现一个底部广告浮层效果的两种方法_javascript技巧

下面一个案例使用js实现一个页面浮层效果,并且通过两种方法使用js读写cookie来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方式 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>