Event bubbling and the onblur event

Question

I\'m writing a form validation script and would like to validate a given field when its onblur event fires. I would also like to use event bubbling so i don\'t have to attac

Answer 1

use 'Focusout' event as it has Bubble up effect..thanks.

Answer 2

aa, you can simply add the onblur event on the form, and will call the validation every time you change focus on any of the elements inside it

Answer 3

ppk has a technique for this, including the necessary workarounds for IE: http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

Answer 4

To use bubbling with onblur event, Then you can use addEventListener() and set the useCapture parameter to false. Like this:

yourFormInput.addEventListener('blur', yourFunction, false);

Firefox 51 and below do not support the onfocusout event. So don't use onfocusout instead of onblur event.

Answer 5

You're going to need to use event capturing (as opposed to bubbling) for standards-compliant browsers and focusout for IE:

if (myForm.addEventListener) {
    // Standards browsers can use event Capturing. NOTE: capturing 
    // is triggered by virtue of setting the last parameter to true
    myForm.addEventListener('blur', validationFunction, true);
}
else {
    // IE can use its proprietary focusout event, which 
    // bubbles in the way you wish blur to:
    myForm.onfocusout = validationFunction;
}

// And of course detect the element that blurred in your handler:
function validationFunction(e) {
    var target = e ? e.target : window.event.srcElement;

    // ...
}

See http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html for the juicy details