js进阶 12-1 jquery的鼠标事件有哪些
一、总结
一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove(1个)
1、页面载入事件有哪两种常见的写法?
30 $(document).ready(function(){
31
32 })
34 $(function(){
2、click时间和mouseup和mousedown的联系和区别?
鼠标弹起了才能完成点击事件
click=mousedown&&mouseup
35 //鼠标按下并弹起完成一次click事件
3、hover和mouseover和mouseout的区别和联系?
click=mouseover&&mouseout
4、鼠标移入移出事件有哪两种?
- mouseover()/mouseout() 鼠标的移入和移出事件
- mouseenter()/mouseleave() 鼠标的移入和移出事件
5、mouseover()/mouseout()和mouseenter()/mouseleave()的区别是什么(都是鼠标移入移出事件)?
推荐使用(mouseenter()/mouseleave())
也就是mouseenter()/mouseleave()增加了阻止事件冒泡的效果
mouseout()/mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发;mouseenter()/mouseleave()事件只有鼠标移入“所选元素”才会触发,如果鼠标仅仅移入“所选元素的后代子元素”的时候,并不会触发。
冒泡:不管向内还是向外,移到一个元素就是一次。
二、jquery的鼠标事件有哪些
1、相关知识
页面载入事件
- ready() 文档就绪事件(当 HTML 文档就绪可用时)
鼠标事件
- click() 触发、或将函数绑定到指定元素的 click 事件
- dblclick() 当双击元素时,会发生 dblclick 事件。
- mousedown()/mouseup() 鼠标的按下和松开事件
- mouseover()/mouseout() 鼠标的移入和移出事件
- mouseenter()/mouseleave() 鼠标的移入和移出事件 mouseout()/mouseover()事件在鼠标移入“所选元素及其后代子元素”时都会触发;mouseenter()/mouseleave()事件只有鼠标移入“所选元素”才会触发,如果鼠标仅仅移入“所选元素的后代子元素”的时候,并不会触发。
- hover()一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
- mousemove() 当鼠标指针在指定的元素中移动时触发。
2、代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 </style>
5 <head>
6 <meta charset="UTF-8">
7 <title>演示文档</title>
8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
9 <style>
10 div{width: 100px;height: 100px;
11 margin: 10px;padding: 10px;
12 border:1px solid green;
13 }
14 </style>
15 </style>
16 </head>
17 <body>
18 <h3>jQuery事件</h3>
19 <div id="div1">click</div>
20 <div id="div2">dblclick</div>
21 <div id="div3">mousedown <br> mouseup</div>
22 <div id="div4">mouseover <br> mouseout</div>
23 <script>
24 /*
25 //页面载入事件
26 //注意与window.lond()的三点区别
27 jQuery(document).ready(function(){
28 //代码部分
29 })
30 $(document).ready(function(){
31
32 })
33 */
34 $(function(){
35 //鼠标按下并弹起完成一次click事件
36 $('#div1').click(function(){
37 alert('单击事件')
38 })
39 $('#div2').dblclick(function(){
40 alert('双击事件')
41 })
42 //鼠标的按下和松开事件
43 // $('#div3').mousedown(function(){
44 // alert('鼠标按下')
45 // })
46 $('#div3').mouseup(function(){
47 alert('鼠标弹起')
48 })
49 //鼠标移入移出事件
50 // $('#div4').mouseover(function(){
51 // $(this).css('background','green')
52 // }).mouseout(function(){
53 // $(this).css('background','#ccc')
54 // })
55
56 $('#div4').mouseenter(function(){
57 $(this).css('background','green')
58 }).mouseleave(function(){
59 $(this).css('background','#ccc')
60 })
61 })
62 </script>
63 </body>
64 </html>