jQuery-3.事件篇---鼠標事件
jQuery鼠標事件之click與dbclick事件
用交互操做中，最簡單直接的操做就是點擊操做。jQuery提供了兩個方法一個是click方法用於監聽用戶單擊操做，另外一個方法是dbclick方法用於監聽用戶雙擊操做。這兩個方法的用法是相似的，下面以click()事件爲例javascript
使用上很是簡單：css
方法一：$ele.click()html
綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，用的比較少java
<div id="test">點擊觸發<div>
$("ele").click(function(){
alert('觸發指定事件')
})
$("#test").click(function(){
$("ele").click() //手動指定觸發事件
});
方法二：$ele.click( handler(eventObject) )瀏覽器
綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數，這樣能夠針對事件的反饋作不少操做了，方法中的this是指向了綁定事件的元素函數
<div id="test">點擊觸發<div>
$("#test").click(function() {
//this指向 div元素
});
方法三：$ele.click( [eventData ], handler(eventObject) )性能
使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題測試
<div id="test">點擊觸發<div>
$("#test").click(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
});
dblclick()的用法和click()的用法是相似的，能夠參考以上click()的用法。this
dbclick與click事件不一樣的是：操作系統
click事件觸發須要如下幾點：
- click事件實際上是由mousedown與mouseup 2個動做構成，因此點擊的動做只有在鬆手後才觸發
PS:mousedown和mouseup下一節會講到
dblclick事件觸發須要如下幾點：
dblclick又是由2個click疊加而來的，因此dblclick事件只有在知足如下條件的狀況下才能被觸發
- 鼠標指針在元素裏面時點擊。
- 鼠標指針在元素裏面時釋放。
- 鼠標指針在元素裏面時再次點擊，點擊間隔時間，是系統而定。
- 鼠標指針在元素裏面時再次釋放。
注意：在同一元素上同時綁定 click 和 dblclick 事件是不可取的。各個瀏覽器事件觸發的順序是不一樣的，一些瀏覽器在dblclick以前接受兩個 click 事件 ，而一些瀏覽器只接受一個 click 事件。用戶每每可經過不一樣的操做系統和瀏覽器配置雙擊靈敏度
<h2>.click()方法</h2>
<h4>測試一</h4>
<button>元素綁定事件,彈出回調中的this</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").click(function() {
alert(this)
})
</script>
<h4>測試二</h4>
<div class="test2">
<p>$('button:first').click(function(e) {alert(this)})</p>
</div>
<button>指定觸發事件</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").click(function() {
$('p').click() //指定觸發綁定的事件
})
</script>
<h4>測試三</h4>
<div class="test3">
<p>$('.right').click(1111, set)</p>
</div>
<button>不一樣函數傳遞數據</button>
<script type="text/javascript">
//不一樣函數傳遞數據
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").click(1111, data)
}
a();
</script>
jQuery鼠標事件之mousedown與mouseup事件
用戶交互操做中，最簡單直接的操做就是點擊操做，所以jQuery提供了一個mousedown的快捷方法能夠監聽用戶鼠標按下的操做，與其對應的還有一個方法mouseup快捷方法能夠監聽用戶鼠標彈起的操做。兩種方法用法相似，下面以mousedown()爲例
使用上很是簡單：
方法一：$ele.mousedown()
綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，可能通常用的比較少
<div id="test">點擊觸發<div>
$("ele").mousedown(function(){
alert('觸發指定事件')
})
$("#test").mousedown(function(){
$("ele").mousedown() //手動指定觸發事件
});
方法二：$ele.mousedown( handler(eventObject) )
綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數
這樣能夠針對事件的反饋作不少操做了
<div id="test">點擊觸發<div>
$("#test").mousedown(function() {
//this指向 div元素
});
方法三：$ele.mousedown( [eventData ], handler(eventObject) )
使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題
<div id="test">點擊觸發<div>
$("#test").mousedown(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
});
mousedown事件觸發須要如下幾點：
- mousedown強調是按下觸發
- 若是在一個元素按住了鼠標不放，而且拖動鼠標離開這個元素，並釋放鼠標鍵，這仍然是算做mousedown事件
- 任何鼠標按鈕被按下時都能觸發mousedown事件
- 用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3
mouseup事件觸發須要如下幾點：
- mouseup強調是鬆手觸發，與mousedown是相反的
- mouseup與mousedown組合起來就是click事件
- 若是用戶在一個元素上按下鼠標按鍵，而且拖動鼠標離開這個元素，而後釋放鼠標鍵，這仍然是算做mouseup事件
- 任何鼠標按鈕鬆手時都能觸發mouseup事件
- 用event 對象的which區別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3
另外須要注意的是：
click與mousedown的區別：
- click事件實際上是由mousedown於mouseup 2個動做構成，因此點擊的動做只有在鬆手後才觸發
<h2>.mousedown()方法</h2>
<h4>測試一</h4>
<button>彈出回調中的鼠標鍵</button>
<script type="text/javascript">
//this指向button元素
$("button:eq(0)").mousedown(function(e) {
alert('e.which: ' + e.which)
})
</script>
<h4>測試二</h4>
<div class="test2">
<p>$('button:first').mousedown(function(e) {alert(this)})</p>
</div>
<button>指定觸發事件</button>
<script type="text/javascript">
$('p').mousedown(function(e) {
alert(e.target.textContent)
})
//this指向button元素
$("button:eq(1)").mousedown(function() {
$('p').mousedown() //指定觸發綁定的事件
})
</script>
<h4>測試三</h4>
<div class="test3">
<p>$('.right').mousedown(1111, set)</p>
</div>
<button>不一樣函數傳遞數據</button>
<script type="text/javascript">
//不一樣函數傳遞數據
function data(e) {
alert(e.data) //1111
}
function a() {
$("button:eq(2)").mousedown(1111, data)
}
a();
</script>
jQuery鼠標事件之mousemove事件
用交互操做中，常常須要知道用戶是否有移動的操做。基於移動的機制能夠作出拖動、拖拽一系列的效果出來。針對移動事件，jQuery提供了一個mousemove的快捷方法能夠監聽用戶移動的的操做
使用上很是簡單：
方法一：$ele.mousemove()
綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，用的比較少
<div id="test">點擊觸發<div>
$("ele").mousemove(function(){
alert('觸發指定事件')
})
$("#test").click(function(){
$("ele").mousemove() //指定觸發事件
});
方法二：$ele.mousemove( handler(eventObject) )
綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數
這樣能夠針對事件的反饋作不少操做了
<div id="test">滑動觸發<div>
$("#test").mousemove(function() {
//this指向 div元素
});
方法三：$ele.mousemove( [eventData ], handler(eventObject) )
使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題
<div id="test">點擊觸發<div>
$("#test").mousemove(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
});
mousemove事件觸發須要如下幾點：
- mousemove事件是當鼠標指針移動時觸發的，即便是一個像素
- 若是處理器作任何重大的處理，或者若是該事件存在多個處理函數，這可能形成瀏覽器的嚴重的性能問題
<h2>.mousemove()方法</h2>
<h4>測試一</h4>
<button>點擊：指定觸發mousemove事件</button>
<script type="text/javascript">
$('h2').mousemove(function(e) {
alert('觸發h2元素綁定的mousemove')
})
$("button:eq(0)").click(function(e) {
$('h2').mousemove() //指定觸發綁定的事件
})
</script>
<h4>測試二</h4>
<div class="left">
<div class="aaron1">
<p>鼠標在綠色區域移動觸發mousemove</p>
<p>移動的X位置：</p>
</div>
</div>
<script type="text/javascript">
//綁定一個mousemove事件
//觸發後修改內容
$(".aaron1").mousemove(function(e) {
$(this).find('p:last').html('移動的X位置：' + e.pageX)
})
</script>
<h4>測試三</h4>
<div class="right">
<div class="aaron3">
<p>鼠標移動：不一樣函數傳遞數據</p>
<p>數據：</p>
</div>
</div>
<script type="text/javascript">
//不一樣函數傳遞數據
function data(e) {
$(this).find('p:last').html('數據:' + e.data)
}
function a() {
$(".right").mousemove(1111, data)
}
a();
</script>
jQuery鼠標事件之mouseover與mouseout事件
在學JS的時候，你們還記得有兩個方法叫移入移出事件嗎？onmouseover()與onmouseout()事件~
jQuery當中一樣提供了這樣的事件來監聽用戶的移入移出操做，mouseover()與mouseout()事件，二者用法相似，下面一mouseover爲例：
方法一：$ele.mouseover()
綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，用的比較少
<div id="test">點擊觸發<div>
$("ele").mouseover(function(){
alert('觸發指定事件')
})
$("#test").click(function(){
$("ele").mouseover() //指定觸發事件
});
方法二：$ele.mouseover( handler(eventObject) )
綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數
這樣能夠針對事件的反饋作不少操做了
<div id="test">滑動觸發<div>
$("#test").mouseover(function() {
//this指向 div元素
});
方法三：$ele.mouseover( [eventData ], handler(eventObject) )
使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題
<div id="test">點擊觸發<div>
$("#test").mouseover(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
});
<h2>mouseover與mouseout事件</h2>
<h4>測試一</h4>
<button>點擊：指定觸發mouseover事件</button>
<script type="text/javascript">
$('h2').mouseover(function(e) {
alert('觸發h2元素綁定的mouseover')
})
$("button:eq(0)").click(function(e) {
$('h2').mouseover() //指定觸發綁定的事件
})
</script>
<h4>測試二</h4>
<div class="left">
<div class="aaron1">
<p>鼠標移進此區域觸發mouseover事件</p>
<a>進入元素內部,mouseover事件觸發次數：</a>
</div>
</div>
<script type="text/javascript">
var n = 0;
//綁定一個mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html('進入元素內部,mouseover事件觸發次數：' + (++n))
})
</script>
<h4>測試三</h4>
<div class="right">
<div class="aaron2">
<p>鼠標移動：不一樣函數傳遞數據</p>
<a>進入元素內部,mouseover事件觸發次數：</a>
</div>
</div>
<br/>
<script type="text/javascript">
var n = 0;
//不一樣函數傳遞數據
function data(e) {
$(".right a").html('mouseover事件觸發次數：' + (++n) + '<br/> 傳入數據爲 ：'+ e.data)
}
function a() {
$(".right p:first").mouseover('data = 網', data)
}
a();
</script>
jQuery鼠標事件之mouseenter與mouseleave事件
用交互操做中，常常須要知道用戶操做鼠標是否有移到元素內部或是元素外部，所以jQuery提供了一個mouseenter和mouseleave的快捷方法能夠監聽用戶移動到內部的操做
使用上很是簡單，三種參數傳遞方式與mouseover和mouseout是如出一轍的，因此這裏再也不重複，主要講講區別，下面以mouseenter爲例：
mouseenter JavaScript事件是Internet Explorer專有的。因爲該事件在平時頗有用，jQuery的模擬這一事件，以便它可用於全部瀏覽器。該事件在鼠標移入到元素上時被觸發。任何HTML元素均可以接受此事件。
mouseenter事件和mouseover的區別
關鍵點就是：冒泡的方式處理問題
簡單的例子：
mouseover爲例：
<div class="aaron2">
<p>鼠標離開此區域觸發mouseleave事件</p>
</div>
若是在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，可是沒有離開div元素的時候，觸發的結果:
- p元素響應事件
- div元素響應事件
這裏的問題是div爲何會被觸發？ 緣由就是事件冒泡的問題，p元素觸發了mouseover，他會一直往上找父元素上的mouseover事件，若是父元素有mouseover事件就會被觸發
因此在這種狀況下面，jQuery推薦咱們使用 mouseenter事件
mouseenter事件只會在綁定它的元素上被調用，而不會在後代節點上被觸發
<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>
jQuery鼠標事件之hover事件
學了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四個事件的相同點與不一樣點，如今能夠用來給元素作一個簡單的切換效果
在元素上移進移出切換其換色，通常經過2個事件配合就能夠達到，這裏用mouseenter與mouseleave，這樣能夠避免冒泡問題
$(ele).mouseenter(function(){
$(this).css("background", '#bbffaa');
})
$(ele).mouseleave(function(){
$(this).css("background", 'red');
})
這樣目的是達到了，代碼稍微有點多，對於這樣的簡單邏輯jQuery直接提供了一個hover方法，能夠便捷處理
只須要在hover方法中傳遞2個回調函數就能夠了，不須要顯示的綁定2個事件
$(selector).hover(handlerIn, handlerOut)
- handlerIn(eventObject)：當鼠標指針進入元素時觸發執行的事件函數
- handlerOut(eventObject)：當鼠標指針離開元素時觸發執行的事件函數
<script type="text/javascript">
// hover()方法是同時綁定 mouseenter和 mouseleave事件。
// 咱們能夠用它來簡單地應用在 鼠標在元素上行爲
$("p").hover(
function() {
$(this).css("background", 'red');
},
function() {
$(this).css("background", '#bbffaa');
}
);
</script>
jQuery鼠標事件之focusin事件
當一個元素，或者其內部任何一個元素得到焦點的時候，例如：input元素，用戶在點擊聚焦的時候，若是開發者須要捕獲這個動做的時候，jQuery提供了一個focusin事件
使用上很是簡單：
方法一：$ele.focusin()
綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，通常用的比較少
<div id="test">點擊觸發<div>
$("ele").focusin(function(){
alert('觸發指定事件')
})
$("#test").mouseup(function(){
$("ele").focusin() //指定觸發事件
});
方法二：$ele.focusin( handler )
綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數
這樣能夠針對事件的反饋作不少操做了
<div id="test">點擊觸發<div>
$("#test").focusin(function() {
//this指向 div元素
});
方法三：$ele.focusin( [eventData ], handler )
使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題
<div id="test">點擊觸發<div>
$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
});
<h2>.focusin()方法</h2>
<div class="left">
<div class="aaron">
點擊聚焦：<input type="text" />
</div>
</div>
<div class="right">
<div class="aaron1">
點擊聚焦並傳遞參數：<input type="text" />
</div>
</div>
<script type="text/javascript">
//input聚焦
//給input元素增長一個邊框
$("input:first").focusin(function() {
$(this).css('border','2px solid red')
})
</script>
<script type="text/javascript">
//不一樣函數傳遞數據
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin('網', fn)
}
a();
</script>
jQuery鼠標事件之focusout事件
當一個元素，或者其內部任何一個元素失去焦點的時候，好比input元素，用戶在點擊失去焦的時候，若是開發者須要捕獲這個動做，jQuery提供了一個focusout事件
使用上很是簡單：
方法一：$ele.focusout()
綁定$ele元素，不帶任何參數通常是用來指定觸發一個事件，可能通常用的比較少
<div id="test">點擊觸發<div>
$("ele").focusout(function(){
alert('觸發指定事件')
})
$("#test").mouseup(function(){
$("ele").focusout() //指定觸發事件
});
方法二：$ele.focusout( handler )
綁定$ele元素，每次$ele元素觸發點擊操做會執行回調 handler函數
這樣能夠針對事件的反饋作不少操做了
<div id="test">點擊觸發<div>
$("#test").focusout(function() {
//this指向 div元素
});
方法三：$ele.focusout( [eventData ], handler )
使用與方法二一致，不過能夠接受一個數據參數，這樣的處理是爲了解決不一樣做用域下數據傳遞的問題
<div id="test">點擊觸發<div>
$("#test").focusout(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數據
}); <h2>.focusout()方法</h2> <div class="left"> <div class="aaron"> 點擊觸發失去焦點：<input type="text" /> </div> </div> <div class="right"> <div class="aaron1"> 點擊觸發失去焦點並傳遞參數：<input type="text" /> </div> </div> <script type="text/javascript"> //input失去焦點 //給input元素增長一個邊框 $("input:first").focusout(function() { $(this).css('border','2px solid red') }) </script> <script type="text/javascript"> //不一樣函數傳遞數據 function fn(e) { $(this).val(e.data) } function a() { $("input:last").focusout('網', fn) } a(); </script>
- 1. jquery 事件--鼠標事件
- 2. 鼠標事件
- 3. 6、鼠標事件
- 4. jQuery鼠標事件
- 5. 鼠標事件-MouseEvent
- 6. JQ 鼠標事件
- 7. Canvas+鼠標事件
- 8. JavaScript鼠標事件
- 9. js鼠標事件
- 10. Qt-鼠標事件
- 更多相關文章...
- • C# 事件（Event） - C#教程
- • jQuery Mobile 事件 - jQuery Mobile 教程
- • 再有人問你分佈式事務，把這篇扔給他
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. jquery 事件--鼠標事件
- 2. 鼠標事件
- 3. 6、鼠標事件
- 4. jQuery鼠標事件
- 5. 鼠標事件-MouseEvent
- 6. JQ 鼠標事件
- 7. Canvas+鼠標事件
- 8. JavaScript鼠標事件
- 9. js鼠標事件
- 10. Qt-鼠標事件