ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

JS中 focus 和 blur 焦点事件

2026/9/11 15:39:19 拓冰建站 浏览量
JS中 focus 和 blur 焦点事件

发现的一个小知识点

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>