JS中 focus 和 blur 焦点事件

news2025/4/6 16:59:49

发现的一个小知识点

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>

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

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

相关文章

(读书笔记)网络是如何连接的

1.1 生成 HTTP 请求消息 浏览器是一个具备多种客户端功能的综合性客户端软件,因此它需要 一些东西来判断应该使用其中哪种功能来访问相应的数据,而各种不同的 URL(Uniform Resource Locator,统一资源定位符。) 就是用来干这个的,比如访问 Web 服务器时用“http:”,而访…

三段式电流保护与自动重合闸MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 前加速、后加速的区别&#xff1a; 前加速是保护装置不判别是永久性故障还是瞬时故障&#xff0c;直接跳闸&#xff0c;然后经重合闸装置来纠正&#xff1b;后加速是保护装置是先判别故障类型有选择性跳闸 …

【Linux Shell】4. 数组

文章目录 【 1. 数组的定义 】【 2. 读取数组 】【 3. 关联数组 】【 4. 获取数组中的所有元素 】【 5. 获取数组的长度 】 数组中可以存放多个值。 Bash Shell 只支持一维数组&#xff08;不支持多维数组&#xff09;&#xff0c;初始化时不需要定义数组大小。与大部分编程语言…

【动态规划】LeetCode-10. 正则表达式匹配

10. 正则表达式匹配。 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 ‘.’ 匹配任意单个字符‘*’ 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 …

Microsoft Word去除页面多余的换行符

大家写论文的时候或者排版的时候可能遇到换行符多出来了导致页面的不美观。像下面这张图一样&#xff0c;虽然latex不会出现这种问题。 处理方式 点击插入然后点击分页 结果展示

设计模式 七大原则

1.单一职责原则 单一职责原则&#xff08;SRP&#xff1a;Single responsibility principle&#xff09;又称单一功能原则 核心&#xff1a;解耦和增强内聚性&#xff08;高内聚&#xff0c;低耦合&#xff09;。 描述&#xff1a; 类被修改的几率很大&#xff0c;因此应该专注…

(Java企业 / 公司项目)Nacos的怎么搭建多环境配置?(含相关面试题)(二)

上一篇讲了一个单体服务中配置&#xff0c;传统的Nacos配置但是在微服务架构当中肯定都是多环境下配置&#xff0c;比如生产环境&#xff0c;dev测试环境等等。 第一种方式模拟开始&#xff1a; 首先展示在生产环境中nacos如何配置&#xff0c;在模块下新建一个配置文件&…

javascript 常见工具函数(一)

1.将JSON数据根据相同值&#xff0c;进行归类划分&#xff1a; var arr [{ time: "1", img: "22222" }, { time: "2", img: "555" }, { time: "1", img: "888888" }, { time: "2", img: "4444&q…

D50|单调栈

739.每日温度 初始思路&#xff1a; 暴力解法但是会超时。 class Solution {public int[] dailyTemperatures(int[] temperatures) {int[] answer new int[temperatures.length];for(int i 0;i<temperatures.length;i){for(int j i;j<temperatures.length;j){if(te…

NeRF-RPN: A general framework for object detection in NeRFs 全文翻译

摘要 Abstract 本文提出了第一个重要的物体检测框架 NeRF-RPN&#xff0c;它直接在 NeRF 上运行。给定一个预先训练好的 NeRF 模型&#xff0c;NeRF-RPN 的目标是检测场景中所有物体的边界框。通过利用包含多尺度三维神经体积特征的新颖体素表示法&#xff0c;我们证明…

双击shutdown.bat关闭Tomcat报错:未设置关闭端口~

你们好&#xff0c;我是金金金。 场景 当我startup.bat启动tomcat之后&#xff0c;然后双击shutdown.bat关闭&#xff0c;结果报错了~ 排查 看报错信息很明显了&#xff0c;未配置关闭端口&#xff0c;突然想起来了我在安装的时候都选的是默认的配置&#xff0c;我还记得有这…

深度学习课程实验二深层神经网络搭建及优化

一、 实验目的 1、学会训练和搭建深层神经网络&#xff1b; 2、掌握超参数调试正则化及优化。 二、 实验步骤 初始化 1、导入所需要的库 2、搭建神经网络模型 3、零初始化 4、随机初始化 5、He初始化 6、总结三种不同类型的初始化 正则化 1、导入所需要的库 2、使用非正则化…

k8s中的容器探针

pod的容器健康检查---探针 probe&#xff1a;k8s对容器执行的定期检查&#xff0c;诊断。 探针的三种规则 所有的探针都是针对容器不是针对pod 1、 存活探针---livenessProbe&#xff1a;探测容器是否正常运行。如果发现探测失败&#xff0c;会杀掉容器。容器会根据重启策略…

Python从入门到网络爬虫(面向对象详解)

前言 Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。如果你以前没有接触过面向对象的编程语言&#xff0c;那你可能需要先了解一些面向对象语言的一些基本…

【Java集合类篇】HashMap的数据结构是怎样的?

HashMap的数据结构是怎样的? ✔️HashMap的数据结构✔️ 数组✔️ 链表 ✔️HashMap的数据结构 在Java中&#xff0c;保存数据有两种比较简单的数据结构: 数组和链表&#xff08;或红黑树&#xff09;。 HashMap是 Java 中常用的数据结构&#xff0c;它实现了 Map 接口。Has…

Jupyter Notbook+cpolar内网穿透实现公共互联网访问使用数据分析工作

​​ 文章目录 1.前言2.Jupyter Notebook的安装2.1 Jupyter Notebook下载安装2.2 Jupyter Notebook的配置2.3 Cpolar下载安装 3.Cpolar端口设置3.1 Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 ​​​​ 1.前言 在数据分析工作中&#xff0c;使用最多的无疑就是各…

水稻潜在产量估算解决方案

1.背景与技术路线 统计资料表明&#xff0c;尽管我国粮食单产已由 50 年代初期的 1.2t/ha 增加到如今的 5.2t/h&#xff0c;粮食产量增加了 4 倍&#xff0c;但我国人口的增长速度与气候变化导致的农业生产的不确定性&#xff0c; 在水稻收获指数保持稳定的情况下&#xff0c;…

软件测试方法分类-按测试对象划分

接上一篇,下来我们再细讲,第四个维度的分类, 软件测试方法分类-按测试对象划分 本章节重点介绍非功能测试的相关知识,因为功能测试的基本在之前的分类都是有涉及的。 一、非功能测试 1,性能测试(Performance Testing) 检查系统是否满足需求规格说明书中规定的性能。 …

Mysql事务transaction简介

文章目录 什么是事务针对Mysql隔离级别读未提交读提交可重复读串行化 mysql中的数据结构索引数据结构mysql中的锁种类**共享锁和独占锁**表锁、行锁(记录锁、间隙锁、临键锁) spring中的事务事务特性 什么是事务 事务是一个不可分割的数据库操作序列&#xff0c;也是数据库并发…

从0到1入门C++编程——03 内存分区、引用、函数高级应用

文章目录 一、内存分区二、引用三、函数的高级应用1.默认参数2.占位参数3.函数重载 一、内存分区 C程序在执行时&#xff0c;会将内存大致分为4个区&#xff0c;分别是代码区、全局区、栈区和堆区。 代码区用来存放函数体和二进制代码&#xff0c;由操作系统进行管理。 全局区…