鼠標(biāo)事件

.click() 單擊 .dbclick()雙擊

.click() 不帶任何參數(shù),一般用來指定觸發(fā)一個(gè)事件

$("ele").click(function(){alert('觸發(fā)指定事件')})

$ele.click( handler(eventObject) ) 綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會執(zhí)行回調(diào) handler函數(shù)，這樣可以針對事件的反饋?zhàn)龊芏嗖僮髁?，方法中的this是指向了綁定事件的元素

$("#ele").click(function() {//this指向 div元素});

$ele.click( [eventData ], handler(eventObject) ) 使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

<div id="test">點(diǎn)擊觸發(fā)<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

dblclick()的用法和click()的用法是類似的，可以參考以上click()的用法。

dbclick與click事件不同點(diǎn)

• click事件其實(shí)是由mousedown與mouseup 2個(gè)動(dòng)作構(gòu)成，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)
• dblclick事件鼠標(biāo)指針在元素里面時(shí) 點(diǎn)擊鼠標(biāo)指針在元素里面時(shí)釋放 鼠標(biāo)指針在元素里面時(shí)再次點(diǎn)擊點(diǎn)擊間隔時(shí)間，是系統(tǒng)而定 鼠標(biāo)指針在元素里面時(shí)再次釋放

注意

• 在同一元素上同時(shí)綁定 click 和 dblclick 事件是不可取的。各個(gè)瀏覽器事件觸發(fā)的順序是不同的，一些瀏覽器在dblclick之前接受兩個(gè) click 事件 ，而一些瀏覽器只接受一個(gè) click 事件。用戶往往可通過不同的操作系統(tǒng)和瀏覽器配置雙擊靈敏度

. mousedown()鼠標(biāo)按下 . mouseup()鼠標(biāo)彈起

$ele.mousedown() 綁定$ele元素，不帶任何參數(shù)一般是用來指定觸發(fā)一個(gè)事件，可能一般用的比較少

$("ele").mousedown() //手動(dòng)指定觸發(fā)事件

$ele.mousedown( handler(eventObject) ) 綁定$ele元素，每次$ele元素觸發(fā)點(diǎn)擊操作會執(zhí)行回調(diào) handler函數(shù)

$("#test").mousedown(function() {//this指向 div元素});

$ele.mousedown( [eventData ], handler(eventObject) ) 使用與方法二一致，不過可以接受一個(gè)數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

<div id="test">點(diǎn)擊觸發(fā)<div>
$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 傳遞數(shù)據(jù)
});

mousedown事件觸發(fā)需要以下幾點(diǎn)

• mousedown強(qiáng)調(diào)是按下觸發(fā)
• 如果在一個(gè)元素按住了鼠標(biāo)不放，并且拖動(dòng)鼠標(biāo)離開這個(gè)元素，并釋放鼠標(biāo)鍵，這仍然是算作mousedown事件
• 任何鼠標(biāo)按鈕被按下時(shí)都能觸發(fā)mousedown事件
• 用event 對象的which區(qū)別按鍵，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

mouseup事件觸發(fā)需要以下幾點(diǎn)

• mouseup強(qiáng)調(diào)是松手觸發(fā)，與mousedown是相反的
• mouseup與mousedown組合起來就是click事件
• 如果用戶在一個(gè)元素上按下鼠標(biāo)按鍵，并且拖動(dòng)鼠標(biāo)離開這個(gè)元素，然后釋放鼠標(biāo)鍵，這仍然是算作mouseup事件
• 任何鼠標(biāo)按鈕松手時(shí)都能觸發(fā)mouseup事件
• 用event 對象的which區(qū)別按鍵，敲擊鼠標(biāo)左鍵which的值是1，敲擊鼠標(biāo)中鍵which的值是2，敲擊鼠標(biāo)右鍵which的值是3

click與mousedown的區(qū)別

• click事件其實(shí)是由mousedown于mouseup 2個(gè)動(dòng)作構(gòu)成，所以點(diǎn)擊的動(dòng)作只有在松手后才觸發(fā)

mousemove()的快捷方法可以監(jiān)聽用戶移動(dòng)的的操作,用法同 click()

注意

• mousemove事件是當(dāng)鼠標(biāo)指針移動(dòng)時(shí)觸發(fā)的，即使是一個(gè)像素
• 如果處理器做任何重大的處理，或者如果該事件存在多個(gè)處理函數(shù)，這可能造成瀏覽器的嚴(yán)重的性能問題

mouseover() 鼠標(biāo)移入某個(gè)元素
mouseout() 鼠標(biāo)移除某個(gè)元素

mouseenter() 鼠標(biāo)移入某個(gè)元素
mouseleave() 鼠標(biāo)移除某個(gè)元素

區(qū)別

mouseover和mouseout事件會向上傳遞,綁定事件的所有父類都會觸發(fā)綁定事件,而mouseenter和mouseleave則不會

$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：當(dāng)鼠標(biāo)指針進(jìn)入元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)
handlerOut(eventObject)：當(dāng)鼠標(biāo)指針離開元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)

