1. 程式人生 > >【jQuery】 jQuery常用事件總結

【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和(this)使event.target(this)的使用、event.target和(event.target)的使用;