成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JQuery基礎(chǔ)修煉-事件篇

yy13818512006 / 3125人閱讀

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監(jiān)聽用戶單擊操作，另一個方法是方法用于監(jiān)聽用戶雙擊操作。

目錄
第1章 事件介紹 第2章 鼠標事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 click與dbclick事件

用交互操作中，最簡單直接就是點擊操作。jQuery提供了兩個方法一個是click方法用于監(jiān)聽用戶單擊操作，另一個方法是dbclick方法用于監(jiān)聽用戶雙擊操作。這兩個方法的用戶是類似，下面以click()事件為例

使用上非常簡單：

方法一：$ele.click()

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

點擊觸發(fā)

$("ele").click(function(){
    alert("觸發(fā)指定事件")
})
$("#text").click(function(){
     $("ele").click()  //手動指定觸發(fā)事件 
});

方法二：$ele.click( handler(eventObject) )

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

點擊觸發(fā)

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

方法三：$ele.click( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點擊觸發(fā)

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

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

dbclick與click事件不同的是：

click事件觸發(fā)需要以下幾點：

click事件其實是由mousedown與mouseup 2個動作構(gòu)成，所以點擊的動作只有在松手后才觸發(fā)

PS:mousedown和mouseup下一節(jié)會講到

dblclick事件觸發(fā)需要以下幾點：**

dblclick又是由2個click疊加而來的，所以dblclick事件只有在滿足以下條件的情況下才能被觸發(fā)

鼠標指針在元素里面時點擊。

鼠標指針在元素里面時釋放。

鼠標指針在元素里面時再次點擊，點擊間隔時間，是系統(tǒng)而定。

鼠標指針在元素里面時再次釋放。

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

mousedown與mouseup事件

用交互操作中，最簡單直接就是點擊操作，因此jQuery提供了一個mousedown的快捷方法可以監(jiān)聽用戶點擊的操作，與其對應(yīng)的還有一個方法mouseup快捷方法可以監(jiān)聽用戶點擊的操作。兩種方法用法類似，一下以mousedown()為例

使用上非常簡單：

方法一：$ele.mousedown()

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

點擊觸發(fā)

$("ele").mousedown(function(){
    alert("觸發(fā)指定事件")
})
$("#text").mousedown(function(){
     $("ele").mousedown()  //手動指定觸發(fā)事件 
});

方法二：$ele.mousedown( handler(eventObject) )

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

這樣可以針對事件的反饋做很多操作了

點擊觸發(fā)

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

方法三：$ele.mousedown( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點擊觸發(fā)

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

mousedown事件觸發(fā)需要以下幾點：

mousedown強調(diào)是按下觸發(fā)

如果在一個元素按住了鼠標不放，并且拖動鼠標離開這個元素，并釋放鼠標鍵，這仍然是算作mousedown事件

任何鼠標按鈕被按下時都能觸發(fā)mousedown事件

用event 對象的which區(qū)別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

mouseup事件觸發(fā)需要以下幾點：**

mouseup強調(diào)是松手觸發(fā)，與mousedown是相反的

mouseup與mousedown組合起來就是click事件

如果用戶在一個元素上按下鼠標按鍵，并且拖動鼠標離開這個元素，然后釋放鼠標鍵，這仍然是算作mouseup事件

任何鼠標按鈕松手時都能觸發(fā)mouseup事件

用event 對象的which區(qū)別按鍵，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

另外需要注意的是：

click與mousedown的區(qū)別：**

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

mousemove事件

用交互操作中，經(jīng)常需要知道用戶是否有移動的操作?；谝苿拥臋C制可以做出拖動、拖拽一系列的效果出來。針對移動事件，jQuery提供了一個mousemove的快捷方法可以監(jiān)聽用戶移動的的操作

使用上非常簡單：

方法一：$ele.mousemove()

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

點擊觸發(fā)

$("ele").mousemove(function(){
    alert("觸發(fā)指定事件")
})
$("#text").click(function(){
     $("ele").mousemove()  //指定觸發(fā)事件 
});

方法二：$ele.mousemove( handler(eventObject) )

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

這樣可以針對事件的反饋做很多操作了

滑動觸發(fā)

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

方法三：$ele.mousemove( [eventData ], handler(eventObject) )

使用與方法二一致，不過可以接受一個數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點擊觸發(fā)

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

mousemove事件觸發(fā)需要以下幾點：

mousemove事件是當鼠標指針移動時觸發(fā)的，即使是一個像素

如果處理器做任何重大的處理，或者如果該事件存在多個處理函數(shù)，這可能造成瀏覽器的嚴重的性能問題

mouseenter與mouseleave事件

用交互操作中，經(jīng)常需要知道用戶操作鼠標是否有移到元素內(nèi)部或是元素外部，因此jQuery提供了一個mouseenter和mouseleave的快捷方法可以監(jiān)聽用戶移動到內(nèi)部的操作

使用上非常簡單，三種參數(shù)傳遞方式與mouseover和mouseout是一模一樣的，所以這里不再重復(fù)，主要講講區(qū)別，下面以mouseenter為例：

mouseenter JavaScript事件是Internet Explorer專有的。由于該事件在平時很有用，jQuery的模擬這一事件，以便它可用于所有瀏覽器。該事件在鼠標移入到元素上時被觸發(fā)。任何HTML元素都可以接受此事件。

mouseenter事件和mouseover的區(qū)別

關(guān)鍵點就是：冒泡的方式處理問題

簡單的例子：

mouseover為例：


    
鼠標離開此區(qū)域觸發(fā)mouseleave事件

如果在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，但是沒有離開div元素的時候，觸發(fā)的結(jié)果:

p元素響應(yīng)事件

div元素響應(yīng)事件

這里的問題是div為什么會被觸發(fā)？ 原因就是事件冒泡的問題，p元素觸發(fā)了mouseover，他會一直往上找父元素上的mouseover事件，如果有全觸發(fā)了

所以在這種情況下面，jQuery推薦我們使用 mouseenter事件

mouseenter事件只會在綁定它的元素上被調(diào)用，而不會在后代節(jié)點上被觸發(fā)

這就是最本質(zhì)的區(qū)別.

hover事件

學(xué)了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四個事件的相同點與不同點，現(xiàn)在可以用來給元素做一個簡單的切換效果

在元素上移進移出切換其換色，一般通過2個事件配合就可以達到，這里用mouseenter與mouseleave，這樣可以避免冒泡問題

$(ele).mouseenter(function(){
     $(this).css("background", "#bbffaa");
 })
$(ele).mouseleave(function(){
    $(this).css("background", "red");
})

這樣目的是達到了，代碼稍微有點多，對于這樣的簡單邏輯jQuery直接提供了一個hover方法，可以便捷處理

只需要在hover方法中傳遞2個回調(diào)函數(shù)就可以了，不需要顯示的綁定2個事件

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject)：當鼠標指針進入元素時觸發(fā)執(zhí)行的事件函數(shù)

handlerOut(eventObject)：當鼠標指針離開元素時觸發(fā)執(zhí)行的事件函數(shù)

focusin事件

當一個元素，或者其內(nèi)部任何一個元素獲得焦點的時候，例如：input元素，用戶在點擊聚焦的時候，如果開發(fā)者需要捕獲這個動作的時候，jQuery提供了一個focusin事件

使用上非常簡單：

方法一：$ele.focusin()

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

點擊觸發(fā)

$("ele").focusin(function(){
    alert("觸發(fā)指定事件")
})
$("#text").mouseup(function(){
     $("ele").focusin()  //指定觸發(fā)事件 
});

?

方法二：$ele.focusin( handler )

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

這樣可以針對事件的反饋做很多操作了

點擊觸發(fā)

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

?

方法三：$ele.focusin( [eventData ], handler )

使用與方法二一致，不過可以接受一個數(shù)據(jù)參數(shù)，這樣的處理是為了解決不同作用域下數(shù)據(jù)傳遞的問題

點擊觸發(fā)

$("#text").focusin(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 傳遞數(shù)據(jù)
});
blur與foucus事件

在之前2我們了解了表單處理事件focusin事件與focusout事件，同樣用于處理表單焦點的事件還有blur與focus事件

它們之間的本質(zhì)區(qū)別:

是否支持冒泡處理

舉個簡單的例子

其中input元素可以觸發(fā)focus()事件

div是input的父元素，當它包含的元素input觸發(fā)了focus事件時，它就產(chǎn)生了focusin()事件。

focus()在元素本身產(chǎn)生，focusin()在元素包含的元素中產(chǎn)生

blur與focusout也亦是如此

change事件

元素，