JavaScript 事件监听

汓㸓

已于 2024-02-19 18:20:51 修改

阅读量538

点赞数 11

文章标签： javascript 前端开发语言

于 2024-02-18 15:19:19 首次发布

本文链接：https://blog.csdn.net/qq_52265298/article/details/136152465

版权

1、什么是事件监听？

addEventListener 是用来向指定元素添加事件监听器的方法。你可以使用它来指定事件触发时执行的函数。

以下是 addEventListener 的基本语法:

element.addEventListener(event, function, useCapture);

element: 要添加事件监听器的元素。
event: 要监听的事件类型，例如 "click"（鼠标点击）、"mouseover"（鼠标经过）等。
function: 当事件被触发时要调用的函数，也称为事件处理程序或回调函数。
useCapture（可选）: 一个布尔值，指定事件是在捕获阶段还是冒泡阶段处理。一般设置为 false。

例如，下面的代码将为按钮元素添加一个点击事件监听器：

var btn = document.querySelector('button');

btn.addEventListener('click', function() {
    console.log('按钮被点击了！');
});

这样，当按钮被点击时，控制台会输出 '按钮被点击了！'。你可以根据需要修改事件类型和事件处理函数。

2、事件类型

事件类型是指在浏览器中发生的不同类型的交互事件。以下是常见的几种事件类型：

1)鼠标事件

click: 当鼠标单击元素时触发。
dblclick: 当鼠标双击元素时触发。
mouseover: 当鼠标移动到元素上方时触发。
mouseout: 当鼠标移出元素时触发。
mousemove: 当鼠标在元素内移动时触发。

2）键盘事件

keydown: 当用户按下键盘上的任意键时触发。
keyup: 当用户释放键盘上的任意键时触发。
keypress: 当用户按下字符键时触发。

3）表单事件

submit: 当表单提交时触发。
reset: 当表单重置时触发。
focus: 当元素获得焦点时触发。
blur: 当元素失去焦点时触发。
change: 当元素的值发生改变时触发。

4）页面生命周期事件

load: 当页面完全加载时触发。
unload: 当页面被卸载时触发。
beforeunload: 当页面即将被卸载时触发。
resize: 当窗口大小调整时触发。
scroll: 当滚动条滚动时触发。

5）焦点事件

focus 事件：
- 当元素获得焦点时触发。
- 例如，当用户点击输入框或通过键盘导航到输入框时，focus 事件会被触发。
- 可以用于在元素获得焦点时执行一些操作，比如改变元素的样式或显示相关信息。
blur 事件：
- 当元素失去焦点时触发。
- 例如，当用户从输入框切换到其他元素时，blur 事件会被触发。
- 可以用于在元素失去焦点时执行一些操作，比如验证输入内容或隐藏辅助信息。

补充：

（2024/2/19）

mouseenter 是一个 JavaScript 事件，它在鼠标指针进入指定元素的可见部分时触发。当鼠标从元素的子元素移动到该元素本身时，也会触发 mouseenter 事件。

与 mouseenter 相关的事件还有 mouseleave，它在鼠标指针离开指定元素的可见部分时触发。与 mouseenter 不同的是，mouseleave 事件不会在鼠标从元素的子元素移动到该元素本身时触发。

这两个事件通常用于实现鼠标悬停（hover）效果，例如在网页中显示提示信息、改变元素样式或触发其他交互行为。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    var box = document.querySelector('.box');

    box.addEventListener('mouseenter', function() {
      box.style.backgroundColor = 'blue';
    });

    box.addEventListener('mouseleave', function() {
      box.style.backgroundColor = 'red';
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个红色的正方形框，当鼠标指针进入框内时，框的背景颜色变为蓝色，当鼠标离开框时，背景颜色恢复为红色。

mouseenter 事件和 mouseover 事件都与鼠标指针在元素上的移动相关，但它们之间有一些重要的区别：

触发条件：
- mouseenter 事件只在鼠标指针进入指定元素的可见部分时触发，不会在鼠标从元素的子元素移动到该元素本身时触发。
- mouseover 事件在鼠标指针进入指定元素或其子元素时都会触发，如果鼠标在元素内移动，也会持续触发 mouseover 事件。
冒泡行为：
- mouseenter 事件不具有冒泡（bubbling）行为，即当鼠标指针从子元素移动到父元素时，不会触发 mouseenter 事件。
- mouseover 事件具有冒泡行为，当鼠标指针在元素及其子元素之间移动时，会依次触发每个元素的 mouseover 事件。

因此，如果需要在鼠标指针进入指定元素时触发事件，并且不希望受到子元素影响，可以使用 mouseenter 事件；如果需要在鼠标指针在元素及其子元素之间移动时触发事件，并且希望事件具有冒泡行为，可以使用 mouseover 事件。

<!DOCTYPE html>
<html>
<head>
  <style>
    #outer {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    #inner {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="outer">
    <div id="inner"></div>
  </div>

  <script>
    var outer = document.querySelector('#outer');
    var inner = document.querySelector('#inner');

    outer.addEventListener('mouseenter', function() {
      console.log('mouseenter: entered outer');
    });

    outer.addEventListener('mouseover', function() {
      console.log('mouseover: entered outer');
    });

    inner.addEventListener('mouseenter', function() {
      console.log('mouseenter: entered inner');
    });

    inner.addEventListener('mouseover', function() {
      console.log('mouseover: entered inner');
    });
  </script>
</body>
</html>

当鼠标指针从页面外部进入内层矩形框时，控制台输出：

mouseenter: entered outer
mouseenter: entered inner
mouseover: entered outer
mouseover: entered inner

当鼠标指针从内层矩形框移动到外层矩形框时，控制台输出：


mouseover: entered outer

可以看到，当鼠标指针进入内层矩形框时，会依次触发 mouseenter 事件和 mouseover 事件；当鼠标指针从内层矩形框移动到外层矩形框时，只会触发 mouseover 事件，并不会触发 mouseenter 事件。

3、注意事项

在使用 querySelector 方法时，引号内的内容表示要查询的元素的选择器，可以是标签名（如 "button"）、类名（如 ".my-class"）或 ID（如 "#my-id"）。

如果你想根据元素的标签名来查询元素，则直接写标签名即可，不需要加点或井号。例如：document.querySelector('button') 表示查询第一个 <button> 元素。

如果你想根据元素的类名或 ID 来查询元素，则需要在引号内以点号或#开头，然后紧跟类名或 ID 的名称。例如：document.querySelector('.my-class') 表示查询第一个具有 "my-class" 类的元素，document.querySelector('#my-id') 表示查询具有 "my-id" ID 的元素。

总之，加点或加#取决于你要查询的元素的类型。如果是标签名，则不需要加点或井号；如果是类名或 ID，则需要加点或井号。

汓㸓

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 事件监听

addEventListener 是用来向指定元素添加事件监听器的方法。你可以使用它来指定事件触发时执行的函数。useCapture（可选）: 一个布尔值，指定事件是在捕获阶段还是冒泡阶段处理。一般设置为 false。这样，当按钮被点击时，控制台会输出 '按钮被点击了！你可以根据需要修改事件类型和事件处理函数。
复制链接

扫一扫