{"id":420,"date":"2015-11-02T11:53:46","date_gmt":"2015-11-02T11:53:46","guid":{"rendered":"http:\/\/fazilabdulkhadar.com\/?p=420"},"modified":"2021-02-23T09:47:04","modified_gmt":"2021-02-23T09:47:04","slug":"event-flow-in-javascript-capturing-and-bubbling","status":"publish","type":"post","link":"http:\/\/fazilabdulkhadar.com\/index.php\/2015\/11\/02\/event-flow-in-javascript-capturing-and-bubbling\/","title":{"rendered":"Event Flow in JavaScript &#8211; Capturing and Bubbling"},"content":{"rendered":"<p>The order in which the events fire is called Event Flow. \u00a0HTML elements are nested inside other elements. So If we are hovering or clicking on an element that also hovering or clicking on other elements as well.<\/p>\n<h3>Event Bubbling<\/h3>\n<p>Event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. In the below example image that the list contains the list and if you click on the link JavaScript can trigger an event on the link first and as well as the other elements the anchor tag sits inside.<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1039 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/29.jpeg\" alt=\"\" width=\"340\" height=\"304\" data-sizes=\"auto\" data-srcset=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/29.jpeg 340w, http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/29-300x268.jpeg 300w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/div>\n<h3>Event Capturing<\/h3>\n<p>With capturing, the event is first captured by the outermost element and propagated to the inner elements.<\/p>\n<div class=\"slate-resizable-image-embed slate-image-embed__resize-full-width\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1040 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/30.jpeg\" alt=\"\" width=\"340\" height=\"304\" data-sizes=\"auto\" data-srcset=\"http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/30.jpeg 340w, http:\/\/fazilabdulkhadar.com\/wp-content\/uploads\/2020\/09\/30-300x268.jpeg 300w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/div>\n<h3>Browser Support<\/h3>\n<p>Event Bubbling has wider browser support and will support almost IE versions and all modern browsers. \u00a0But the Event Capturing doesn&#8217;t support IE8 and earlier versions.<\/p>\n<p><em>Reference book: Javascript and Jquery by John Dukett<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The order in which the events fire is called Event Flow. \u00a0HTML elements are nested inside other elements. So If we are hovering or clicking on an element that also hovering or clicking on other elements as well. Event Bubbling Event bubbling, the event is first captured and handled by the innermost element and then&hellip;<\/p>\n","protected":false},"author":1,"featured_media":421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-420","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/comments?post=420"}],"version-history":[{"count":3,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/420\/revisions"}],"predecessor-version":[{"id":1041,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/posts\/420\/revisions\/1041"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media\/421"}],"wp:attachment":[{"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/media?parent=420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/categories?post=420"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/fazilabdulkhadar.com\/index.php\/wp-json\/wp\/v2\/tags?post=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}