快捷導(dǎo)航

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

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

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

一、使用方式

在jQuery中，addEventListener搭配on來使用，使用方法如下所示：

<!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">測試</button>
    <script>
        $("#testBtn").on("click", function(){
            alert("點擊了按鈕！");
        });
    </script>
</body>
</html>

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

二、參數(shù)

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

1. 事件類型

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

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

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

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

2. 選擇器

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

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

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

第三個參數(shù)是可選項，可以傳遞數(shù)據(jù)到事件監(jiān)聽器中并在執(zhí)行時使用。這非常有用，可以讓我們在不同的事件監(jiān)聽器中傳遞數(shù)據(jù)并做出相應(yīng)的處理。例如下面的代碼使用數(shù)據(jù)為鼠標(biāo)移動事件傳遞了一些數(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. 事件委托

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

<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ài)綁定和解綁定

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

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

四、結(jié)語

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

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

您可能感興趣的文章: