JavaScript 通过循环监听事件

黄良钵

分类: 程序开发 663 0

  1. div{
  2.     width50px;
  3.     height200px;
  4.     border1px solid blue;
  5.     floatleft;
  6. }
  1. <body>
  2.         <div data-note="1"></div>
  3.         <div data-note="2"></div>
  4.         <div data-note="3"></div>
  5.         <div data-note="4"></div>
  6.         <div data-note="5"></div>
  7.         <div data-note="6"></div>
  8.         <div data-note="7"></div>
  9.         <div data-note="8"></div>
  10.         <div data-note="9"></div>
  11.         <div data-note="10"></div>
  12.         <script>
  13.             var divs =document.getElementsByTagName('div')
  14.             // for (var i = 0;i < divs.length;i++){
  15.             //     var div = divs[i]
  16.             //     var num = div.dataset.note
  17.             //     // console.log(num)
  18.             //     div.addEventListener('click',function(){
  19.             //         alert(num)
  20.             //         // for的时候 这一行代码没有执行 当for结束的时候 页面已经显示出来了
  21.             //         // 你点了div之后 才触发click 这alert(num)这一行代码才执行
  22.             //         // 此时num早已经是10了
  23.             //     })
  24.             // }
  25.             for(var i = 0;i < divs.length;i++){
  26.                 divs[i].addEventListener('click',function(e){
  27.                     var div = e.target
  28.                     alert(div.dataset.note)
  29.                 })
  30.             }
  31.             var fun =function(){
  32.                 alert('新的事件监听者')
  33.             }
  34.             divs[3].addEventListener('click',fun)
  35.             divs[3].removeEventListener('click',fun)
  36.             // 移除事件
  37.         </script>
  38.     </body>
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
JavaScript、事件

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “JavaScript 通过循环监听事件”

Loading...