7_事件.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. #div1{
  10. width: 200px;
  11. height: 200px;
  12. background: antiquewhite;
  13. margin: 100px auto;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div id="div1">
  19. <input type="text" id="input1">
  20. </div>
  21. <script>
  22. var div1 = document.getElementById('div1')
  23. var input1 = document.getElementById('input1')
  24. //点击事件
  25. // div1.onclick = function(){
  26. // console.log('onclick点击事件')
  27. // }
  28. //双击事件
  29. // div1.ondblclick = function(){
  30. // console.log('123')
  31. // }
  32. //鼠标移动时触发的事件
  33. // div1.onmousemove = function(){
  34. // console.log('onmousemove')
  35. // }
  36. // div1.onmouseout = function(){
  37. // console.log('onmouseout')
  38. // }
  39. //鼠标按下后松开鼠标的事件
  40. // div1.onmouseup = function(){
  41. // console.log('onmouseup')
  42. // }
  43. //鼠标按下时 触发的事件
  44. div1.onmousedown = function(e){
  45. console.log('onmousedown')
  46. //鼠标相对于浏览器窗口可视区域的X轴和Y轴
  47. console.log(e.clientX,e.clientY)
  48. }
  49. //当键盘某个按键被按下时触发的事件
  50. // input1.onkeydown = function(e){
  51. // // console.log(123)
  52. // console.log(e.keyCode)
  53. // if(e.keyCode == 13){
  54. // console.log('我是回车')
  55. // }
  56. // }
  57. //当键盘某个按键按下被抬起时触发的事件
  58. // input1.onkeyup = function(){
  59. // console.log('onkeyup')
  60. // }
  61. </script>
  62. </body>
  63. </html>