本文主要是介绍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>
这篇关于JS中 focus 和 blur 焦点事件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!