1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>鼠标事件</title>
8. <style>
9. section{
10. width: 150px;
11. height: 150px;
12. background-color: blue;
13. margin: 100px auto;
14. border-radius: 50%;
15. }
16. div{
17. height: 50px;
18. width: 50px;
19. background-color: green;
20. }
21. span{
22. width: 30px;
23. height: 30px;
24. display: block;
25. background-color: hsl(0,100%,50%);
26. position: absolute;
27. border-radius: 50%;
28. }
29. </style>
30. </head>
31. <body>
32. <span></span>
33. <span></span>
34. <span></span>
35. <span></span>
36. <span></span>
37. <section>
38. <div>
39.
40. </div>
41. </section>
42. <script>
43. var sec = document.querySelector('section')
44. sec.addEventListener('click',function(){
45. console.log('clicked')
46. })
47. sec.addEventListener('dblclick',function(){
48. console.log('dblclicked')
49. })
50. // 双击事件 会造成两个单机事件
51.
52. // 鼠标按下去时触发
53. sec.onmousedown =function(e){
54. sec.style.backgroundColor = 'darkblue'
55. }
56.
57. // 鼠标弹起的时候触发
58. sec.onmouseup =function(e){
59. console.log(e)
60. sec.style.backgroundColor= 'yellow'
61. }
62. // 左键 which = 1 button = 0 buttons = 0
63. // 右键 which = 3 button = 2 buttons = 0
64. // 中键 which = 2 button = 1 buttons = 0
65.
66. var spans = document.querySelectorAll('span')
67. // onmousemove 当鼠标指针移动此元素上触发
68. window.onmousemove =function(e){
69. for(var i = 0;i< spans.length;i++){
70. var span = spans[i]
71. var r1 = Math.random()*600 - 150
72. var r2 = Math.random()*600 - 150
73. var r3 = Math.random()
74. span.style.top = e.pageY + r1 + 'px'
75. span.style.left = e.pageX + r2 + 'px'
76. span.style.transform = 'scale(' + r3 + ')'
77. span.style.backgroundColor = 'hsl(' +r3*360 + ',100%,50%)'
78. }
79. }
80.
81. sec.onmouseenter =function(e){
82. console.log('鼠标来了')
83. }
84. // onmouseenter 进入标签元素的范围 包括其子标签元素的范围 不会冒泡
85.
86. // onmouseover 在标签元素上面 会冒泡
87.
88. // onmouseleave 鼠标离开标签元素时
89. sec.onmouseleave =function(){
90. console.log('鼠标走了')
91. }
92.
93. sec.onwheel =function(e){
94. console.log('x:'+ e.deltaX + ',y' + e.deltaY + ',z' + e.deltaZ)
95. // event 中的deltaX表示水平方向的滚动
96. // event 中的deltaY表示垂直方向的滚动
97. // event 中的deltaZ表示z轴方向的滚动
98. }
99. </script>
100. </body>
101. </html>