$("p").hover(
    function() {
        $(this).css("background", 'red');
    },
    function() {
        $(this).css("background", 'blue');
    }
);

##表單事件

>`focusin()用戶在點(diǎn)擊獲得焦點(diǎn)的時(shí)候的時(shí)候觸發(fā)`
>`focusout()用戶在點(diǎn)擊失去焦點(diǎn)的時(shí)候的時(shí)候觸發(fā)`

>`.focus() 用戶在點(diǎn)擊獲得焦點(diǎn)的時(shí)候的時(shí)候觸發(fā)(不支持冒泡)`
>`.blur() 用戶在點(diǎn)擊失去焦點(diǎn)的時(shí)候的時(shí)候觸發(fā)(不支持冒泡)`

用法類似

$("#test").focusin(11111,function(e) {
//this指向 div元素
//e.data => 11111 傳遞數(shù)據(jù)
});

>`.change 監(jiān)聽value值的變化，當(dāng)有改變時(shí)，失去焦點(diǎn)后觸發(fā)change事件。對于單選按鈕和復(fù)選框，當(dāng)用戶用鼠標(biāo)做出選擇時(shí)，該事件立即觸發(fā)。`

$(".input").change(function(e) {
$("#p").html(e.target.value)
})

>`.select() 當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時(shí)，會發(fā)生 select 事件。`

<input id="test" value="文字選中"></input>
$("#test").select(11111,function(e) {//響應(yīng)文字選中回調(diào)
//this指向 div元素
//e.data => 11111 傳遞數(shù)據(jù)
});

>`.submit() 監(jiān)聽提交表單動(dòng)作`

#####注意
- form元素是有默認(rèn)提交表單的行為，如果通過submit處理的話，需要禁止瀏覽器的這個(gè)默認(rèn)行為
傳統(tǒng)的方式是調(diào)用事件對象  e.preventDefault() 來處理， jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可

$("#target").submit(function(data) {
return false; //阻止默認(rèn)行為，提交表單
});

##鍵盤事件

>`keydown 當(dāng)用戶在一個(gè)元素上第一次按下鍵盤上字母鍵的時(shí)候，就會觸發(fā)它。`
>`keyup 當(dāng)用戶在一個(gè)元素上第一次松手鍵盤上的鍵的時(shí)候，就會觸發(fā)它。`

#####注意
- keydown是在鍵盤按下就會觸發(fā)
- keyup是在鍵盤松手就會觸發(fā)
- 理論上它可以綁定到任何元素，但keydown/keyup事件只是發(fā)送到具有焦點(diǎn)的元素上，不同的瀏覽器中，可獲得焦點(diǎn)的元素略有不同，但是表單元素總是能獲取焦點(diǎn)，所以對于此事件類型表單元素是最合適的。

>`keypress 當(dāng)瀏覽器捕獲鍵盤輸入時(shí)`

#####注意
- 只能捕獲單個(gè)字符，不能捕獲組合鍵
- 無法響應(yīng)系統(tǒng)功能鍵（如delete，backspace）
- 不區(qū)分小鍵盤和主鍵盤的數(shù)字字符
- KeyPress主要用來接收字母、數(shù)字等ANSI字符，而 KeyDown 和 KeyUP 事件過程可以處理任何不被 KeyPress 識別的擊鍵。諸如：功能鍵（F1-F12）、編輯鍵、定位鍵以及任何這些鍵和鍵盤換檔鍵的組合等。

##綁定與解綁
>`.on( events ,[ selector ] ,[ data ] )`

$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式

