子节点含有表单元素的div元素的blur事件

1.div元素的blur事件

blur事件一般在表单元素如input元素才是存在的，对div、span等元素时无效的，但是可以给div元素加上tabindex属性，也可以让div等元素有焦点，所以blur事件就有效了，如：

    <div id="divblur" tabindex="2">
        <span>类型：</span>
    </div>

    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    })

点击div元素，就会触发blur事件，控制台会打印日志 "blur event"

但是，会有一个问题，由于添加了‘tabindex’属性，当你点击div元素的时候，div元素周围会有一个蓝色的焦点轮廓，如下图：

这样对有些人来说是不可接受的，那么怎么把它去掉呢，很简单，直接在div元素上加上'outline: none' 的样式就可以了。如：

    <style>
        #divblur{
            outline: none;
        }
    </style>

2.子节点含有表单元素如input元素的div的blur事件

如果你有这样的需求：div元素包裹有input元素，当你在input框中输入一些文本后，点击这个div元素区域外侧，这时你想让整个div失去焦点触发blur事件，在blur事件中进行一些逻辑处理。但是你直接给div绑定blur事件，或者给div加上tabindex属性然后再绑定blur事件，你发现都不会触发div元素的blur事件。

    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    </div>

    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    })

这是因为blur事件不支持冒泡，你在input中输入文字后，然后点击外侧区域失去焦点，此时如果input元素绑定了blur事件，就会触发该事件，但是不会冒泡到父元素div上，也就不会触发blur事件。

那么，有什么办法可以达到目的呢，有两种方法：

（1）既然blur事件不支持冒泡, 那就启用捕获，在捕获阶段触发div的blur事件

    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    </div>
    // 第三个参数设为true，开启捕获
    document.querySelector('#divblur').addEventListener('blur', function(e){
        console.log('blur event')
    }, true)

（2）使用focusout事件替代blur事件，focusout事件和blur事件基本上效果是一样的，不同的是，focusout事件支持冒泡。

    <div id="divblur" tabindex="2">
        <span>div元素的blur事件</span>
        <input type="text" />
    </div>
    // focusout事件代替blur事件
    document.querySelector('#divblur').addEventListener('focusout', function(e){
        console.log('blur event')
    })

最后需要说明的是，这两种方法，div元素tabindex属性都需要加上，因为div本身没有焦点属性。