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

代码如下:

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

赞 (0)

相关推荐

  • JavaScript中绑定事件的三种方式及去除绑定

    在JavaScript中,有三种常用的绑定事件的方法 第一种办法 函数写在结构层里面 非常不好,使页面很混乱,行为与结构得不到分离 <input type="button" onclick="func();"> 绑定事件的第二种办法 好处:行为与结构开始分离 缺点: 第二种绑定方式中只能给一个时间绑定一个处理函数 即.onclick = fn1;  .  onclick = fn2 最终的效果是onclick = fn2 <select name=

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • JS中动态添加事件(绑定事件)的代码

    两种方式:直接给对象添加事件,节点添加事件 例如给一个id为tab1的添加onclick事件 第一种情况: 复制代码 代码如下: var t = document.getElementById("tab1"); t.onclick = function tst(){ alert(''); } 第二种情况 复制代码 代码如下: var tb = document.getElementById("tab1"); if(window.addEventListener){

  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #

  • js 绑定带参数的事件以及手动触发事件

    1.html代码 复制代码 代码如下: <div> <div id="tab"> <h2>标题一</h2> <h2>标题二</h2> <h2>标题三</h2> <h2>标题四</h2> div> <dl id="tabcon"> <dd>内容一</dd> <dd>内容二</dd> &

  • Javascript 事件流和事件绑定

    Javascript 事件流和事件绑定

    事件流 浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件.而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对IE和Netscape)上是不同的. 冒泡型事件(Dubbed Bubbling) IE上的解决方案就是冒泡型事件(Dubbed Bubbling).冒泡型事件的基本思想是,事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 示例(1):点击我触发冒泡型事件流 示例(1)的XHTML代码结构:<span id="cnt0

  • Chrome扩展页面动态绑定JS事件提示错误

    问题描述: 当开发Chrome扩展时,页面的popup.html中需要js的时候,直接将JS写在动态绑定JS事件会提示: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".. 解决办法: 在popup.html中引用外部的js文件动态绑定JS

  • JavaScript 事件属性绑定带参数的函数

    例如不能采用这种调用方式:element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现,所以无法给函数传递参数.参考了大量的网上资料,解决这个问题的方式,以代码为例,如下所示: 复制代码 代码如下: function Handler() { }; Handler.prototype = { /* *

  • javascript attachEvent绑定多个事件执行顺序问题

    常见的绑定事件有直接绑定在页面元素中比如<div id="wrap" onclick="a();"></div>,这个换种方法也就是分离出来写在js代码里如document.getElementById('wrap').onclick = function(){a();},此时如果需要绑定多个方法则直接写在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或&

  • js移除事件 js绑定事件实例应用

    复制代码 代码如下: /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvents(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.att

随机推荐