js創(chuàng)建一個input數(shù)組并綁定click事件的方法
更新時間：2014年06月12日 11:23:38 投稿：whsnow
這篇文章主要介紹了js創(chuàng)建一個input數(shù)組并綁定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(){
// 定義一個數(shù)組 arrs
var arrs = new Array();
// 循環(huán)添加
for(var i=0;i<2;i++){
// 循環(huán)添加兩個 input type="button" value="新增"+i
var input = document.createElement("input");
input.type = "button";
input.value = "新增" + i;
// 記得把創(chuàng)建的 input 放入 arrs 中
arrs.push(input);
// 然后把 input 放入 id="add" 的div中
document.getElementById("add").appendChild(input);
}
// 同樣用 [0].onclick 綁定事件，依然沒有問題
arrs[0].onclick=function(){
alert("我又測試一下");
}
}
</script>
您可能感興趣的文章:
- JavaScript實現(xiàn)父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執(zhí)行順序的方法
- JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
- js中DOM事件綁定分析
- JS 事件綁定、事件監(jiān)聽、事件委托詳細介紹
- JavaScript給按鈕綁定點擊事件（onclick）的方法
- javascript事件委托的方式綁定詳解
- Javascript 事件流和事件綁定
- JS動態(tài)添加元素及綁定事件造成程序重復執(zhí)行解決
- javaScript 事件綁定、事件冒泡、事件捕獲和事件執(zhí)行順序整理總結
- JavaScript 事件屬性綁定帶參數(shù)的函數(shù)
- js事件on動態(tài)綁定數(shù)據(jù),綁定多個事件的方法
- JavaScript Dom 綁定事件操作實例詳解
相關文章
Fetch API是一種用于進行網絡請求的現(xiàn)代JavaScript API，提供了更簡潔、強大和靈活的方式來處理異步數(shù)據(jù)交互，本文主要為大家介紹了js中js中基本用法，感興趣的同學可以參考下2023-07-07
FastAdmin是一款基于ThinkPHP5+Bootstrap的極速后臺開發(fā)框架,本文給大家介紹fastadmin的后臺時間戳字段如何顯示成年月日的日期格式,感興趣的朋友跟隨小編一起看看吧2023-10-10
js判斷輸入是否中文，數(shù)字，身份證等等js函數(shù)集合
收集的比較多，建議大家查找搜尋，常用的js判斷函數(shù)2008-09-09
js監(jiān)聽鼠標事件控制textarea輸入字符串的個數(shù)
一個js控制textarea輸入字符串的個數(shù)的腳本，當鼠標按下抬起時判斷輸入字符數(shù)，很簡單，但很實用2014-09-09
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)購物車小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細介紹了使用js中的Canvas實現(xiàn)橡皮擦效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
javascript 模擬JQuery的Ready方法實現(xiàn)并出現(xiàn)的問題
今天在閱讀網上一些模擬Jq的ready方法時，發(fā)現(xiàn)一些小細節(jié)，就是網上的ready事件大部分都是在onload事件執(zhí)行后加載，而jquery確能在onload加載前。2009-12-12
uniapp中實現(xiàn)App自動檢測版本升級的示例代碼
本文主要介紹了uniapp中實現(xiàn)App自動檢測版本升級的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要為大家詳細介紹了原生js實現(xiàn)九宮格拖拽換位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了JS實現(xiàn)自定義狀態(tài)欄動畫文字效果,涉及javascript結合時間函數(shù)動態(tài)設置IE狀態(tài)欄文字顯示效果相關操作技巧,需要的朋友可以參考下2017-10-10