Blur event using tabindex

by Neviton

HTML

<div id="console"></div>
<section id="sec1">
    NO tabindex
</section>
<section id="sec2" tabindex="">
    tabindex=""
</section>
<section id="sec3" tabindex="-1">
    tabindex="-1"
</section>
<section id="sec4" tabindex="0">
    tabindex="0"
</section>

<section id="sec31" tabindex="-1">
    tabindex="-1"
    <a href="" tabindex="">LINK</a>
    <section id="sec32">
        NO tabindex
    </section>
    <section id="sec33" tabindex="-1">
        tabindex="-1"
    </section>
</section>

CSS

* {
    font-family: Arial;
}
#console {
    height: 1em;
    background-color: #000;
    color: #fff;
    padding: 10px;
    margin: 10px 0;
}
a,
section {
    display: inline-block;
    padding: 20px;
    background-color: #eee;
}

a:focus,
section:focus {
    border: 5px solid #000;
    padding: 15px;
}

#sec1 {
    background-color: #ddd;
}

#sec2 {
    background-color: #fbb;
}

#sec3 {
    background-color: #bfb;
}

#sec4 {
    background-color: #bbf;
}

#sec31 {
    background-color: #fbb;
    margin-top: 10px;
}

#sec32 {
    background-color: #bfb;
}

#sec33 {
    background-color: #bbf;
}

JavaScript

$('section').on('blur', function(e){
    var b = $('<b>')
            .html('#' + e.target.id)
            .css('color', $(this).css('background-color'));
    
    $('#console')
        .html(b)
        .append(' lost the focus');
});

$('a').focus();