【jQuery】 jQuery常用事件總結
注意:jQuery是一個集合,所有很多時候返回值也是一個集合
1.滑鼠事件
$ele.click() 單擊
$ele.click( function(e) )
$ele.click( [eventData ],function(e)) e.data=eventData
——————————————————————————————
下列均有上面三種方式:
$ele.dbclick() 雙擊
$ele.mousedown() 滑鼠按下
$ele.mouseup() 滑鼠鬆開
$ele.mousemove() 滑鼠移動
$ele.mouseover() 滑鼠移入
$ele.mouseout() 滑鼠移出
$ele.mouseenter() 滑鼠移入,不會進行冒泡
$ele.mouseleave()滑鼠移出,不會進行冒泡
——————————————————————————————
$(selector).hover(handlerIn(function), handlerOut(function))
2.表單事件
下面均有開頭的那三種方式:
$ele.focusin() 元素獲取焦點時觸發,不會進行冒泡處理
$ele.focusout() 元素失去焦點時觸發,不會進行冒泡處理
$ele.focus() 元素獲取焦點時觸發
$ele.blur() 元素失去焦點時觸發
$ele.change(function) 元素內容改變時觸發
$ele.select() 選擇事件只能用於<inpuy>
元素與<textarea>
的元素
$ele.submit() 表單提交時觸發。
3.鍵盤事件
如在input中輸入時:
$elem.keydown() 鍵盤按下,可以撲獲組合鍵,問題每次獲取的內容都是之前輸入的,當前輸入的獲取不到
$elem.keyup() 鍵盤松開
$elem.keypress() 和keydown(),可以撲獲到,常用這個
keypress事件與keydown和keyup的主要區別:
只能捕獲單個字元,不能捕獲組合鍵
無法響應系統功能鍵(如delete,backspace)
不區分小鍵盤和主鍵盤的數字字元
4.事件的繫結和解綁:
$ele.on( events ,[selectors],[ data ], function(event) ))
data 引數位置看清楚,event.data=data;data如果是物件則 event.data.value
selectors是元素,可以使用委託機制,例如$("div").on("click","p",fn)
一個事件繫結一個函式 $("#elem").on('click',function(){}) 多個事件繫結一個函式 $("#elem").on("mouseover mouseout",function(){ }); 多個事件繫結多個函式 $("#elem").on({ mouseover:function(){}, mouseout:function(){} });
$(“elem”).one(type,[data],fn) 繫結一個一次性的事件處理函式
$("p").one("click", function(){
alert( $(this).text() );
});
$(“elem”).off([eventname]) 沒有引數則將事件全部銷燬
5.事件物件的使用
event.target 代表當前觸發的元素
event.type:獲取事件的型別
event.pageX 和 event.pageY:獲取滑鼠當前相對於頁面的座標
event.preventDefault() 方法:阻止預設行為
event.stopPropagation() 方法:阻止事件冒泡
event.which:獲取在滑鼠單擊時,單擊的是滑鼠的哪個鍵,左鍵報告1,中間鍵報告2,右鍵報告3
event.currentTarget : 在事件冒泡過程中的當前DOM元素,等同於this
this和event.target的區別:
js中事件是會冒泡的,所以this是可以變化的,但event.target不會變化,它永遠是直接接受事件的目標DOM元素;
this和event.target都是dom物件
如果要使用jquey中的方法可以將他們轉換為jquery物件。比如this和(event.target)的使用;