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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript中的Screen屏幕对象

    当我们在Web中使用JavaScript时,有一些内置对象可以帮助我们进行与页面相关的操作,其中就包括了Screen屏幕对象。本文将详细介绍JavaScript中的Screen对象,包括其常见属性和方法,并给出两个示例说明。 Screen对象概述 所谓Screen对象,指的是代表用户屏幕的对象,该对象包含了屏幕的基本信息,例如屏幕的宽度、高度、像素密度等,同…

    JavaScript 2023年6月11日
    00
  • JavaScript数组深拷贝和浅拷贝的两种方法

    JavaScript数组的深拷贝和浅拷贝是前端开发中非常常见的操作,本文将介绍两种常用的深拷贝和浅拷贝的方法。 JavaScript数组浅拷贝 JavaScript数组浅拷贝指的是在拷贝过程中只拷贝了原数组的引用,而不是拷贝了原数组中的所有元素。 1. 使用slice()函数进行浅拷贝 const arr1 = [1, 2, 3, 4] const arr2…

    JavaScript 2023年5月27日
    00
  • 通过JavaScript下载文件到本地的方法(单文件)

    以下是通过JavaScript下载文件到本地的方法的完整攻略: 标准的下载方法 通过标准的HTML a标签和download属性可以实现文件的下载。该属性用于指定资源的下载地址,将会生成一个下载的链接。 <a href="文件地址" download="文件名">下载文件</a> 其中,href…

    JavaScript 2023年5月27日
    00
  • javascript保留两位小数的实现方法你了解吗

    当需要在JavaScript中将一个数字保留两位小数时,通常有几种不同的方法可以实现。 方法一:使用toFixed()函数 .toFixed()函数是JavaScript中的内置函数,可以将数字转换为带有指定小数位数的字符串格式。 const num = 3.141592654; const roundedNum = num.toFixed(2); cons…

    JavaScript 2023年5月28日
    00
  • 网页中JS函数自动执行常用三种方法

    网页中JS函数自动执行是常见的需求之一,本文将详细讲解JS函数自动执行的常用三种方法。 方法一:window.onload window.onload是一个最为常见的JS函数自动执行方法,它会在页面内容完全加载后触发,只有当页面所有资源(包括图片、CSS、JS等)都加载完成后,才会触发该事件。因此,可以通过window.onload执行JS函数的方式来保证页…

    JavaScript 2023年5月27日
    00
  • js正则相关知识点专题

    JS正则相关知识点专题 一、正则表达式的概念 正则表达式是对字符串操作的一种逻辑公式,是进行字符串匹配、查找、替换等操作的一种工具。JS中使用RegExp对象来表示正则表达式,可以通过构造函数或直接量来创建一个RegExp对象。 常用的正则表达式元字符有: ^: 匹配字符串开头 $: 匹配字符串结尾 .: 匹配单个字符 *: 匹配前面的字符0或多次 +: 匹…

    JavaScript 2023年6月10日
    00
  • JavaScript进阶知识点作用域详解

    JavaScript进阶知识点作用域详解 在学习JavaScript的过程中,作用域是一个非常重要的概念,也是进阶知识学习的必备内容。本篇文章将对JavaScript中的作用域进行详解,帮助读者更好地理解和应用这个概念。 什么是作用域 在JavaScript中,作用域是指变量和函数的可访问范围。JavaScript中有两种作用域:全局作用域和局部作用域。全局…

    JavaScript 2023年6月10日
    00
  • Javascript 小技巧全集第2/4页

    下面是关于Javascript 小技巧全集第2/4页的完整攻略: 简介 这篇文章主要介绍了一些Javascript的小技巧,包括如何在字符串和数字之间转换、如何快速判断变量是否为空、如何使用递归等。这些小技巧可以在开发过程中提高效率和减少错误。 字符串和数字之间的转换 在Javascript中,我们经常需要在字符串和数字之间进行转换。下面是一些常用的方法: …

    JavaScript 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部