7_事件.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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: red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="div1">
  18. <input type="text" id="inp">
  19. </div>
  20. <script>
  21. var div1 = document.getElementById('div1')
  22. var inp = document.getElementById('inp')
  23. //点击事件
  24. // div1.onclick = function(){
  25. // console.log('点击事件')
  26. // }
  27. //双击事件
  28. // div1.ondblclick = function(){
  29. // console.log('双击事件')
  30. // }
  31. //鼠标移动
  32. // div1.onmousemove = function(){
  33. // console.log('鼠标移动')
  34. // }
  35. //鼠标划出
  36. // div1.onmouseout = function(){
  37. // console.log('鼠标划出')
  38. // }
  39. //按下鼠标触发事件
  40. // div1.onmousedown = function(e){
  41. // console.log('鼠标按下')
  42. // //鼠标相对于浏览器视口的坐标轴
  43. // console.log(e.clientX,e.clientY)
  44. // }
  45. //松开鼠标触发事件
  46. // div1.onmouseup = function(){
  47. // console.log('鼠标抬起')
  48. // }
  49. //键盘按下触发事件
  50. // inp.onkeydown = function(e){
  51. // // console.log('键盘按下')
  52. // console.log(e.keyCode)
  53. // if(e.keyCode == 13){
  54. // console.log('我是回车')
  55. // }
  56. // }
  57. //键盘抬起事件
  58. // inp.onkeyup = function(){
  59. // console.log('键盘抬起')
  60. // }
  61. inp.onkeypress = function(){
  62. console.log('onkeypress')
  63. }
  64. </script>
  65. </body>
  66. </html>