JS中 focus 和 blur 焦点事件

发现的一个小知识点

focus 获取焦点事件

代码如下: 

<body>
    <input type="text" placeholder="input输入框">
    <script>
        let input = document.querySelector('input')
        input.addEventListener('focus', function (e) {
            e.target.style.background = 'skyblue'
        })
    </script>
</body>

 blur 失去焦点事件

 代码如下: 

<body>
    <input type="text" placeholder="input输入框">
    <script>
        let input = document.querySelector('input')
        input.addEventListener('blur', function (e) {
            e.target.style.background = 'pink'
        })
    </script>
</body>

注意:

如果获取的是form元素对象,监听里面的input,则需要使用addEventListener第三个参数

addEventListener 第3个参数为 true 表示捕获阶段触发false 表示冒泡阶段触发,默认值为 false

<body>
    <form action="">
        <input type="text" placeholder="input输入框">
    </form>
    <script>
        let form = document.querySelector('form')
        form.addEventListener('blur', function (e) {
            e.target.style.background = 'pink'
        }, true)
    </script>
</body>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java学校教务管理系统源码带微信小程序

运行环境&#xff1a;jdk8mysql5.7IntelliJ IDEAmaven 技术&#xff1a;springbootmybatislayuishirojquery 教务管理系统是一个基于网络的在线管理平台, 帮助学校管理教务系统&#xff0c;用一个帐号解决学校教务教学管理&#xff0c; 灵活的定制符合学校自己实际情况的教务系…

如何理解面向对象的OO设计原则和设计模式?

一、如何理解面向对象的编程原则? 单一职责原则(Single Responsibility Principle) 一个类,应该由一组相关性很高的数据和方法组成。一个类应该仅有一个引起它变化的原因。单一职责最难界定的就是关于“职责”的定义,往往需要丰富的经验和对业务的认知程度,这也更加容易引…

WEB 3D技术 three.js 法向量演示性讲解

本文 我们来说法向 法向 又叫 法向量 就是 我们一个三维物体 顶点垂直于面 的方向 向量 他的作用 用来做光反射 根据光照的方向 根据面进行反射 我们上文写的这个代码 import ./style.css import * as THREE from "three"; import { OrbitControls } from "…

数仓可视化5--superset的部署安装

1、superset简介 Apache Superset 是一个现代的数据探索和可视化平台。它功能强大且十分易用&#xff0c;可对接各种数据源&#xff0c;包括很多现代的大数据分析引擎&#xff0c;拥有丰富的图表展示形式&#xff0c;并且支持自定义仪表盘。 2、安装步骤 2.1、安装Miniconda3 …

GBASE南大通用 ADO.NET EntityFramework 实体框架支持

GBASE南大通用 ADO.NET 驱动支持 EntityFramework 实体框架。 实体框架&#xff0c;可以理解成微软的一个 ORM 产品&#xff0c;用于支持开发人员通过对概 念性应用程序模型编程&#xff08;而不是直接对关系存储架构编程&#xff09;来创建数据访问应 用程序&#xff0c;目…

RedHat8、Centos8无法启动网卡解决方案,网卡未加入托管

只针对部分情况&#xff0c;网卡未加入托管导致 虚拟机开启 ifconfig 没有ens33网卡&#xff0c;无法上网 手动启动网卡提示 Connection ens33 is not available on device ens33 because device is strictly unmanaged使用nmtui配置IP信息&#xff0c;无法启动’ens160’网卡…

LCR 174. 寻找二叉搜索树中的目标节点

解题思路&#xff1a; 二叉搜索树一般采用中序遍历&#xff08;从小到大排列&#xff09;。 class Solution {int res, cnt;public int findTargetNode(TreeNode root, int cnt) {this.cnt cnt;dfs(root);return res;}void dfs(TreeNode root) {if(root null) return;dfs(ro…

jmeter断言-三种

1.响应断言 substring是指包含就行 不用完全相等 2.json断言 3.持续时间断言

基于深度学习的PCB板缺陷检测系统(含UI界面、yolov8、Python代码、数据集)

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov8 yolov8主要包含以下几种创新&#xff1a;         1. 添加注意力机制&#xff08;SE、CBAM等&#xff09;         2. 修改可变形卷积&#xff08;DySnake-主干c…

