JavaScript处理按键事件-模态窗口

news2024/11/18 23:40:01

上一节中我们基本实现了模态窗口的功能,本文将介绍我们可以通过用户的按键然后去执行一些事情

	document.addEventListener('keydown',function() {
  console.log("我按下了一个按键");
})

这段代码会添加一个事件监听器,当有键盘按键被按下时,会触发函数内的代码块。在这里,代码块内使用console.log()函数将消息"我按下了一个按键"打印到控制台。
请注意,上述代码并没有判断所按下的按键类型,而是会对所有按键都触发同样的操作。如果您想要特定处理某个按键,可以使用event.key属性来检测所按下的按键,然后根据按键类型进行相应的操作。

  1. keyup:当用户释放键盘上的按键时触发。这个事件与 “keydown” 相对应,可以用于捕获键盘按键的释放动作。
  2. keypress:在用户按下键盘上的字符键时触发。与 “keydown” 或 “keyup” 不同,该事件只会针对能够产生可见字符的键(例如字母、数字等)。
  3. keydown:当用户按下键盘上的某个按键时,浏览器会触发 “keydown” 事件。这个事件可以用于检测用户何时按下了特定的按键,并执行相应的操作。
    在这里插入图片描述

● 当我们来网页中随意按下一个按键,就会返回这句话到控制台上’

● 这个点击事件被传入函数中其实是一个对象,我们可以给函数传一个值,然后就可以看到我们按的到底是哪个按键了

document.addEventListener('keydown', function (e) {
  console.log(e);
});

在这里插入图片描述

当我们在键盘上面按键的时候,就会出现我们传入函数的值;key后面就是我么按下的按键!

● 刚刚说了,他是一个对象,所以我们点号运算符去筛选出来我们的按键

document.addEventListener('keydown', function (e) {
  console.log(e.key);
});

在这里插入图片描述

● 当你按下按键的时候就会进行这样的一些操作

● 所以按照这样的一个原理,我们就可以用if判断去当用户按下ESC按键的时候去关闭模态窗口,如下

document.addEventListener('keydown', function (e) {
  // console.log(e.key);
  if (e.key === 'Escape') {
    closeModal();
  }
});

在这里插入图片描述

● 当我们按下Esc按键的时候
在这里插入图片描述

模态窗口关闭!
● 之前介绍了class类的添加和删除,这里再介绍一下判断class包不包含某个class

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') {
    if (!modal.classList.contains('hidden')) {
      closeModal();
    }
  }
});

使用contains去判断是否包含,实现的效果和上面的一样;
两个if嵌套,我们可以用and符号简化代码

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
});

注:为什么这里的 closeModal()需要加上括号,上面就不用呢?
加上括号是函数调用,会执行函数,直接运行函数内部的功能,不加括号的的话是不会执行函数,只是引用函数,只有再绑定了点击事件之后才会引用函数
详细一点:
当我们为事件监听器指定一个函数时,我们只需提供函数的引用,而不需要立即调用该函数。这是因为添加事件监听器时,我们希望在事件触发时执行该函数,而不是在添加监听器时就立即执行。
closeModal 后面没有使用括号。这是因为我们是将 closeModal 函数的引用传递给 addEventListener 方法,以便在遮罩层被点击时执行 closeModal 函数。
如果写成 overlay.addEventListener(‘click’, closeModal());,就会立即调用 closeModal 函数,并将其返回值作为事件监听器。这通常不是我们期望的行为。我们希望在点击事件发生时才执行 closeModal 函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1109778.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

权威认证!海云安获得数据安全服务能力评定资格证书

为切实提升数据安全保障能力,加速推进国家数据安全建设,中国计算机行业协会数据安全专业委员会依托能力评价工作组从数据安全评估和数据安全建设两个方面开展了数据安全服务能力评定。 经过自主申报、专家评审等程序,深圳海云安网络安全技术…

TCP/IP(二十二)TCP 实战抓包分析(六)TCP 快速建立连接

一 TCP Fast Open 快速建立连接 说明: 之前讲解TCP 相关知识点遗漏了这个知识点,补充上 ① TFO简介 ② 请求 Fast Open Cookie过程 "原理图" ③ 真正开始 TCP Fast Open 重点: TFO 使 SYN包 可以包含payload 数据 ④ 抓包分析 1、…

使用单个mybatis框架进行mysql数据库的连接和操作?

使用单个mybatis框架进行mysql数据库的操作? 简述 先来说一下数据库连接的演变,刚开始的时候,最原生的连接并操作mysql数据库的办法是使用JDBC技术,这种技术相对来说写的源码比较多,比较繁杂; 后来就出现…

第十六届中国智慧城市大会 | 国产化三维重建技术服务智慧城市建设

2023年10月13日,由武汉大势智慧科技有限公司、飞燕航空遥感技术有限公司主办的第十六届智慧城市大会-实景三维技术创新与应用论坛在广州成功举办。 来自实景三维、自然资源、数字孪生、AI大数据、航空遥感等多个领域的专家,深度分享各自的智慧城市建设经…

【2023双十一新玩法】如何快速让数据达到预期目的,让销售额提升10倍,客群提升10倍,销量提升10倍

2023年的双十一即将到来,商家们依然在为销售目标而努力,而数据分析就成为了其中不可或缺的一环。大大小小的企业都纷纷采用了数据分析来提高销售效率,而老板们也都习惯了看着大屏幕上的实时数据。 然而,对于员工而言,做…

在线商城系统软件、源码、报价_OctShop

