JS中 focus 和 blur 焦点事件

发布时间：2024年01月04日

发现的一个小知识点

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>
文章来源:https://blog.csdn.net/Yt0601/article/details/135147675
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章