jQuery $(window).blur vs native window.onblur

Question

What are the advantages of using jQuery's

$(window).blur(function() { ... })

to attach an event handler versus setting it directly with

window.onblur = function() { ... }

It seems that the latter is less robust because it only supports one blur handler, and when used with other packages, other code might override the window.blur value with another function. However, couldn't this also happen with the jQuery implementation too, which presumably uses window.blur as its underlying implementation?

EDIT: Several people have also mentioned the window.addEventListener alternative, which can be used to add an 'onblur' event apart from the methods above.

Answer 1

$(window).blur(function() { ... })

Lets you add one or more event handlers.

---

window.onblur = function() { ... }

Lets you only have one event handler handling the blur event.

---

The former uses the jQuery's own event handle mechanism. The call to .blur() will delegate to jQuery.fn.on() which in turn will delegate to jQuery.event.add. This add() method will create it's own handler for the given event type and tell addEventListener() to call this handler whenever a event of given type is fired. So basically jQuery has it's own way of event handling which relies on addEventListener() to execute properly.

The latter is just an attribute which can only contain one value so queueing event handlers is impossible.

I wrote a little demonstration to prove this point: http://jsfiddle.net/GnNZm/1/

Answer 2

With the jQuery method, you can attach multiple event handlers. By setting window.onblur, you can only have a single handler.

Pure JavaScript also has this: window.addEventListener(). In fact, i'm sure jQuery uses this internally. (Yes they do.)

(EDIT) The window.onblur property is basically a shortcut for setting a single handler. Using addEventListener() (or the jQuery wrapper) basically creates a list of event handlers, which all get fired when the event happens. I haven't tested, but i think you can even use the two together. Because it's a list, not a single value, multiple handlers shouldn't interfere with each other. They can also be removed separately or all at once.

jQuery's event handlers, using on(), also let you namespace your handlers, to prevent clashes if a plugin removes its handlers. Pure JS doesn't seem to have this easily.

Answer 3

For jquery blur

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

taken from jquery doc https://api.jquery.com/blur/

Also jquery allows you bind multiple event handlers

Answer 4

When you attach an event there is the possibility of overwriting an event already attached to an event handler. This used to happen a lot with window.onload() where different scripts overwrote each others event handlers.

eg:

//lightbox.js
window.onload = function() { /* do lightbox stuff */ }

//carousel.js 
window.onload = function() { /* do carousel stuff */ }

So the common practice used to be something like this:

var existing_event_handlers = window.onload;
window.onload = function(){

    //my event code
    alert('onready fired');

    //call other event handlers after
    existing_event_handlers();
} 

Using window.onblur = function() { ... } still has an advantage because you can specifically dictate if you want your event fired before or after other attached events.

Like many other answers already pointed out jQuery abstracts you from most browser differences. Version before IE9 used attachEvent() rather than addEventListener().