Question

I don’t understand why the jQuery blur handler isn’t working in the most simple case. I’m literally creating a div 100px by 100px and setting a blur event on it, but it’s not firing (JSFiddle):

<div id="test">this is a test</div>

$(document).ready(function() {
    $('#test').bind('blur', function() {
          alert('blur event!'); 
    });
});

Is my understanding of blur wrong? I expect the blur event to fire when I click anywhere that is not the div…right?

According to jQuery’s documentation:

In recent browsers, the domain of the event has been extended to
include all element types. An element can lose focus via keyboard
commands, such as the Tab key, or by mouse clicks elsewhere on the
page.

I’ve tried it on the latest Chrome and Firefox on Mac.

Answer 1

From the W3C DOM Events specification:

focus

The focus event occurs when an element receives focus either via a pointing device or by
tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT,
TEXTAREA, and BUTTON.

blur

The blur event occurs when an element loses focus either via the pointing device or by
tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT,
TEXTAREA, and BUTTON.

The jQuery docs state browsers extended the events to other elements, which I’m guessing means blur and focus are aliases for the more generic DOMFocusIn and DOMFocusOut events. Non-input elements aren’t eligible to receive those by default though, and an element has to somehow gain focus before losing it – a blur still won’t fire for every click outside the div.

This SO question mentions that giving an element a tabindex would allow that, and seems to work for me in Chrome after modifying your jsFiddle. (Albeit with a fairly ugly outline.)