JavaScript（Web API第二节）-CSDN博客

本文链接：https://blog.csdn.net/2301_80409048/article/details/136969689

本文详细介绍了如何在HTML中使用事件监听，包括添加事件监听、常见的事件类型（如鼠标事件、键盘事件和焦点事件），以及理解环境对象中的this。通过实例演示了如何为DOM元素添加click事件并处理鼠标移入/移出事件。

摘要由CSDN通过智能技术生成

1.1事件监听

语法：

元素对象.addEventListener（‘事件类型’，要执行的函数）

三要素：

事件源、事件类型、事件调用的函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件监听</title>
</head>
<body>
  <h3>事件监听</h3>
  <p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
  <button id="btn">点击改变文字颜色</button>
  <script>
    // 1. 获取 button 对应的 DOM 对象
    const btn = document.querySelector('#btn')

    // 2. 添加事件监听
    btn.addEventListener('click', function () {
      console.log('等待事件被触发...')
      // 改变 p 标签的文字颜色
      let text = document.getElementById('text')
      text.style.color = 'red'
    })

    // 3. 只要用户点击了按钮，事件便触发了！！！
  </script>
</body>
</html>

完成事件监听分成3个步骤：

获取 DOM 元素
通过 addEventListener 方法为 DOM 节点添加事件监听
等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
事件触发后，相对应的回调函数会被执行

事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等，我们逐一展开学习。

鼠标事件

鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。

<body>
  <h3>鼠标事件</h3>
  <p>监听与鼠标相关的操作</p>
  <hr>
  <div class="box"></div>
  <script>
    // 需要事件监听的 DOM 元素
    const box = document.querySelector('.box');

    // 监听鼠标是移入当前 DOM 元素
    box.addEventListener('mouseenter', function () {
      // 修改文本内容
      this.innerText = '鼠标移入了...';
      // 修改光标的风格
      this.style.cursor = 'move';
    })
// 监听鼠标是移出当前 DOM 元素
    box.addEventListener('mouseleave', function () {
      // 修改文本内容
      this.innerText = '鼠标移出了...';
    })
  </script>
</body>