blur() vs. onblur()

Question

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?

@Ray no, that's not really accurate, though it is true that jQuery provides a "blur" method to trigger an event (or register a handler). That method is supplied by jQuery objects, however, and is not available on plain DOM elements. — Pointy, Mar 06 '11 at 19:12
Although your question is answered but I am still curious what made you execute `doSomething()` function via explicitly triggering `onblur` function! Why could you not call `doSomething` directly? — user1451111, Dec 13 '18 at 00:50
@user1451111 my memory is a little fuzzy as to what I was doing 7 years ago :) — DA., Dec 13 '18 at 08:39

score 30 · Accepted Answer · answered Mar 06 '11 at 19:10

30

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.

answered Mar 06 '11 at 19:10

Pointy

405,095
59
585
614

But you can call .click() to simulate a click event, correct? My mistake was assuming .blur() existed as well. Thanks for the answer! – DA. Mar 06 '11 at 19:15
3

@DA: `.blur()` does exist in some browsers, but you first need to give the element focus if it doesn't have it. [Try this example](http://jsfiddle.net/zYQqa/1/) in Chrome. I don't know which browsers do/don't support it. – user113716 Mar 06 '11 at 19:16
1

Yes, because browsers **do** support a method on DOM elements called "click". I agree that it's just not consistent; many of these things evolved quickly back 10 or more years ago before anybody had a chance to think much about synchronization. I think that's one of the main reasons that libraries like Prototype and jQuery are so popular. – Pointy Mar 06 '11 at 19:17
What I wouldn't give for this project to be using jQuery... ;) So, if I stick with the onBlur() option, how (relatively) safe is that in terms of current browser support. Any gotcha's I should be looking for? – DA. Mar 06 '11 at 19:22
1

Well it's basically just accessing the reference to the function from the DOM element, so it's pretty safe. I *think* IE will not complain about that and will correctly bind `this` to the element, but you might double-check that. – Pointy Mar 06 '11 at 19:26
I think it makes sense that there is a click() but no blur(). To blur you will need to .focus() on another element - which is possible – LVS Apr 28 '11 at 11:23

score 12 · Answer 2 · answered Mar 06 '11 at 19:23

Contrary to what pointy says, the blur() method does exist and is a part of the w3c standard. The following exaple will work in every modern browser (including IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Javascript test</title>
        <script type="text/javascript" language="javascript">
            window.onload = function()
            {
                var field = document.getElementById("field");
                var link = document.getElementById("link");
                var output = document.getElementById("output");

                field.onfocus = function() { output.innerHTML += "<br/>field.onfocus()"; };
                field.onblur = function() { output.innerHTML += "<br/>field.onblur()"; };
                link.onmouseover = function() { field.blur(); };
            };
        </script>
    </head>
    <body>
        <form name="MyForm">
            <input type="text" name="field" id="field" />
            <a href="javascript:void(0);" id="link">Blur field on hover</a>
            <div id="output"></div>
        </form>
    </body>
</html>

Note that I used link.onmouseover instead of link.onclick, because otherwise the click itself would have removed the focus.

score 2 · Answer 3 · answered Mar 06 '11 at 19:06

2

I guess it's just because the onblur event is called as a result of the input losing focus, there isn't a blur action associated with an input, like there is a click action associated with a button

answered Mar 06 '11 at 19:06

cusimar9

5,185
4
24
30

blur() vs. onblur()

3 Answers3

Linked