javascript - Handle blur event of 'container' without assigning click and focus events to EVERYTHING -

while have specific problem, i'm interested in whether there solution other example below.

i want hide element (div e.t.c.) when user loses focus away it.

i've played onblur , onfocusout (which seems job event.relatedtarget, firefox support limited).

many times have had (pseudo jquery);

$('*').on('focus,click', function() {     // if not descendant of .toolbar        // run .toolbar faux blur event }); 

but really don't having set focus , click events on every single element in document.

also not account if user minimises browser window e.t.c. have have window.onblur , push "faux blur" functions elements.

i'm looking "nice" way this, ideally without having add event listeners every element.

nb; vanilla javascript code preferred (no jquery)

here's jsbin i'm playing show if go input , click onto text node can't tell if it's within container element or not. http://jsbin.com/hogot/6/edit

you can use event capturing.

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

jsfiddle http://jsfiddle.net/60el4nws/5/

html

<form>     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" />     <input name="first_name" type="text" /> </form> 

js

function handler(event) {     console.log(event); }  document.addeventlistener("domcontentloaded", function(event) {      // firefox         if (navigator.useragent.indexof('firefox')>=0) {             document.body.addeventlistener('blur', handler, true);      // opera, safari/chrome     } else if (document.body.addeventlistener) {         document.body.addeventlistener('domfocusout', handler, true)      // ie     } else {         document.body.onfocusout = handler     }  });