JavaScript高级程序设计事件学习笔记

《JavaScript高级程序设计》事件学习笔记

什么是事件？

事件是指在网页中发生的交互的行为，比如页面的加载、点击按钮、鼠标滚动等，这些行为就是事件。

事件监听器

事件监听器是用来监听特定事件并处理事件的函数。可以通过给元素添加事件监听器来创建响应用户操作的交互式网页。

在 JavaScript 中，我们可以使用 addEventListener() 方法来添加事件监听器。该方法包含三个参数：事件名、处理函数和一个布尔值，表示句柄在捕获阶段还是冒泡阶段触发。例如：

// 获取按钮元素
const btn = document.getElementById('myButton');

// 添加一个点击事件监听器
btn.addEventListener('click', function() {
    alert('Button clicked!');
});

在上面的示例中，我们首先获取 id 为 myButton 的元素，然后添加一个点击事件监听器。

事件冒泡和事件捕获

事件冒泡指的是事件从内向外传递的过程，即从被点击的元素开始，由内向外逐层传递到 document 对象。事件冒泡是默认的事件传播方式。

事件捕获是指事件从外向内传递的过程，即从 document 对象开始，由外向内逐层传递到被点击的元素。事件捕获需要用到 addEventListener() 方法的第三个参数，这个参数为 true 时表示在捕获阶段触发。例如：

// 获取按钮元素
const btn = document.getElementById('myButton');

// 添加一个点击事件监听器，使用事件捕获
btn.addEventListener('click', function() {
  alert('Button clicked!');
}, true);

在上面的示例中，我们给按钮元素添加了一个点击事件监听器，并指明了使用事件捕获。

事件对象

事件对象是在触发事件时自动创建的对象，它包含与事件相关的信息。在事件处理函数中，可以通过参数访问事件对象。例如：

// 获取按钮元素
const btn = document.getElementById('myButton');

// 添加一个点击事件监听器
btn.addEventListener('click', function(event) {
  console.log(event.target); // 输出触发事件的目标元素
});

在上面的示例中，我们在事件处理函数中访问了事件对象，并通过 target 属性输出了触发事件的目标元素。

常见事件

以下是常见的事件列表：

click：鼠标单击事件。
dblclick：鼠标双击事件。
mouseover：鼠标移动到元素上方事件。
mouseout：鼠标移出元素事件。
keydown：键盘按下事件。
keyup：键盘松开事件。
change：表单内容改变事件。
submit：表单提交事件。
load：文档（包括图片、音频等）加载事件。
unload：文档卸载事件。

示例：按钮动态改变样式

<!DOCTYPE html>
<html>
  <head>
    <title>Button Style Change Demo</title>
    <style>
      /* CSS 样式 */
      .button {
        font-size: 16px;
        padding: 12px;
        background-color: blue;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .button:hover {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button id="myButton" class="button">Click Me</button>
    <script>
      // JavaScript 代码
      const btn = document.getElementById('myButton');
      btn.addEventListener('mouseover', function() {
        this.style.backgroundColor = "green";
      });
      btn.addEventListener('mouseout', function() {
        this.style.backgroundColor = "blue";
      });
    </script>
  </body>
</html>

在上面的示例中，我们创建了一个按钮，通过 CSS 定义了其样式。然后通过 JavaScript 给按钮添加了鼠标移入和鼠标移出事件监听器，当鼠标移入时，按钮背景颜色变为绿色，当鼠标移出时，按钮背景颜色恢复为蓝色。

示例：表单验证

<!DOCTYPE html>
<html>
  <head>
    <title>Form Validation Demo</title>
    <!-- 样式表 -->
    <style>
      label, input {
        display: block;
        margin-bottom: 10px;
      }
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <form id="myForm">
      <label for="username">Username:</label>
      <input type="text" id="username">

      <label for="password">Password:</label>
      <input type="password" id="password">

      <label for="repassword">Re-enter Password:</label>
      <input type="password" id="repassword">

      <button type="button" id="submitBtn">Submit</button>
    </form>
    <!-- JavaScript 代码 -->
    <script>
      // 获取表单元素
      const form = document.getElementById('myForm');
      const username = document.getElementById('username');
      const password = document.getElementById('password');
      const repassword = document.getElementById('repassword');
      const submitBtn = document.getElementById('submitBtn');

      // 添加表单提交事件监听器
      form.addEventListener('submit', function(event) {
        // 阻止表单提交
        event.preventDefault();

        // 验证用户名是否为空
        if (username.value === '') {
          username.nextElementSibling.innerText = 'Username cannot be empty';
          return;
        }

        // 验证密码是否为空
        if (password.value === '') {
          password.nextElementSibling.innerText = 'Password cannot be empty';
          return;
        }

        // 验证两次密码是否相同
        if (password.value !== repassword.value) {
          repassword.nextElementSibling.innerText = 'Passwords do not match';
          return;
        }

        // 表单验证通过，提交表单
        form.submit();
      });

      // 添加验证事件监听器
      username.addEventListener('blur', function() {
        if (this.value === '') {
          this.nextElementSibling.innerText = 'Username cannot be empty';
        } else {
          this.nextElementSibling.innerText = '';
        }
      });

      password.addEventListener('blur', function() {
        if (this.value === '') {
          this.nextElementSibling.innerText = 'Password cannot be empty';
        } else {
          this.nextElementSibling.innerText = '';
        }
      });

      repassword.addEventListener('blur', function() {
        if (this.value !== password.value) {
          this.nextElementSibling.innerText = 'Passwords do not match';
        } else {
          this.nextElementSibling.innerText = '';
        }
      });
    </script>
  </body>
</html>

在上面的示例中，我们创建了一个表单，通过 JavaScript 给表单添加了提交事件监听器，以及给每个表单元素添加了失焦事件监听器，用于表单验证。当用户点击提交按钮时，表单会被验证，如果验证通过，则提交表单。如果验证不通过，则给用户相应的错误提示信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript高级程序设计事件学习笔记 - Python技术站

JavaScript高级程序设计 事件学习笔记