jQuery綁定事件有幾種方法？

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

1. 通過(guò)事件方法綁定事件

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

接下來(lái)我們通過(guò)下面列舉jQuery中的一些常用的事件方法。

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

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

上述代碼中，第1行代碼定義了div元素。第3～5行代碼為div元素綁定單擊事件，通過(guò)第4行代碼修改當(dāng)前元素背景色為紫色。第6～8行代碼為div元素綁定鼠標(biāo)指針移入事件，實(shí)現(xiàn)當(dāng)鼠標(biāo)指針移入div元素時(shí)，將背景色修改為天藍(lán)色。

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

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

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

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

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

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

//一次綁定多個(gè)事件
$("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種用法非常簡(jiǎn)單，和事件方法的方式類似；第2種用法是為on()方法傳入了一個(gè)對(duì)象，對(duì)象的屬性名表示事件類型，屬性值表示對(duì)應(yīng)的事件處理函數(shù);第3種用法是同時(shí)為mouseenter、mouseleave事件綁定相同的事件處理函數(shù)，實(shí)現(xiàn)div元素的current類的切換效果。

猜你喜歡

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

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

jQuery元素內(nèi)容操作的方法有多少種？

黑馬程序員web前端培訓(xùn)課程