What is event bubbling?

Question

I am having textbox and submit and close button. There is jquery validation on focusout of textbox. Which is fine. But when user type something in textbox and directly click the Close button i don't want to do validation. As focusout event fired first so validation work. I want button click event to fire first.

Answer 1

The concept of event bubbling was introduced to deal with situations where a single event, such as a mouse click, may be handled by two or more event handlers defined at different levels of the Document Object Model (DOM) hierarchy. If this is the case, the event bubbling process starts by executing the event handler defined for individual elements at the lowest level (e.g. individual hyperlinks, buttons, table cells etc.). From there, the event bubbles up to the containing elements (e.g. a table or a form with its own event handler), then up to even higher-level elements (e.g. the BODY element of the page). Finally, the event ends up being handled at the highest level in the DOM hierarchy, the document element itself (provided that your document has its own event handler).

The term event propagation is often used as a synonym of event bubbling. However, strictly speaking, event propagation is a wider term: it includes not only event bubbling but also event capturing. Event capturing is the opposite of bubbling (events are handled at higher levels first, then sink down to individual elements at lower levels). Event capturing is supported in fewer browsers and rarely used; notably, Internet Explorer prior to version 9.0 does not support event capturing.

Credit: www.javascripter.net