DOM事件笔记——焦点 blur / focus / focusout / focusin

最新推荐文章于 2022-03-11 19:51:36 发布
最新推荐文章于 2022-03-11 19:51:36 发布
阅读量566 收藏
点赞数 1
分类专栏： js 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yomuki/article/details/111060298
版权

 

  目标对象事件 是否支持冒泡 是否可取消默认行为 支持 注册方式
blur element 失去焦点 否 否   on / 监听
focus element 获得焦点 否 否   on / 监听
focusout element 失去焦点 是 否 IE9+ 监听
focusin
最低0.47元/天 解锁文章
Yomuki
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Blur_Image_c/C++_blur_
10-04
Image processing base opencv
13.事件（2）
official business
06-02 273
4.事件类型： UI事件： 1. load 事件： 2. unload 事件： 3. resize 事件： 4. scroll 事件： 焦点事件： 鼠标与滚轮事件： 1. 客户区坐标位置： 2. 页面坐标位置： 3. 屏幕坐标位置： 4. 修改键： 5. 相关元素： 6. 鼠标按钮： 7. 更多的事件信息： 8. 鼠标滚轮事件： 9. 触摸设备： 10. 无障碍性问题： 键盘与文本事件： 1. 键码： 2. 字符编码： 3. DOM3 级变化： 4. textInput
DOM深入学习 --- 聚焦：focus / blur ，foucs / blur 委托的实现，tabindex中任何元素都可聚焦（六）
秋天，黄叶坠地，凉风有信。
03-11 2475
文章目录聚焦：focus/blurfocus/blur 事件focus/blur 方法允许在任何元素上聚焦：tabindexfocus/blur 委托总结 聚焦：focus/blur 当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。 聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行代码以初始化所需功能的时刻。
DOM 元素中的焦点管理
weixin_34289454的博客
02-17 151
DOM 元素中的焦点管理 1. 焦点元素 表单元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看当前焦点元素 document.activeElement：返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件。该属性是只读的。 Chro...
用addEventListener添加focus事件和blur事件
WSLHX944174132的博客
06-27 8090
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> Insert title here <script> document.getElementById(“aaaaa”).addEventListener(“focus”, myFun...
dom啦17 焦点事件
qq_37805832的博客
09-06 589
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" name="" id=""> <script type="text/javascript"> let oInput = document.querySelector("input"); // 1.监听input获取焦点 oInput.on
js dom focus() blur() onfocus onblur - Kaiqisan
Kaiqisan的博客
08-25 581
js dom focus() blur() onfocus onblur ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天没有开场白，乏了乏了，直接进入正题。 focus(): 给支持被聚焦的元素获取焦点（button / input / select / a /area/ textarea/frame/option）或者设置了contenteditable = "true"的不支持聚焦的元素(PS：这个谨慎使用，一旦使用，可以可视化操作当前html元素内容和位置，一顿胡乱操作
focus、focusin、blur、focusout的区别
qq_43654065的博客
09-10 3014
焦点事件在页面元素获得或失去焦点时触发，利用这些事件与document.hasFocus()和document.activeElement()属性配合，可以知道用户在页面上的行踪。 焦点事件： blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持 focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持 focusin：在元素获得焦点时触发，与 HTML 事件 focus 等价，但它冒泡。 focusout：在元素失去焦点时触发。与 HTML 事件 blur 等价，冒泡。
BLUR.rar_FlashMX/Flex源码_FlashMX_
08-12
flash 实现简单的美丽的BLUR效果 菜单BANAR 很方便的啦，随便使用，源码的
jQuery focus和blur事件的应用详解
12-10
一、需求原因在填写表单时需要实现如下效果二、具体实现 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD...<head><... charset=UTF-8″><...script language=”JavaScript”src=”../jQuery/jquery-1.7.1.
为TextBox装饰水印与(blur和focus)事件应用
10-27
为了界面的美观，有些时候可能需要为文本框(TextBox)装饰个水印；它有两种状态，一是blur和focus。因此，我们可以在Javascript写两个事件，感兴趣的朋友可以了解下
DOM基础笔记——DOMTokenList
Yomuki的博客
12-11 2818
目录 1、什么是DOMTokenList？ 2、属性 3、方法 1、什么是DOMTokenList？ 表示一组空格分隔的标记（tokens） 由 Element.classList 等返回的一组值。 2、属性 DOMTokenList.length 值的个数 DOMTokenList.value 以DOMString 的形式返回 DOMTokenList列表的值。（DOMString映射String） 3、方法 DOMTokenList.item(index) 根据传入的...
JS应用 —— 鼠标点击后跟随移动
Yomuki的博客
12-14 1426
功能 鼠标点击后，box跟随鼠标移动，再次点击后，停止跟随并停留在当前位置。 实现 点击后添加mousemove监听和移动样式。 再次点击后移除mousemove监听和移动样式。 相关属性和方法 element.classList 获取class列, add添加, remove移除 element.addEventListener() 添加监听 当回调函数为匿名函数时无法被移除 element.removeEventListener() 移除监听 element.getAttribute()
DOM基础笔记——element 插入元素方法
Yomuki的博客
12-12 1314
element.insertAdjacentElement(position, element) 将元素移动到指定元素的指定位置上。 position beforebegin 指定元素之前 afterend 指定元素之后 afterbegin 指定元素的第一个子元素之前 beforeend 指定元素的最后一个子元素之后 element 要移动的元素 返回值 插入成功，返回插入的元素 插入失败，返回nul element.insertAdjacentHTML(position...
【兼容性】new Date 出现 Invalid Date
Yomuki的博客
07-15 1100
pc端new Date("2020-02-02 10:00:00")正常，移动端出现Invalid Date。 翻了下MDN ，发现这句话 之前偷懒直接全用了字符串构造。改函数吧QAQ 改前： 改后： （格式判断暂无，日期写死在前端里了） /** * @description: 时间区域判断 * @param {*} checkArr * @return {*} */ export function checkDateTimeBetween(checkAr...
【JS】原生实现拖拽上传
Yomuki的博客
02-23 385
源视频 ：华峰前端工程师 <!-- * @Desc: 原生JS 实现文件/图片 拖拽效果 (移动端目前不适用) * @Author: Yomuki * @Date: 2021-02-23 12:24:27 * @LastEditors: Yomuki * @LastEditTime: 2021-02-23 21:53:19 --> <!DOCTYPE html> <html lang="en"> <head> <meta cha
DOM基础笔记——getBoundingClientRect() / getClientRects()
Yomuki的博客
12-12 356
getBoundingClientRect() 返回元素的大小及其相对于视口的位置。 返回的是DOMRect对象. width / height content-box : width + padding + border border-box : width IE9+ x 左边到视口的距离 IE不支持 y 上边到视口的距离 IE不支持 top 上边到视口的距离 bottom 下边到视口的距离 ri...
DOM笔记——元素内容插入/获取合集
Yomuki的博客
12-12 326
方法 or 属性 是否覆盖原居民 获取的内容 浏览器 element.insertAdjacentElement(position, element) 方法 不覆盖 / 单次 x element.insertAdjacentHTML(position, text) 方法 不覆盖 x element.insertAdjacentText(position, element) 方法 不覆盖 x ...
js blur事件 和 focus 事件
最新发布
05-31
`blur`事件和`focus`事件是JavaScript中的两个常用事件，分别表示失去焦点和获得焦点的事件。 当元素失去焦点时，会触发`blur`事件，可以通过`addEventListener`方法为元素添加事件监听器，具体代码如下： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值