随着互联网、5G、人工智能的快速发展,人们在家购物已经是生活的重要方式。各种在线商城系统的不断涌现,同时,也给传统的企业商家销售带来了不小的压力,那么,如何调整,以适应时代的发展呢?经过不…

把Resources目录标记为Resource Root目录才能找到文件?

把Resources目录标记为Resource Root目录才能找到文件? mybatis配置文件中配置的mapper.xml映射文件找不到?这是为什么呢?因为你当resources目录不是根目录,重新标记成根目录就可以了,如下图:

Java项目-网页聊天程序

目录 项目介绍 项目功能简介 项目创建 用户管理模块 1.数据库设计及代码实现 2.前后端交互接口的设计 3.服务器代码开发 好友管理模块 数据库设计 好友表设计的两个重要问题 设计前后端交互接口 服务器代码 会话管理模块 会话的数据库设计 获取会话信息 约定前后…

VisualStudio 远程Debug

注意:纯靠记性,可能实际有出入。 1.连接本地电脑和远程电脑,我是通过ToDesk软件进行桌面连接的。 2.本地运行的项目,把项目打包后拷贝到远程电脑。 3.打开本地VisualStudio的安装位置,有个文件夹叫Remote Debugger。把…

深入研究Java线程Dump分析:掌握发现和解决多线程问题的关键技巧

1 Thread Dump介绍 1.1 什么是Thread Dump Thread Dump是非常有用的诊断Java应用问题的工具。每一个Java虚拟机都有及时生成所有线程在某一点状态的thread-dump的能力,虽然各个 Java虚拟机打印的thread dump略有不同,但是大多都提供了当前活动线程的快…

“乘风而上,谋远共赢”润和软件HopeStage2023秋季渠道商会议圆满举行 润和软件 润和软件

10月18日,由江苏润和软件股份有限公司(以下简称“润和软件”)主办的HopeStage2023秋季渠道商会议圆满举行。本次会议以“乘风而上,谋远共赢”为主题,汇聚众多HopeStage渠道商与生态合作伙伴,共谋国产基础软…

怎么把本机设置成代理ip?

代理IP服务能帮助您隐藏您的真实IP,从而保护您的隐私和安全。本文将指导您如何将本机设置为代理IP。代理IP服务能帮助您隐藏您的真实IP,从而保护您的隐私和安全。本文将指导您如何将本机设置为代理IP。设置代理IP可以用于多种用途,比如&#…

进程相关内容(三)

目录 进程优先级 进程饥饿 Linux当中优先级标识符 优先级的修改参数NI 进程最终优先级 修改进程的优先级 操作系统实现优先级的方法 位图 并发的概念 进程切换原理 环境变量 其他环境变量 获得环境变量的方式 getenv系统调用函数 命令行参数 本地变量 export添加环境变量 unset…

修改echarts的tooltip样式 折线图如何配置阴影并实现渐变色和自适应

图片展示 一、引入echarts 这里不用多解释 vue里使用 import echarts from “echarts”; html页面引用js文件或用script标签引用 二、定义一个具有宽高的dom div <div id"echart-broken" style"width:400px;height: 200px;"></div>三、定义…

头歌平台——基于数组的工资处理系统

第1关&#xff1a;数据输入和计算 任务描述 本关任务&#xff1a; 编写函数input_data(char uid[10][5], int salary[10], int csalary[10], int revenue[10], int _water_electricity[10], int _deductions[10])&#xff0c;作用为输入职工的代号&#xff0c;岗位工资&#…

LabVIEW应用开发——控件的使用(二)

上篇介绍数值型控件和布尔型控件&#xff0c;这篇介绍字符串、路径控件、下拉框和数组控件。 LabVIEW应用开发——控件的使用&#xff08;一&#xff09; 1、字符串控件 实际应用中&#xff0c;字符串控件的显示很常用的&#xff0c;可用于显示串口信息、通讯交互信息、…

JAVA-记一次BigDecimal,String千分位转换

在显示类上面添加JsonSerialize注解&#xff0c;指定对应的转换格式例如&#xff0c;同理可在属性为BigDecimal的字段上添加注解&#xff0c;指定方法&#xff1a; private String userTypeStr;/*** 交易金额*/JsonSerialize(using StringSerialize.class)private String tran…

零基础制作电子期刊,不用担心不会设计排版

亲爱的朋友们&#xff0c;你是否想制作一本自己的电子期刊&#xff0c;但又担心不会设计排版&#xff1f;别担心&#xff01;今天我将教你如何零基础制作电子期刊&#xff0c;让你轻松上手&#xff01; 首先&#xff0c;你需要选择一个适合你的电子期刊模板。我们可以使用FLBOO…

智慧停车场项目-SpringBoot的Smart-parking

基于SpringBoot的Smart-parking 智慧停车场项目 介绍 基于 SpringBoot Vue 的智能停车场项目 系统首页 作者 如需本项目源代码&#xff0c;可扫码或者VX:zxd1534124905联系作者。 基础环境 JDK1.8、Maven、Mysql、IntelliJ IDEA、payCloud 相关组件 ok-adminvueiViewec…

文件批量管理:轻松复制备份并删除原文件

在日常生活和工作中&#xff0c;我们经常需要处理大量的文件。为了确保文件的安全性和完整性&#xff0c;您需要一种高效的文件批量管理方法。本文将向您介绍如何一一复制备份并删除原文件里的文件&#xff0c;让您的文件管理变得轻松便捷。 首先&#xff0c;我们要进入文件批…