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>

js进阶 12-1 jquery的鼠标事件有哪些相关推荐

js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
jQuery的鼠标事件总结
jQuery的鼠标事件总结 1.click()事件. 2.dbclick()鼠标双击事件 3.mousedown()鼠标按下事件 4.mouseup()鼠标松开事件 5.mouseover()从一个元 ...
深入学习jQuery鼠标事件
前面的话鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuery鼠标事件类型鼠标事件共10类,包括click.contextmenu.dblclic ...
Jquery的鼠标移入移出事件
Jquery的鼠标事件下面的是我根据https://www.w3school.com.cn/jquery/event_mouseout.asp,然后自己写的一个小总结的代码. <!DOCTYP ...
jQuery实现鼠标划过展示大图的方法
这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标划过展示大图 ...
js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用一.总结一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...
js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键
js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键一.总结一句话总结:event.which属性. 1.如何获取事件发生的时间? timeStamp属性 event.timeStamp 属性 ...
js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法一.总结一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获一.总结一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

js进阶 12-1 jquery的鼠标事件有哪些

js进阶 12-1 jquery的鼠标事件有哪些

一、总结

一句话总结：1+3*2+1+1，其中里面有两组移入移出，一组和click，总结就是click(3个)，hover(5个)，mousemove(1个)

1、页面载入事件有哪两种常见的写法？

2、click时间和mouseup和mousedown的联系和区别？

3、hover和mouseover和mouseout的区别和联系？

4、鼠标移入移出事件有哪两种？

5、mouseover()/mouseout()和mouseenter()/mouseleave()的区别是什么（都是鼠标移入移出事件）？

二、jquery的鼠标事件有哪些

1、相关知识

页面载入事件

鼠标事件

2、代码

js进阶 12-1 jquery的鼠标事件有哪些相关推荐

最新文章

热门文章