JavaScript学习指南

主题

事件监听器 ​

DOM（文档对象模型）- 第3天 ​

事件监听器 ​

常见的HTML事件：onclick、onchange、onmouseover、onmouseout、onkeydown、onkeyup、onload。 我们可以为任何DOM对象添加事件监听器方法。我们使用 addEventListener() 方法来监听HTML元素上的不同事件类型。addEventListener() 方法接受两个参数：事件监听器和回调函数。

js
selectedElement.addEventListener('eventlistner', function(e) {
  // 事件发生后你想要执行的活动将在这里
})
// 或者

selectedElement.addEventListener('eventlistner', e => {
  // 事件发生后你想要执行的活动将在这里
})

点击事件 ​

要为元素附加事件监听器，首先我们选择元素，然后附加addEventListener方法。事件监听器接受事件类型和回调函数作为参数。

以下是点击类型事件的示例。

示例：click

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model</title>
  </head>

  <body>
    <button>点击我</button>

    <script>
      const button = document.querySelector('button')
      button.addEventListener('click', e => {
        console.log('e 提供事件监听器对象:', e)
        console.log('e.target 提供选中的元素: ', e.target)
        console.log(
          'e.target.textContent 提供选中元素的内容: ',
          e.target.textContent
        )
      })
    </script>
  </body>
</html>

事件也可以直接作为内联脚本附加到HTML元素上。

示例：onclick

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model</title>
  </head>

  <body>
    <button onclick="clickMe()">点击我</button>
    <script>
      const clickMe = () => {
        alert('我们可以在HTML元素上附加事件')
      }
    </script>
  </body>
</html>

双击事件 ​

要为元素附加事件监听器，首先我们选择元素，然后附加addEventListener方法。事件监听器接受事件类型和回调函数作为参数。

以下是双击类型事件的示例。

示例：dblclick

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model</title>
  </head>

  <body>
    <button>点击我</button>
    <script>
      const button = document.querySelector('button')
      button.addEventListener('dblclick', e => {
        console.log('e 提供事件监听器对象:', e)
        console.log('e.target 提供选中的元素: ', e.target)
        console.log(
          'e.target.textContent 提供选中元素的内容: ',
          e.target.textContent
        )
      })
    </script>
  </body>
</html>

鼠标进入事件 ​

要为元素附加事件监听器，首先我们选择元素，然后附加addEventListener方法。事件监听器接受事件类型和回调函数作为参数。

以下是鼠标进入类型事件的示例。

示例：mouseenter

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model</title>
  </head>

  <body>
    <button>点击我</button>
    <script>
      const button = document.querySelector('button')
      button.addEventListener('mouseenter', e => {
        console.log('e 提供事件监听器对象:', e)
        console.log('e.target 提供选中的元素: ', e.target)
        console.log(
          'e.target.textContent 提供选中元素的内容: ',
          e.target.textContent
        )
      })
    </script>
  </body>
</html>

现在你已经熟悉了addEventListener方法以及如何附加事件监听器。有许多类型的事件监听器。但在这个挑战中，我们将专注于最常见的重要事件。

事件列表：

  • click - 当元素被点击时
  • dblclick - 当元素被双击时
  • mouseenter - 当鼠标指针进入元素时
  • mouseleave - 当鼠标指针离开元素时
  • mousemove - 当鼠标指针在元素上移动时
  • mouseover - 当鼠标指针移动到元素上时
  • mouseout - 当鼠标指针从元素移出时
  • input - 当值输入到输入字段时
  • change - 当输入字段的值改变时
  • blur - 当元素失去焦点时
  • keydown - 当按键按下时
  • keyup - 当按键释放时
  • keypress - 当我们按下任何键时
  • onload - 当浏览器完成页面加载时

通过在上述代码片段中替换事件类型来测试上述事件类型。

从输入元素获取值 ​

我们通常填写表单，表单接受数据。表单字段使用input HTML元素创建。让我们构建一个小应用程序，允许我们使用两个输入字段、一个按钮和一个p标签来计算一个人的身体质量指数。

输入值 ​

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model:30 Days Of JavaScript</title>
  </head>

  <body>
    <h1>身体质量指数计算器</h1>

    <input type="text" id="mass" placeholder="体重（公斤）" />
    <input type="text" id="height" placeholder="身高（米）" />
    <button>计算BMI</button>

    <script>
      const mass = document.querySelector('#mass')
      const height = document.querySelector('#height')
      const button = document.querySelector('button')

      let bmi
      button.addEventListener('click', () => {
        bmi = mass.value / height.value ** 2
        alert(`你的BMI是 ${bmi.toFixed(2)}`)
        console.log(bmi)
      })
    </script>
  </body>
</html>

input事件和change事件 ​

在上面的示例中，我们通过点击按钮成功地从两个输入字段获取了输入值。如果我们想要在不点击按钮的情况下获取值怎么办？我们可以使用 change 或 input 事件类型在字段获得焦点时立即从输入字段获取数据。让我们看看如何处理这个问题。

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model:30 Days Of JavaScript</title>
  </head>

  <body>
    <h1>使用input或change事件进行数据绑定</h1>

    <input type="text" placeholder="说点什么" />
    <p></p>

    <script>
      const input = document.querySelector('input')
      const p = document.querySelector('p')

      input.addEventListener('input', e => {
        p.textContent = e.target.value
      })
    </script>
  </body>
</html>

blur事件 ​

与 input 或 change 相反，blur 事件在输入字段失去焦点时发生。

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model:30 Days Of JavaScript</title>
  </head>

  <body>
    <h1>使用blur事件提供反馈</h1>

    <input type="text" id="mass" placeholder="说点什么" />
    <p></p>

    <script>
      const input = document.querySelector('input')
      const p = document.querySelector('p')

      input.addEventListener('blur', (e) => {
        p.textContent = '此字段是必需的'
        p.style.color = 'red'
      })
    </script>
  </body>
</html>

keypress、keydown和keyup ​

我们可以使用不同的事件监听器类型访问键盘的所有按键编号。让我们使用keypress并获取每个键盘按键的keyCode。

html
<!DOCTYPE html>
<html>
  <head>
    <title>Document Object Model:30 Days Of JavaScript</title>
  </head>

  <body>
    <h1>按键事件：按任意键</h1>

    <script>
      document.body.addEventListener('keypress', e => {
        alert(e.keyCode)
      })
    </script>
  </body>
</html>

🌕 你是如此特别，你每天都在进步。现在，你知道如何处理任何类型的DOM事件。距离你成为伟大的开发者只剩下七天了。现在做一些练习来锻炼你的大脑和肌肉。

练习 ​

练习：第1级 ​

  1. 生成数字并用三种不同的颜色标记偶数、奇数和质数。参见下面的图片。

  2. 使用事件监听器生成键盘代码。下面的图片。

🎉 恭喜！🎉

Copyright © 2025 e2ways.com