原生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)
         }

 

posted @ 2017-05-17 16:16  花花花花花  阅读(569)  评论(0)    收藏  举报