原生js给数组中每个对象都绑定一个事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js给数组中每个对象都绑定一个事件相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <link href="css.css" type="text/css" rel="stylesheet"> 8 </head> 9 <body class="site1"> 10 <div class="site"> 11 <span id="sheng">浙江省</span> 12 <img src="imgs/jiantou.png"> 13 <span id="shi">杭州市</span> 14 <img src="imgs/jiantou.png"> 15 <span id="qu">上城区</span> 16 </div> 17 <div id="neirong"> 18 <!-- 19 <div class="site_list"> 20 <p class="p6">上城区</p> 21 </div> 22 <div class="site_list"> 23 <p class="p6">下城区</p> 24 </div> 25 <div class="site_list"> 26 <p class="p6">江干区</p> 27 </div> 28 <div class="site_list"> 29 <p class="p6">拱墅区</p> 30 </div> 31 <div class="site_list"> 32 <p class="p6">西湖区</p> 33 </div> 34 <div class="site_list"> 35 <p class="p6">滨江区</p> 36 </div> 37 <div class="site_list"> 38 <p class="p6">萧山区</p> 39 </div> 40 <div class="site_list"> 41 <p class="p6">余杭区</p> 42 </div> 43 <div class="site_list"> 44 <p class="p6">桐庐县</p> 45 </div> 46 --> 47 </div> 48 <div class="site_btn"> 49 <input type="button" value="确定" class="OK1"> 50 <input type="button" value="取消" class="cancel"> 51 </div> 52 </body> 53 <script> 54 var neirong = document.getElementById("neirong"); 55 var sheng = document.getElementById("sheng"); 56 var shi = document.getElementById("shi"); 57 var qu = document.getElementById("qu"); 58 sheng.onmousedown = function () { 59 sheng.style.textDecoration = "underline"; 60 }; 61 sheng.onmouseup = function () { 62 sheng.style.textDecoration="none"; 63 }; 64 qu.onclick = function () { 65 var daima = "<div class=‘site_list‘><p class=‘p6‘>桐庐县</p></div>" + 66 "<div class=‘site_list‘><p class=‘p6‘>桐庐县2</p></div>" + 67 "<div class=‘site_list‘><p class=‘p6‘>桐庐县3</p></div>"; 68 neirong.innerHTML = daima; 69 /**作用域的问题**/ 70 /**作用域的问题**/ 71 /**作用域的问题**/ 72 /**作用域的问题**/ 73 /**作用域的问题**/ 74 /**作用域的问题**/ 75 76 for (var i=0;i<liebiao.length;i++){ 77 (function (i) { 78 liebiao[i].onclick = function () { 79 qu.innerText = this.innerText; 80 }; 81 })(i) 82 } 83 84 }; 85 shi.onclick = function () { 86 var daima1 = "<div class=‘site_list‘><p class=‘p6‘>shishishi</p></div>" + 87 "<div class=‘site_list‘><p class=‘p6‘>XX市</p></div>" + 88 "<div class=‘site_list‘><p class=‘p6‘>是是是</p></div>"; 89 neirong.innerHTML = daima1; 90 console.log(liebiao); 91 /**作用域的问题**/ 92 /**作用域的问题**/ 93 /**作用域的问题**/ 94 /**作用域的问题**/ 95 for (var i=0;i<liebiao.length;i++){ 96 (function (i) { 97 liebiao[i].onclick = function () { 98 shi.innerText = this.innerText; 99 }; 100 })(i) 101 } 102 }; 103 var liebiao = document.getElementsByClassName("site_list"); 104 </script> 105 </html>
作用域!!!
作用域!!!
作用域!!!
作用域!!!
for (var i=0;i<liebiao.length;i++){
(function (i) {
liebiao[i].onclick = function () {
shi.innerText = this.innerText;
};
})(i)
}
以上是关于原生js给数组中每个对象都绑定一个事件的主要内容，如果未能解决你的问题，请参考以下文章