js進階 12-1 jquery的鼠標事件有哪些

時間 2020-05-31

原文原文鏈接

js進階 12-1 jquery的鼠標事件有哪些

1、總結

一句話總結：1+3*2+1+1，其中裏面有兩組移入移出，一組和click，總結就是click(3個)，hover(5個)，mousemove(1個)

一、頁面載入事件有哪兩種常見的寫法？

30  $(document).ready(function(){ 31 32  })

34  $(function(){

二、click時間和mouseup和mousedown的聯繫和區別？

鼠標彈起了才能完成點擊事件javascript

click=mousedown&&mouseupcss

35 //鼠標按下並彈起完成一次click事件

三、hover和mouseover和mouseout的區別和聯繫？

click=mouseover&&mouseouthtml

四、鼠標移入移出事件有哪兩種？

mouseover()/mouseout() 鼠標的移入和移出事件
mouseenter()/mouseleave() 鼠標的移入和移出事件

五、mouseover()/mouseout()和mouseenter()/mouseleave()的區別是什麼（都是鼠標移入移出事件）？

推薦使用（mouseenter()/mouseleave()）java

也就是mouseenter()/mouseleave()增長了阻止事件冒泡的效果jquery

mouseout()/mouseover()事件在鼠標移入「所選元素及其後代子元素」時都會觸發；mouseenter()/mouseleave()事件只有鼠標移入「所選元素」纔會觸發，若是鼠標僅僅移入「所選元素的後代子元素」的時候，並不會觸發。函數

冒泡：無論向內仍是向外，移到一個元素就是一次。this

2、jquery的鼠標事件有哪些

一、相關知識

頁面載入事件

ready() 文檔就緒事件（當 HTML 文檔就緒可用時）

鼠標事件

click() 觸發、或將函數綁定到指定元素的 click 事件
dblclick() 當雙擊元素時，會發生 dblclick 事件。
mousedown()/mouseup() 鼠標的按下和鬆開事件
mouseover()/mouseout() 鼠標的移入和移出事件
mouseenter()/mouseleave() 鼠標的移入和移出事件
mouseout()/mouseover()事件在鼠標移入「所選元素及其後代子元素」時都會觸發；mouseenter()/mouseleave()事件只有鼠標移入「所選元素」纔會觸發，若是鼠標僅僅移入「所選元素的後代子元素」的時候，並不會觸發。spa

hover()一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。
mousemove() 當鼠標指針在指定的元素中移動時觸發。

二、代碼

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。