Linux:apache优化(3)—— 页面缓存时间

作用&#xff1a;通过 mod_expires 模块配置 Apache&#xff0c;使网页能在客户端浏览器缓存一段时间&#xff0c;以避免重复请求&#xff0c;减轻服务端工作压力。启用 mod_expires 模块后&#xff0c;会自动生成页面头部信息中的 Expires 标签和 CacheControl 标签&#xff0…

AIGC年度回顾!2024向量数据库是否还是AI发展方向之一?

引言 2023 年&#xff0c;是 AI 技术大爆发的一年&#xff0c;从年初到年末&#xff0c;全球关心技术发展的人们见证了一次次的 AI 技术升级&#xff0c;也逐步加深着对 AGI 发展的畅想。而伴随着生成式人工智能的飞速发展&#xff0c;向量数据库以其独特的技术优势逐渐崭露头角…

char 和 varChar 的区别是什么?

大家好&#xff0c;我是伯约&#xff0c;这篇对大家有帮助的话求一个赞&#xff0c;另外文章末尾放了我从月入7k到现在3W的学习资料&#xff0c;大家可以去领一下&#xff08;无偿&#xff09;。 CHAR 和 VARCHAR 是最常用到的字符串类型&#xff0c;两者的主要区别在于&#x…

案例073:基于微信小程序的智慧旅游平台开发

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

大文件快速传输解决办法汇总

在数据传输普及的当今时代&#xff0c;文件体量也在不断的突破它”大“的上线&#xff0c;很多企业也在面临着这类大文件快速传输的烦恼&#xff0c;而且这里面的“大”可不是一般意义的几M,几G的文件&#xff0c;它有可能上T级甚至是PB级别、TB级别的大文件&#xff0c;或者是…

LINUX加固之命令审计

一、前言 在LINUX安全范畴中&#xff0c;安全溯源也是很重要的一个环节。对主机上所有曾操作过的命令详细信息需要有一份记录保存&#xff0c;当系统遭受破坏或者入侵&#xff0c;拿出这份记录&#xff0c;可以帮助定位一些可疑动作。 很多系统通常都会配置安全堡垒机&#xff…

二、串行FLASH文件系统FatFs移植

经过上一节的分析&#xff0c;我们对文件系统有一定的理解了&#xff0c;这一节给大家介绍怎么把FatFs文件系统的这些代码移植到STM32S上&#xff0c;然后STM32利用这一些代码或者函数&#xff0c;以文件的格式对FLASH进行读写数据。 实则对diskio.c提供一些函数接口。 首先将…

企业内训系统源码开发实战:搭建实践与经验分享

本篇文章中&#xff0c;小编将带领读者深入探讨企业内训系统的源码开发实战&#xff0c;分享在搭建过程中遇到的挑战与解决方案。 一、项目规划与需求分析 通过对企业内训需求的深入了解&#xff0c;我们可以更好地定义系统架构和数据库设计。 二、技术栈选择 在内训系统开发…

2024年MySQL学习指南(三),探索MySQL数据库,掌握未来数据管理趋势

文章目录 前言7. DML- 增删改数据7.1 添加数据7.2 修改数据7.3 删除数据 8. DQL- 数据的查询操作8.1 基础查询1. 基础查询语法2. 基础查询练习 8.2 条件查询1. 条件查询语法2. 条件查询练习 8.3 排序查询1. 排序查询语法2. 排序查询练习 8.4 聚合函数1. 聚合函数语法2.聚合函数…

部署node.js+express+mongodb(更新中)

1-Linux服务器部署MongoDB 1.升级 yum -y update 2.下载MongoDB安装包 3.上传安装包 上传目录 &#xff1a; /usr/local/ 2-配置MongoDB环境变量并启动 1.配置环境变量全局启动 vi ~/.bash_profile 使用i命令进入编辑模式 添加: export PATH/usr/local/mongodb/bin:$P…

centos 8.0 安装sysbench 1.0.17

序号步骤说明执行命令执行结果备注1 下载并解压sysbench-1.0.17.zip sysbench-1.0.17.zip2安装依赖文件 yum install automake libtool -y yum install /usr/include/libpq-fe.h 3安装sysbench cd sysbench-1.0.17 ./autogen.sh ./configure \ --prefix/sysbench \ --with-pgsq…