js 捕获子元素的 focus 事件

focus 事件可以绑定任何元素,但只有可编辑元素才可以触发 focus 事件.且 focus 事件不会冒泡. 所以不能在父元素监听子元素的 focus 事件.

focusin 事件与 focus 一样是在元素获取焦点时触发.但 focusin 可以冒泡.也就是说父元可以素监听子元素的 focusin 事件.

可编辑元素可以是原生的input, textarea. 也可以是 css(user-modify: read-write-plaintext-only;) 控制的div; 也可以是标签属性 (contenteditable=“true”) 控制的div.详情不在这里讨论.

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>js 捕获子元素的 focus 事件</title></head><body><div class="box1">box1 - focus<input type="text" class="inp1" name="inp1" id="inp1" value="" placeholder="inp1" /></div><div class="box2">box2 - focusin<input type="text" class="inp2" name="inp2" id="inp2" value="" placeholder="inp2" /></div><script type="text/javascript">document.querySelectorAll(".box1")[0].addEventListener("focus", function() {console.log("focus 事件不可以冒泡到父元素")})document.querySelectorAll(".box2")[0].addEventListener("focusin", function() {console.log("focusin 事件可以冒泡到父元素")})</script></body></html>

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/Events/focus

end

js 捕获子元素的 focus 事件相关推荐

js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js关于子元素不触发父元素事件的若干方法
2019独角兽企业重金招聘Python工程师标准>>> 方法一:event.cancelBubble=true; /* 最好用,js通用,event.cancelBubble=tru ...
js阻止子元素事件_阻止 JS 的冒泡事件
用了一段时间google inbox,赶脚mail task的样式很酷炫,于是也模仿着做了一个task管理系统. Google task有个behavior是点击页面别处,当前展开的mail就会收起. ...
js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
关于移动端触摸事件导致子元素不能绑定事件
近期项目遇到一个问题, 找了一个插件叫做移动端按首字母检索城市列表 http://www.sucaihuo.com/js/2305.html 在城市选项这里发现绑定不上事件找了很多阻止冒泡的事件 ...
JS前端CSS+元素，鼠标事件触发鼠标模形变成手状的形状
一:直接使用CSS样式改变当鼠标移动到元素上显示手状. style="cursor:pointer;" 二:使用JS触发事件改变原样式: 在鼠标事件onmouseover(鼠标移 ...
js获取子元素，原生获取子元素
js原生获取子节点: 1.封装成公用方法,以便于复用. function deleteTextNode(id) {var _elem = document.getElementById(id),_ch ...
js获取子元素在父元素中的序号的方法
先创建一个div,其中包含不同类型的子元素 <div id="div_test" onclick="test()"><div>adasd ...
原生JS清空子元素+原生JS添加子元素
//获取父元素-清空子元素 let content = document.getElementsByClassName("table-page__text")[0]; //循环删除 ...

js 捕获子元素的 focus 事件

js 捕获子元素的 focus 事件相关推荐

最新文章

热门文章