DOM事件笔记——焦点 blur / focus / focusout / focusin

最新推荐文章于 2025-07-22 04:45:00 发布

原创最新推荐文章于 2025-07-22 04:45:00 发布 · 755 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文探讨了DOM中与焦点相关的四个事件——focus、focusin、blur和focusout的顺序及触发机制。重点指出focus和blur事件在捕获和冒泡阶段的行为，以及它们不会在父元素上触发。

	目标对象事件	是否支持冒泡	是否可取消默认行为	支持	注册方式
blur	element 失去焦点	否	否		on / 监听
focus	element 获得焦点	否	否		on / 监听
focusout	element 失去焦点	是	否	IE9+	监听
focusin	element 获得焦点	是	否	IE9+	监听

四者事件顺序：

focus > focusin

blur > focusout

均设置捕获阶段

        var input = document.querySelector('input');
        var form = document.querySelector('.div1');
        //均设置在捕获阶段执行
        input.addEventListener('focusin',function () {
            console.log('input focusin');
        },true)
        input.addEventListener('focus',function () {
            console.log('input focus');
        },true)
        form.addEventListener('focusin',function () {
            console.log('form focusin');
        },true)
        form.addEventListener('focus',function () {
            console.log('form focus');
        },true)

        input.addEventListener('focusout',function () {
            console.log('input focusout');
        },true)
        input.addEventListener('blur',function () {
            console.log('input blur');
        },true)
        form.addEventListener('focusout',function () {
            console.log('form focusout');
        },true)
        form.addEventListener('blur',function () {
            console.log('form blur');
        },true)

均设置冒泡阶段

        var input = document.querySelector('input');
        var form = document.querySelector('.div1');
        
        input.addEventListener('focusin',function () {
            console.log('input focusin');
        },false)
        input.addEventListener('focus',function () {
            console.log('input focus');
        },false)
        form.addEventListener('focusin',function () {
            console.log('form focusin');
        },false)
        form.addEventListener('focus',function () {
            console.log('form focus');
        },false)

        input.addEventListener('focusout',function () {
            console.log('input focusout');
        },false)
        input.addEventListener('blur',function () {
            console.log('input blur');
        },false)
        form.addEventListener('focusout',function () {
            console.log('form focusout');
        },false)
        form.addEventListener('blur',function () {
            console.log('form blur');
        },false)