12_DOM_循环绑定事件.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <ul>
  10. <li>项目一</li>
  11. <li>项目二</li>
  12. <li>项目三</li>
  13. <li>项目四</li>
  14. <li>项目五</li>
  15. </ul>
  16. <script>
  17. var aLi = document.getElementsByTagName('li');
  18. // aLi[0].onmouseover = function() {
  19. // console.log(aLi[0].innerText);
  20. // }
  21. // aLi[1].onmouseover = function() {
  22. // console.log(aLi[1].innerText);
  23. // }
  24. // aLi[2].onmouseover = function() {
  25. // console.log(aLi[2].innerText);
  26. // }
  27. // aLi[3].onmouseover = function() {
  28. // console.log(aLi[3].innerText);
  29. // }
  30. // aLi[4].onmouseover = function() {
  31. // console.log(aLi[4].innerText);
  32. // }
  33. for(var i=0;i<aLi.length;i++){
  34. aLi[i].onmouseover = function(){
  35. // console.log("li");
  36. // console.log(i);
  37. // console.log(aLi[i].innerText);
  38. // 谁触发事件 谁就是this
  39. console.log(this.innerText);
  40. }
  41. }
  42. </script>
  43. </body>
  44. </html>