input标签blur事件冒泡绑定

最新推荐文章于 2025-06-08 19:43:22 发布

Senkui

最新推荐文章于 2025-06-08 19:43:22 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47259997/article/details/117351311

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在JavaScript中，input标签的blur事件不支持冒泡的现象，并提出使用focusout事件作为替代方案。通过示例代码展示了如何在div元素上监听所有input元素的失去焦点事件，从而实现跨元素事件处理。这对于优化DOM事件处理和提高代码效率具有重要意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input标签blur事件冒泡

1).我们知道多个子元素触发同一个事件时，可以将事件绑定在同一个祖级元素上。
2).查了一下input标签blur事件不支持冒泡
3).可以用focusout事件代替

  <div class="divFa" id="divFa">
    <p> <input type="text"> </p>
    <p> <input type="text"> </p>
    <p> <input type="text"> </p>
    <p> <input type="text"> </p>
    <p> <input type="text"> </p>
  </div>
  <script>
    var divFa = document.getElementById('divFa')
    divFa.addEventListener('focusout',(e)=>{
      if(e.target.nodeName == 'INPUT'){
        console.log(e.target.parentNode,'parent')
      }
      console.log(1111)
    })
  </script>