快捷導(dǎo)航

addEventListener—jQuery的事件監(jiān)聽(tīng)方法

更新時(shí)間：2023年06月17日 14:23:40 投稿：yin

在Javascript中，事件監(jiān)聽(tīng)是非常重要的，通過(guò)事件監(jiān)聽(tīng)，我們可以在用戶(hù)執(zhí)行某些操作時(shí)觸發(fā)相應(yīng)的處理程序。最初，Javascript監(jiān)聽(tīng)事件的方式是addEvent。addEvent()比較麻煩，所以jQuery為我們提供了一個(gè)更為便捷的事件監(jiān)聽(tīng)方法：addEventListener。

一、使用方式

在jQuery中，addEventListener搭配on來(lái)使用，使用方法如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery addEventListener</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="testBtn">測(cè)試</button>
    <script>
        $("#testBtn").on("click", function(){
            alert("點(diǎn)擊了按鈕！");
        });
    </script>
</body>
</html>

上述代碼演示了如何監(jiān)聽(tīng)按鈕的點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕時(shí)就會(huì)彈出提示框，可以看出jQuery的addEventListener的使用是非常簡(jiǎn)單的。

二、參數(shù)

jQuery的addEventListener比原生的addEventListener多出了一些參數(shù)的設(shè)置，下面一一進(jìn)行介紹：

1. 事件類(lèi)型

第一個(gè)參數(shù)是需要監(jiān)聽(tīng)的事件類(lèi)型，與原生addEventListener方法一致。下面是一些常見(jiàn)的事件類(lèi)型：

click：鼠標(biāo)單擊
dblclick：鼠標(biāo)雙擊
mousedown：鼠標(biāo)按下
mouseup：鼠標(biāo)釋放
mousemove：鼠標(biāo)移動(dòng)
mouseenter：鼠標(biāo)進(jìn)入元素（不冒泡）
mouseleave：鼠標(biāo)離開(kāi)元素（不冒泡）
keydown：鍵盤(pán)按鍵按下
keyup：鍵盤(pán)按鍵釋放
load：頁(yè)面及所有資源都加載完成
resize：窗口發(fā)生大小變化
scroll：頁(yè)面滾動(dòng)條滾動(dòng)時(shí)觸發(fā)

例如下面的代碼監(jiān)聽(tīng)了鼠標(biāo)移動(dòng)事件：

<script>
    $("#box").on("mousemove", function(){
        console.log("鼠標(biāo)移動(dòng)了");
    });
</script>

2. 選擇器

第二個(gè)參數(shù)是可選項(xiàng)，用于指定事件發(fā)生的元素，只有當(dāng)元素上發(fā)生的事件類(lèi)型與指定的事件類(lèi)型匹配時(shí)，事件監(jiān)聽(tīng)器才會(huì)執(zhí)行。選擇器可以使id、class或?qū)傩缘?，也可以是多個(gè)元素的選擇器。例如下面的代碼監(jiān)聽(tīng)了id為box的元素的鼠標(biāo)移動(dòng)事件：

<script>
    $("#box").on("mousemove", function(){
        console.log("鼠標(biāo)移動(dòng)了");
    });
</script>

3. 數(shù)據(jù)

第三個(gè)參數(shù)是可選項(xiàng)，可以傳遞數(shù)據(jù)到事件監(jiān)聽(tīng)器中并在執(zhí)行時(shí)使用。這非常有用，可以讓我們?cè)诓煌氖录O(jiān)聽(tīng)器中傳遞數(shù)據(jù)并做出相應(yīng)的處理。例如下面的代碼使用數(shù)據(jù)為鼠標(biāo)移動(dòng)事件傳遞了一些數(shù)據(jù)：

<script>
    $("#box").on("mousemove", {x: 10, y: 20}, function(event){
        console.log("x坐標(biāo)：" + event.data.x + "，y坐標(biāo)：" + event.data.y);
    });
</script>

4. 事件委托

事件委托是一種利用事件冒泡機(jī)制將事件處理程序綁定到其父元素而不是子元素的技術(shù)。它可以幫助我們輕松地將事件處理程序綁定到多個(gè)元素。jQuery的addEventListener也支持事件委托，只需要將選擇器指定為子元素的選擇器即可。例如下面的代碼通過(guò)事件委托為列表中的li元素添加了鼠標(biāo)移入事件監(jiān)聽(tīng)器：

<ul id="test">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
</ul>
<script>
    $("#test").on("mouseenter", "li", function(){
        console.log("鼠標(biāo)移入了" + $(this).text());
    });
</script>

三、事件監(jiān)聽(tīng)器的動(dòng)態(tài)綁定和解綁定

在jQuery中，事件監(jiān)聽(tīng)器可以隨時(shí)添加和刪除，使用on和off方法即可實(shí)現(xiàn)。on方法用于添加事件監(jiān)聽(tīng)器，off方法用于解綁定事件監(jiān)聽(tīng)器。例如下面的代碼添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器，并在5秒鐘后解除綁定：

<button id="testBtn">測(cè)試</button>
<script>
    $("#testBtn").on("click", function(){
        console.log("點(diǎn)擊了按鈕！");
    });
    setTimeout(function(){
        $("#testBtn").off("click");
        console.log("解除了按鈕的點(diǎn)擊事件監(jiān)聽(tīng)器");
    }, 5000);
</script>

四、結(jié)語(yǔ)

本文對(duì)jQuery的addEventListener事件監(jiān)聽(tīng)器進(jìn)行了詳細(xì)的介紹，包括使用方式、參數(shù)設(shè)置等方面?？梢钥闯?，jQuery的addEventListener非常方便實(shí)用且功能強(qiáng)大，可以幫助我們實(shí)現(xiàn)很多復(fù)雜的功能。

到此這篇關(guān)于addEventListener—jQuery的事件監(jiān)聽(tīng)方法的文章就介紹到這了,更多相關(guān)jQuery的事件監(jiān)聽(tīng)addEventListener內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: