首頁技術文章正文

jQuery綁定事件有幾種方法?

更新時間:2021-11-12 來源:黑馬程序員 瀏覽量:

IT培訓班

在jQuery中,實現(xiàn)事件綁定有兩種方式,一種是通過事件方法進行綁定,另一種是通過on()方法進行綁定,下面我們分別進行詳細講解。

1. 通過事件方法綁定事件

在前面的學習中,我們已經(jīng)用過了單個事件的綁定,是通過調用某個事件方法,傳入事件處理函數(shù)來實現(xiàn)的,如click()、change()等。jQuery的事件和DOM中的事件相比,省略了開頭的“on”,如jQuery中的click()對應DOM中的onclick。并且,jQuery的事件方法允許為一個事件綁定多個事件處理函數(shù),只需多次調用事件方法,傳入不同的函數(shù)即可。

接下來我們通過下面列舉jQuery中的一些常用的事件方法。

jQuery常用事件方法

分類

方法

說明

表單
事件

blur([[data],function])當元素失去焦點時觸發(fā)
focus([[data],function])當元素獲得焦點時觸發(fā)
change([[data],function])當元素的值發(fā)生改變時觸發(fā)
focusin([dta],function)在父元素上檢測子元素獲取焦點的情況
focusout([data],function)在父元素上檢測子元素失去焦點的情況
select([[data],function])當文本框(包括<input>和<textarea>)中
的文本被選擇時觸發(fā)
submit([[data],function])當表單提交時觸發(fā)

鍵盤
事件

keydown([[data],function])鍵盤按鍵按下時觸發(fā)
keypress([[data],function])鍵盤按鍵(Shift、Fn、CapsLOck等非
字符鍵除外)按下時觸發(fā)
keyup([[data],function)鍵盤按鍵彈起時觸發(fā)

鼠標
事件

mouseover([[data],function])當鼠標指針移入對象時觸發(fā)
mouseout([[data],function])當鼠標指針從元素上離開時觸發(fā)
click([[data],function])當單擊時元素觸發(fā)
dbclick([[data],function])當雙擊元素時觸發(fā)
mousedown([[data],function])當鼠標指針移動到元素上方,并按下
鼠標按鍵時觸發(fā)
mouseup([[data],function])當在元素上放開鼠標按鈕時,會被觸發(fā)

瀏覽器
事件

scroll([[data],function])當滾動條發(fā)生變化觸發(fā)
resize([[data],function)當調整瀏覽器窗口的大小時會被觸發(fā)

在上表中,參數(shù)function表示觸發(fā)事件時執(zhí)行的處理函數(shù),參數(shù)data表示函數(shù)傳入的數(shù)據(jù),可以使用“事件對象.data”獲取。如果調用時省略參數(shù),則表示手動觸動事件。

下面我們通過代碼演示事件方法的使用。

<div>綁定事件</div>
<script>
    $("div").click(function(){
        $(this).css("background", "purple");
    });
    $("div").mouseenter(function(){
        $(this).css("background", "skyblue");
    });
</script>

上述代碼中,第1行代碼定義了div元素。第3~5行代碼為div元素綁定單擊事件,通過第4行代碼修改當前元素背景色為紫色。第6~8行代碼為div元素綁定鼠標指針移入事件,實現(xiàn)當鼠標指針移入div元素時,將背景色修改為天藍色。

2.通過on()方法綁定事件

on()方法在匹配元素上綁定一個或多個事件處理函數(shù),語法如下所示。

element.on(events, [selector], fn)

上述代碼中,events表示一個或多個用空格分隔的事件類型,如click;selector表示子元素選擇器;fn表示回調函數(shù),即綁定在元素身上的偵聽函數(shù)。

下面我們通過代碼演示on()方法的使用。

//一次綁定一個事件
$("div").on("click", function(){
    $(this).css("background","yellow")
});

//一次綁定多個事件
$("div").on({
    mouseenter: function(){
            $(this).css("background", "skyblue");
    },
    click: function(){
        $(this).css("background", "purple");
    },
    mouseleave: function(){
        $(this).css("background", "blue");
    }
});

// 為不同事件綁定相同的事件處理函數(shù)
$("div").on("mouseenter mouseleave", function(){
    $(this).toggleClass("current");
});

上述代碼演示了on()方法的3種用法。第1種用法非常簡單,和事件方法的方式類似;第2種用法是為on()方法傳入了一個對象,對象的屬性名表示事件類型,屬性值表示對應的事件處理函數(shù);第3種用法是同時為mouseenter、mouseleave事件綁定相同的事件處理函數(shù),實現(xiàn)div元素的current類的切換效果。



猜你喜歡

jQuery和vue的區(qū)別是什么?

jQuery中attr()和prop()有什么不同?

jQuery元素內容操作的方法有多少種?

黑馬程序員web前端培訓課程

分享到:
在線咨詢 我要報名
和我們在線交談!