- div{
- width: 50px;
- height: 200px;
- border: 1px solid blue;
- float: left;
- }
- <body>
- <div data-note="1"></div>
- <div data-note="2"></div>
- <div data-note="3"></div>
- <div data-note="4"></div>
- <div data-note="5"></div>
- <div data-note="6"></div>
- <div data-note="7"></div>
- <div data-note="8"></div>
- <div data-note="9"></div>
- <div data-note="10"></div>
- <script>
- var divs =document.getElementsByTagName('div')
- // for (var i = 0;i < divs.length;i++){
- // var div = divs[i]
- // var num = div.dataset.note
- // // console.log(num)
- // div.addEventListener('click',function(){
- // alert(num)
- // // for的时候 这一行代码没有执行 当for结束的时候 页面已经显示出来了
- // // 你点了div之后 才触发click 这alert(num)这一行代码才执行
- // // 此时num早已经是10了
- // })
- // }
- for(var i = 0;i < divs.length;i++){
- divs[i].addEventListener('click',function(e){
- var div = e.target
- alert(div.dataset.note)
- })
- }
- var fun =function(){
- alert('新的事件监听者')
- }
- divs[3].addEventListener('click',fun)
- divs[3].removeEventListener('click',fun)
- // 移除事件
- </script>
- </body>