Div - onblur function

For blur event to fire on an element, the element needs to receive focus first. But <div> elements do not receive focus by default.

You can add tabindex="0" or contentEditable to your div so it will receive focus.

See it in action: http://jsfiddle.net/t25rm/

The blur event fires when focus is lost. By default, a div element cannot have the focus in the first place so it can't be lost.

If you set tabindex on a div, then it can gain the focus, but you should almost always be using a more appropriate element (such as a button) when you think about making interactive controls.

<!-- Not recommended. See above -->
<div tabindex="1" onblur="callme()"> content </div>

If you give the div a tabindex attribute, it will be able to accept focus:

<div id="yourdivid" tabindex="0">content</div>

then attach focus and blur event handlers For example:

document.getElementById("yourdivid").onfocus = function() {
   alert('focused');
}
document.getElementById("yourdivid").onblur = function() {
   alert('blur');
}