jquery 事件--鼠標事件
一、click( ) 與 dblclick() --雙擊
- click事件其實是由mousedown與mouseup 2個動作構成,所以點擊的動作只有在松手後才觸發
- 在同一元素上同時綁定 click 和 dblclick 事件是不可取的。
$(".div").click(function(){
alert("hello")
})
$(‘p‘).click(function(e) {
alert(e.target.textContent); // 打印所點擊對象的文本
})
function abc(e) {
alert(e.data) //1111
}
$("button:eq(2)").click(1111, abc); // 點擊按鈕,調用data方法
//click 事件的3種寫法
//1
$("#box").click(function(){
alert("Hello ");
});
//2
$(‘#box‘).bind("click", function(){
alert("Hello");
});
//3
$(‘#box‘).on(‘click‘, function(){
alert("Hello");
});
二、mousedown() 與 mouseup()
- mousedown強調是按下觸發
- 任何鼠標按鈕被按下時都能觸發mousedown事件
- 用event 對象的which區別按鍵,敲擊鼠標左鍵which的值是1,敲擊鼠標中鍵which的值是2,敲擊鼠標右鍵which的值是3
// 點擊按鈕,彈出是哪個鍵按下了,左鍵是1,中間滾輪是2,右鍵是3 $("button:eq(0)").mousedown(function(e) { alert(‘e.which: ‘ + e.which) }) function fn(e) { alert(e.data) //1111 } function a() { $("button:eq(2)").mousedown(1111, fn) } a();
三、mousemove() 鼠標移動
- mousemove事件是當鼠標指針移動時觸發的,即使是一個像素
- 如果處理器做任何重大的處理,或者如果該事件存在多個處理函數,這可能造成瀏覽器的嚴重的性能問題
<div class="aaron1"> <p>鼠標在綠色區域移動觸發mousemove</p> <p>移動的X位置:</p> </div> $(".aaron1").mousemove(function(e) { $(this).find(‘p:last‘).html(‘移動的X位置:‘ + e.pageX) })
四、mouseover() 與 mouseout()
移入移出事件
<div class="aaron1">
<p>鼠標移進此區域觸發mouseover事件</p>
<a>進入元素內部,mouseover事件觸發次數:</a>
</div>
var n = 0;
//綁定一個mouseover事件
$(".aaron1 p:first").mouseover(function(e) {
$(".aaron1 a").html(‘進入元素內部,mouseover事件觸發次數:‘ + (++n))
})
五、mouseenter() 與 mouseleave()
與mouseover() /mouseout() 類似
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事件只會在綁定它的元素上被調用,而不會在後代節點上被觸發
<style>p{height: 50px;border: 1px solid red;margin: 30px;}</style>
<div class="aaron1">
<p>鼠標離開此區域觸發mouseover事件</p>
<a>mouseover事件觸發次數:</a><br/>
<a>mouseover冒泡事件觸發次數:</a>
</div>
<div class="aaron2">
<p>鼠標進入此區域觸發mouseenter事件</p>
<a>mouseenter事件觸發次數:</a><br/>
<a>mouseenter冒泡事件觸發次數:</a>
</div>
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 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>
六、hover() 事件
在元素上移進移出切換其換色,一般通過2個事件配合就可以達到,這裏用mouseenter與mouseleave,這樣可以避免冒泡問題
$(ele).mouseenter(function(){ $(this).css("background", ‘#bbffaa‘); }) $(ele).mouseleave(function(){ $(this).css("background", ‘red‘); })
直接用一個hover方法,可以便捷處理
$("p").hover(function(){
$(this).css();
})
七、focusin() 與 focusout()
當一個元素,或者其內部任何一個元素獲得焦點的時候,
例如:input元素,用戶在點擊聚焦的時候,如果開發者需要捕獲這個動作的時候,jQuery提供了一個focusin事件<input type="text" />
$("input:first").focusin(function() { $(this).css(‘border‘,‘2px solid red‘);// input 獲得焦點,邊框變紅 })
$("input:first").focusout(function() {
$(this).css(‘border‘,‘2px solid blue‘);// 失去焦點,
})
//不同函數傳遞數據
function fn(e) {
$(this).val(e.data)
}
function a() {
$("input:last").focusin(‘請輸入你的名字‘, fn)
}
a();
focus blur 事件在表單事件裏
jquery 事件--鼠標事件