blur() vs. onblur()

javascript jquery onblur
DA. picture DA. · Mar 6, 2011 · Viewed 114.3k times · Source

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

Pointy picture Pointy · Mar 6, 2011

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.

Related questions

How to blur the div element?

I have a dropdown menu inside a DIV. I want the dropdown to be hide when user click anywhere else. $('div').blur(function() { $(this).hide(); } is not working. I know .blur works only with <a> but in this …

Read More
Get the clicked object that triggered jquery blur() event

Suppose I do this: $(target).blur(function(e){ //do stuff }); Is there a way to fetch the object that was clicked on in order to trigger the blur action? I tried using e.target, but that appears to be returning …

Read More
How to get div onblur event to execute a javascript function?

Hi I have a div that contains three textboxes , i need a function to be called once the control is out of the div tag, I don't want to use the onclick event because the focus can be moved out …

Read More