DA. DA. - 5 months ago 50
jQuery Question

blur() vs. onblur()

I have a input tag with an onblur event listener:

<input id="myField" type="input" onblur="doSomething(this)" />


Via JavaScript, I want to trigger the blur event on this input so that it, in turn, calls the
doSomething
function.

My initial thought is to call blur:

document.getElementById('myField').blur()


But that doesn't work (though no error).

This does:

document.getElementById('myField').onblur()


Why is that?
.click()
will call the click event attached to an element via the onclick listener. Why does
blur()
not work the same way?

Answer

This:

document.getElementById('myField').onblur();

works because your element (the <input>) has an attribute called "onblur" whose value is a function. Thus, you can call it. You're not telling the browser to simulate the actual "blur" event, however; there's no event object created, for example.

Elements do not have a "blur" attribute (or "method" or whatever), so that's why the first thing doesn't work.

Comments