8_事件.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. 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 inpu1 = document.getElementById('input1')
  24. /* 点击事件 */
  25. // div1.onclick = function(){
  26. // console.log(111)
  27. // }
  28. /* 双击事件 */
  29. /* div1.ondblclick = function(){
  30. console.log(222)
  31. } */
  32. /* 鼠标移动 */
  33. /* div1.onmousemove = function(){
  34. console.log('onmousemove')
  35. } */
  36. /* 鼠标按下时触发的事件 */
  37. // div1.onmousedown = function(e){
  38. // console.log('onmousedown')
  39. // /* 鼠标相对于浏览器窗口可视区域的X,Y坐标 */
  40. // console.log(e.clientX,e.clientY)
  41. // }
  42. /* 鼠标松开时触发的事件 */
  43. // div1.onmouseup = function(){
  44. // console.log('onmouseup')
  45. // }
  46. /* 鼠标划出 */
  47. /* div1.onmouseout = function(){
  48. console.log('onmouseout')
  49. } */
  50. /* 键盘某个键位被按下触发的事件 */
  51. input1.onkeydown = function(e){
  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. /* 键盘某个键位被按下并且释放时触发的事件 */
  62. /* inpu1.onkeypress = function(){
  63. console.log(123)
  64. } */
  65. </script>
  66. </body>
  67. </html>