1.21 JQuery4:滑鼠事件與滾動事件
滑鼠事件
1.click和dblclick
事件方法一般都有三種使用方式:我們就以click為例來介紹這些方式,接下來的方法不再冗餘介紹,只是談論最重要的知識點。
第一種方式
<div id="test">點選觸發<div> $("ele").click(function(){ alert('觸發指定事件') }) $("#test").click(function(){ $("ele").click()//手動指定觸發事件 });
第二種方式
<div id="test">點選觸發<div> $("#test").click(function() { //this指向 div元素 });
第三種方式
<div id="test">點選觸發<div> $("#test").click(11111,function(e) { //this指向 div元素 //e.data=> 11111 傳遞資料 });
好了,大致就是這三種方式,第二種和第三種用到的比較多。
dblclick的使用方式
$('#btn').dblclick(function() { $('p').html('按鈕被點選了!'); });
2.mousedown和mouseup
前面的click方法是由這兩個方法組成的,即一個click的事件是由滑鼠按下和滑鼠釋放兩個事件構成的。但是這裡需要注意一些問題。我們講click事件的完整性,是講在某個元素上先後完成mousedown和mouseup,一般沒有時間限制。但是,如果在元素上按下滑鼠,不釋放,然後拖動滑鼠離開這個元素,雖然在理論上這仍然是一個mouseup事件,可是事件並不是在此元素上觸發的,所以認為這個對於此元素來講click事件是不完整的,也就是不予觸發click事件方法。講明白這點,接下來的知識才不會衝突:任何的滑鼠按下的操作都是mousedown事件,任何滑鼠釋放的操作都是mouseup事件。好了,至於其他的更晦澀難懂但是不影響使用的書面語我就不贅述了。
還有一個知識點是需要說一下的,可以用event 物件的which區別按鍵,敲擊滑鼠左鍵which的值是1,敲擊滑鼠中鍵which的值是2,敲擊滑鼠右鍵which的值是3。如下面的例子:
$("button:eq(0)").mousedown(function(e) { alert('e.which: ' + e.which) })
3.mousemove
此方法和前面的方法在使用上沒有任何區別,所以這裡不再演示。但是有兩個問題需要注意:mousemove事件是當滑鼠指標移動時觸發的,即使是一個畫素;如果處理器做任何重大的處理,或者如果該事件存在多個處理函式,這可能造成瀏覽器的嚴重的效能問題。
4.mouseover和mouseout
用來監聽使用者的移入移出操作,相當於JS中的onmouseover()與onmouseout()事件監聽方法。使用方法沒有特別之處
5.mouseenter和mouseleave
這兩個事件方法就比較特別了,大部分情況下使用出來的效果不會有任何的區別。什麼事件冒泡鬼的,我測試了n多的例子,最後還是發現慕課網的例子可以看出區別。書面都說在子元素上的mouseenter和mouseleave事件不會觸發父元素的相關方法,但是我的測試全都是會觸發的。氣的我的臉都是綠的。慕課網的老師給出的例子是這樣的:
<body> <h2>.mouseover()方法</h2> <div class="left"> <div class="aaron1"> <p>滑鼠離開此區域觸發mouseover事件</p> <a>mouseover事件觸發次數:</a><br/> <a>mouseover冒泡事件觸發次數:</a> </div> </div> <h2>.mouseenter()方法</h2> <div class="right"> <div class="aaron2"> <p>滑鼠進入此區域觸發mouseenter事件</p> <a>mouseenter事件觸發次數:</a><br/> <a>mouseenter冒泡事件觸發次數:</a> </div> </div> <br/> <script type="text/javascript"> var i = 0; $(".aaron1 p").mouseover(function(e) { $(".aaron1 a:first").html('mouseover事件觸發次數:' + (++i)) }) var n = 0; $(".aaron1").mouseover(function() { $(".aaron1 a:last").html('mouseover冒泡事件觸發次數:' + (++n)) }) </script> <script type="text/javascript"> var i = 0; $(".aaron2 p").mouseenter(function(e) { $(".aaron2 a:first").html('mouseenter事件觸發次數:' + (++i)) }) var n = 0; $(".aaron2").mouseenter(function() { $(".aaron2 a:last").html('mouseenter冒泡事件觸發次數:' + (++n)) }) </script> </body>
如果在p元素與div元素都繫結mouseover事件,滑鼠在離開p元素,但是沒有離開div元素的時候,觸發的結果:
1、p元素響應事件
2、div元素響應事件
這裡的問題是div為什麼會被觸發? 原因就是事件冒泡的問題,p元素觸發了mouseover,他會一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就會被觸發,所以在這種情況下面,jQuery推薦我們使用 mouseenter事件,mouseenter事件只會在繫結它的元素上被呼叫,而不會在後代節點上被觸發。
然後我還是很疑惑,滿頭的霧水。 ╮ ( ╯▽╰ ) ╭ ,算了,既然不是大牛,先不要糾結這麼多了。以後不出問題就沒事,出問題了就換另外一種方法試試,二者既然都有自己的獨特的地方,那就有它們最適用的地方。
6.hover
hover的底層封裝了mouseenter和mouseleave,即一個方法完成移入移出一套動作的監聽。但是你會發現在許多情況下你用mouseover和mouseout重寫這個方法,達到的效果是一樣的,但是注意了,細微的差別不容忽視,還有就是專案做大了會出現很多問題的,所以建議多使用mouseenter和mouseleave。hover的使用方法如下
$("#div2").hover( function() { $(this).css('background-color', 'pink');}, function() { $(this).css('background-color', '#bbffaa');} );
7.focusin和focusout
這兩個方法監聽游標的聚焦和失焦事件,對,沒錯,在輸入框輸入文字的地方用的最多。下面是我自己寫的一個小例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery滑鼠事件之focusin事件和focusout事件</title> <script src="../jquery_js/jquery-3.2.0.min.js"></script> <style type="text/css"> label, input { font-family: "微軟雅黑"; } input { color: #AFABAB; border: 1px solid blue; } </style> </head> <body> <div> <label>輸入使用者名稱:</label> <input type="text" id="name" value="饒舸璇"> </div> <script type="text/javascript"> // 滑鼠聚焦到輸入框的時候,字型顏色變為黑色,輸入框邊框變紅 $("#name").focusin(function() { $(this).css({ color: 'black', border: '1px solid red' }); $(this).val(''); }); // 滑鼠移出輸入框 $("#name").focusout(function() { $(this).css({ color: '#AFABAB', border: '1px solid blue' }); $(this).val('CSDN'); }); </script> </body> </html>
滾動事件
1、獲取和設定元素的尺寸
width()、height()獲取元素width和height innerWidth()、innerHeight()包括padding的width和height outerWidth()、outerHeight()包括padding和border的width和height outerWidth(true)、outerHeight(true)包括padding和border以及margin的width和height
$(document).scrollTop(); $(document).scrollLeft();
offse()
3、獲取可視區高度
$(window).height();
4、獲取頁面高度
$(document).height();
5、獲取頁面滾動距離
$(document).scrollTop(); $(document).scrollLeft();
6、頁面滾動事件
$(window).scroll(function(){ ...... })
-
學院Go語言視訊主頁
ofollow,noindex" target="_blank">https://edu.csdn.net/lecturer/1928 -
掃碼獲取海量視訊及原始碼 QQ群:721929980