6_DOM事件绑定.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  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. <h1>hello</h1>
  10. <h1>world</h1>
  11. <script>
  12. var oH1 = document.getElementsByTagName("h1");
  13. // 鼠标点击事件(单击)
  14. oH1[0].onclick = function(){
  15. // console.log("hello world")
  16. // oH1[0].innerText = "你好";
  17. this.innerText = "hello world";
  18. }
  19. // 鼠标右键
  20. var oBody = document.getElementsByTagName("body")[0];
  21. oBody.oncontextmenu = function(){
  22. console.log("hello");
  23. // return false 在事件处理函数当中可以阻止浏览器的默认行为
  24. return false;
  25. }
  26. // 鼠标滑入
  27. // 鼠标移入滑动时频繁触发
  28. // oH1[1].onmousemove = function(){
  29. // console.log("mouseover")
  30. // }
  31. // 鼠标移入仅触发一次
  32. // oH1[1].onmouseenter = function(){
  33. // console.log("mouseenter")
  34. // }
  35. </script>
  36. </body>
  37. </html>