1. div{
2. width: 50px;
3. height: 200px;
4. border: 1px solid blue;
5. float: left;
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.
26. for(var i = 0;i < divs.length;i++){
27. divs[i].addEventListener('click',function(e){
28. var div = e.target
29. alert(div.dataset.note)
30. })
31. }
32.
33. var fun =function(){
34. alert('新的事件监听者')
35. }
36. divs[3].addEventListener('click',fun)
37. divs[3].removeEventListener('click',fun)
38. // 移除事件
39. </script>
40. </body>