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

最新推荐文章于 2023-12-24 21:07:47 发布
最新推荐文章于 2023-12-24 21:07:47 发布
阅读量597 收藏
点赞数 1
分类专栏： js 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yomuki/article/details/111060298
版权
本文探讨了DOM中与焦点相关的四个事件——focus、focusin、blur和focusout的顺序及触发机制。重点指出focus和blur事件在捕获和冒泡阶段的行为，以及它们不会在父元素上触发。
摘要由CSDN通过智能技术生成

 

  目标对象事件 是否支持冒泡 是否可取消默认行为 支持 注册方式
blur element 失去焦点 否 否   on / 监听
focus element 获得焦点 否 否   on / 监听
focusout element 失去焦点 是 否 IE9+ 监听
focusin
最低0.47元/天 解锁文章
Yomuki
关注
专栏目录
jQuery focus和blur事件的应用详解
12-10
一、需求原因在填写表单时需要实现如下效果二、具体实现 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD...<head><... charset=UTF-8″><...script language=”JavaScript”src=”../jQuery/jquery-1.7.1.
DOM 元素中的焦点管理
weixin_34289454的博客
02-17 162
DOM 元素中的焦点管理 1. 焦点元素 表单元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看当前焦点元素 document.activeElement：返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件。该属性是只读的。 Chro...
dom啦17 焦点事件
qq_37805832的博客
09-06 596
<!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
DOM深入学习 --- 聚焦：focus / blur ，foucs / blur 委托的实现，tabindex中任何元素都可聚焦（六）
秋天，黄叶坠地，凉风有信。
03-11 2677
文章目录聚焦：focus/blurfocus/blur 事件focus/blur 方法允许在任何元素上聚焦：tabindexfocus/blur 委托总结 聚焦：focus/blur 当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。 聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行代码以初始化所需功能的时刻。
js dom focus() blur() onfocus onblur - Kaiqisan
Kaiqisan的博客
08-25 601
js dom focus() blur() onfocus onblur ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天没有开场白，乏了乏了，直接进入正题。 focus(): 给支持被聚焦的元素获取焦点（button / input / select / a /area/ textarea/frame/option）或者设置了contenteditable = "true"的不支持聚焦的元素(PS：这个谨慎使用，一旦使用，可以可视化操作当前html元素内容和位置，一顿胡乱操作
JavaScript：DOM事件
最新发布
盒马的博客
12-24 1556
讲解JavaScript中的事件，包括事件监听，事件冒泡，事件委托等技巧
Vue中mintui的field实现blur和focus事件的方法
10-18
`blur`事件发生在元素失去焦点时，而`focus`事件则在元素获得焦点时触发。在Vue中，我们可以直接通过Mint UI的Field组件的事件绑定来实现这两个事件的监听。 首先，让我们看一个简单的例子： ```html 卡号" v-...
focus、focusin、blur、focusout的区别
qq_43654065的博客
09-10 3309
焦点事件在页面元素获得或失去焦点时触发，利用这些事件与document.hasFocus()和document.activeElement()属性配合，可以知道用户在页面上的行踪。 焦点事件： blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持 focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持 focusin：在元素获得焦点时触发，与 HTML 事件 focus 等价，但它冒泡。 focusout：在元素失去焦点时触发。与 HTML 事件 blur 等价，冒泡。
JavaScript焦点事件（blur、focus与focusin、focusout的区别，焦点事件触发顺序）
热门推荐
TalonZhang的博客
11-20 1万+
焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 document.hasFocus( ) 方法及 document.activeElement 属性配合，可以知晓用户在页面上的行踪。 焦点事件： blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持 focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持 focusin：在元素获得焦点时触发，与 HTML ...
用addEventListener添加focus事件和blur事件
WSLHX944174132的博客
06-27 8217
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> Insert title here <script> document.getElementById(“aaaaa”).addEventListener(“focus”, myFun...
Element UI输入框focus()方法自动获取焦点失败处理方法
weixin_45517017的博客
03-27 1万+
Element UI输入框focus()方法自动获取焦点失败处理方法 ​ 本来想通过自定义事件触发输入框，并获取焦点，但是使用官方提示的focus()方法一直失效 后来百度了半天，终于找到一个比较好的处理方法。 ​ 先放对比代码： 刚开始的代码 <el-input v-if="isFormOpened" v-model="scope.row.name" @blur="updateLib"> </el-input> <el
DOM事件 中的 focus 和blur
alonia的博客
05-10 2410
今天做一个表单验证时 ，遇到一个问题，利用form.addEventListener 绑定事件时，发现focus 不起作用 通过查阅资料 终于知道了问题出在哪里？ （资料出处https://developer.mozilla.org/en-US/docs/Web/Events/   和   https://segmentfault.com/a/1190000003942014） 1.不是所有事
焦点事件
MountGao的博客
08-18 2086
focus /blur/focusin /focusout 事件 简介 focus当 focusable 元素获得焦点时会触发该事件，不支持冒泡（不完全对）。 focusin当 focusable 元素即将获得焦点时会触发该事件，和focus一样，只是focusin支持冒泡。 blur当 focusable 元素失去焦点时会触发该事件，不支持冒泡（不完全对）...
前端重新学习（15）DOM中的事件（下）
qq_16546829的博客
08-21 664
来源 《Javascript高级程序设计》 笔记 目录 事件类型 UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设备事件 触摸与手势事件 内存和性能 事件委托 移除事件程序 模拟事件 DOM中的事件模拟 1. 模拟鼠标事件 2. 模拟键盘事件  3. 模拟其他事件  4. 自定义 DOM事件 IE中的事件模拟 ...
cannot focus element解决方案
weixin_34104341的博客
05-21 572
If you encontererror "cannot focus element"when using Selenium+Python in Chrome to input value,you can use below code instead: from selenium.webdriver.common.action_chains import ActionChains ...
模拟移动端键盘监听事件
MichaelAn的博客
02-13 155
模拟移动端键盘监听事件 洋洋_13dc关注 2019.06.12 14:07:37字数 327阅读 132 本以为h5有直接键盘监听事件，查找资料之后发现没有，找到一篇大神的文章，很有用，感谢大神 原文链接https://www.jianshu.com/p/005eacc3bc34 好记性不如烂笔头 js是没有方法...
说说focus /focusin /focusout /blur 事件
weixin_34013044的博客
11-02 603
事件触发时间 focus:当focusable元素获得焦点时，不支持冒泡；focusin:和focus一样，只是此事件支持冒泡；blur:当focusable元素失去焦点时，不支持冒泡；focusout:和blur一样，只是此事件支持冒泡； 以前一直以为所有事件都是支持冒泡的，都是可以cancel的，查阅了[MDN上相关资料]（https...
addEventListener() 方法
shuai1999m的博客
04-02 948
先看个例子： document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; }); 定义和用法 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 语法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值