多個(gè)事件綁定同一個(gè)函數(shù)
` $("#elem").on("mouseover mouseout",function(){ });`
`通過空格分離，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件`

多個(gè)事件綁定不同函數(shù)

$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
通過空格分離，傳遞不同的事件名，可以同時(shí)綁定多個(gè)事件，每一個(gè)事件執(zhí)行自己的回調(diào)方法

將數(shù)據(jù)傳遞到處理程序

function greet( event ) {
alert( "Hello " + event.data.name ); //Hello World
}
$( "button" ).on( "click", {
name: "World"
}, greet );

委托機(jī)制
`.on( events ,[ selector ] ,[ data ], handler(eventObject) )`

<div class="left">
<p class="aaron">
<a>目標(biāo)節(jié)點(diǎn)</a> //點(diǎn)擊在這個(gè)元素上
</p>
</div>
$("div").on("click","p",fn)

事件綁定在最上層div元素上，當(dāng)用戶觸發(fā)在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二參數(shù)，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發(fā)事件回調(diào)函數(shù)

>`off() 方法移除該綁定`

$("elem").on("mousedown mouseup",fn) //綁定2個(gè)事件
$("elem").off("mousedown") //刪除一個(gè)事件
$("elem").off("mousedown mouseup") //刪除所有事件
$("elem").off() //刪除所有事件

##事件對象

>`event.target 屬性可以是注冊事件時(shí)的元素，或者它的子元素。通常用于比較 event.target 和 this 來確定事件是不是由于冒泡而觸發(fā)的。經(jīng)常用于事件冒泡時(shí)處理事件委托`

>`event.type：獲取事件的類型`
>`event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對于頁面的坐標(biāo)(鼠標(biāo)相對于文檔的左邊緣的位置（左邊）與 （頂邊）的距離)`

通過這2個(gè)屬性，可以確定元素在當(dāng)前頁面的坐標(biāo)值，鼠標(biāo)相對于文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化
>`event.preventDefault() 方法：阻止默認(rèn)行為`

這個(gè)用的特別多，在執(zhí)行這個(gè)方法后，如果點(diǎn)擊一個(gè)鏈接（a標(biāo)簽），瀏覽器不會跳轉(zhuǎn)到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個(gè)方法是否(在那個(gè)事件對象上)被調(diào)用過了
>`event.stopPropagation() 方法：阻止事件冒泡`

事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
>`event.which：獲取在鼠標(biāo)單擊時(shí)，單擊的是鼠標(biāo)的哪個(gè)鍵`

event.which 將 event.keyCode 和 event.charCode 標(biāo)準(zhǔn)化了。event.which也將正?；陌粹o按下(mousedown 和 mouseupevents)，左鍵報(bào)告1，中間鍵報(bào)告2，右鍵報(bào)告3
>`event.currentTarget : 在事件冒泡過程中的當(dāng)前DOM元素`

冒泡前的當(dāng)前觸發(fā)事件的DOM對象, 等同于this.
- js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；
- .this和event.target都是dom對象
- 如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對象。比如this和$(this)的使用、event.target和$(event.target)的使用；

##自定義事件

>`$('#elem').trigger('click'); //觸發(fā)瀏覽器事件`

根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為

#####注意
trigger事件會在DOM樹上冒泡

trigger事件是具有觸發(fā)原生與自定義能力的，但是存在一個(gè)不可避免的問題： 事件對象event無法完美的實(shí)現(xiàn)，畢竟一個(gè)是瀏覽器給的，一個(gè)是自己模擬的。盡管 .trigger() 模擬事件對象，但是它并沒有完美的復(fù)制自然發(fā)生的事件，若要觸發(fā)通過 jQuery 綁定的事件處理函數(shù)，而不觸發(fā)原生的事件，使用.triggerHandler() 來代替

#####注意
- triggerHandler不會觸發(fā)瀏覽器的默認(rèn)行為，.triggerHandler( "submit" )將不會調(diào)用表單上的.submit()
- .trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素
- 使用 .triggerHandler() 觸發(fā)的事件，并不會在 DOM 樹中向上冒泡。 如果它們不是由目標(biāo)元素直接觸發(fā)的，那么它就不會進(jìn)行任何處理
- 與普通的方法返回 jQuery 對象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值。如果沒有觸發(fā)任何事件，會返回 undefined