本文介绍了JavaScript中input元素的focus和blur事件，展示了如何为这两个事件添加监听器，并特别提到在form元素中使用addEventListener时需要考虑捕获阶段和冒泡阶段的区分。
发现的一个小知识点
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>
扫一扫
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
