首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery的事件监听addEventListener

addEventListener—jQuery的事件监听方法

2023-06-17 14:23:41 投稿：yin

在Javascript中，事件监听是非常重要的，通过事件监听，我们可以在用户执行某些操作时触发相应的处理程序。最初，Javascript监听事件的方式是addEvent。addEvent()比较麻烦，所以jQuery为我们提供了一个更为便捷的事件监听方法：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>

上述代码演示了如何监听按钮的点击事件，当点击按钮时就会弹出提示框，可以看出jQuery的addEventListener的使用是非常简单的。

二、参数

jQuery的addEventListener比原生的addEventListener多出了一些参数的设置，下面一一进行介绍：

1. 事件类型

第一个参数是需要监听的事件类型，与原生addEventListener方法一致。下面是一些常见的事件类型：

click：鼠标单击
dblclick：鼠标双击
mousedown：鼠标按下
mouseup：鼠标释放
mousemove：鼠标移动
mouseenter：鼠标进入元素（不冒泡）
mouseleave：鼠标离开元素（不冒泡）
keydown：键盘按键按下
keyup：键盘按键释放
load：页面及所有资源都加载完成
resize：窗口发生大小变化
scroll：页面滚动条滚动时触发

例如下面的代码监听了鼠标移动事件：

<script>
    $("#box").on("mousemove", function(){
        console.log("鼠标移动了");
    });
</script>

2. 选择器

第二个参数是可选项，用于指定事件发生的元素，只有当元素上发生的事件类型与指定的事件类型匹配时，事件监听器才会执行。选择器可以使id、class或属性等，也可以是多个元素的选择器。例如下面的代码监听了id为box的元素的鼠标移动事件：

<script>
    $("#box").on("mousemove", function(){
        console.log("鼠标移动了");
    });
</script>

3. 数据

第三个参数是可选项，可以传递数据到事件监听器中并在执行时使用。这非常有用，可以让我们在不同的事件监听器中传递数据并做出相应的处理。例如下面的代码使用数据为鼠标移动事件传递了一些数据：

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

4. 事件委托

事件委托是一种利用事件冒泡机制将事件处理程序绑定到其父元素而不是子元素的技术。它可以帮助我们轻松地将事件处理程序绑定到多个元素。jQuery的addEventListener也支持事件委托，只需要将选择器指定为子元素的选择器即可。例如下面的代码通过事件委托为列表中的li元素添加了鼠标移入事件监听器：

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

三、事件监听器的动态绑定和解绑定

在jQuery中，事件监听器可以随时添加和删除，使用on和off方法即可实现。on方法用于添加事件监听器，off方法用于解绑定事件监听器。例如下面的代码添加了一个点击事件监听器，并在5秒钟后解除绑定：

<button id="testBtn">测试</button>
<script>
    $("#testBtn").on("click", function(){
        console.log("点击了按钮！");
    });
    setTimeout(function(){
        $("#testBtn").off("click");
        console.log("解除了按钮的点击事件监听器");
    }, 5000);
</script>

四、结语

本文对jQuery的addEventListener事件监听器进行了详细的介绍，包括使用方式、参数设置等方面。可以看出，jQuery的addEventListener非常方便实用且功能强大，可以帮助我们实现很多复杂的功能。

到此这篇关于addEventListener—jQuery的事件监听方法的文章就介绍到这了,更多相关jQuery的事件监听addEventListener内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！