{"id":93440,"date":"2017-08-22T15:27:52","date_gmt":"2017-08-22T15:27:52","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=93440"},"modified":"2017-08-22T15:27:52","modified_gmt":"2017-08-22T15:27:52","slug":"javascript-event-propagation","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/","title":{"rendered":"JavaScript Event Propagation"},"content":{"rendered":"

We usually use an event to an element and whenever that event occurs to an element then the attached event to that element is fired. But we don’t know how JavaScript performs the event in the DOM. Today we will learn about the JavaScript Event Propagation means how JavaScript propagates the event between the parent and his child elements.<\/p>\n

The standard DOM Event describes 3 phases of event propagations.<\/p>\n

    \n
  1. Capturing Phase<\/li>\n
  2. Target Phase<\/li>\n
  3. Bubbling Phase<\/li>\n<\/ol>\n

    Before I start from the Capturing phase I want to start from the Bubbling Phase as it’s the default process of JavaScript.<\/p>\n

    So let’s take an example :-<\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    \"\"<\/p>\n

    In the above example I have applied same event handler to both parent and his child elements.<\/p>\n

    So the point is – which event will be performed first if the click event is occurred to the child element (id equal to div3) ?<\/p>\n

    In default JavaScript process all the event will be performed from child to parent that’s called JavaScript Bubbling.<\/strong><\/p>\n

    In JavaScript Bubbling<\/strong> whenever event is performed on the element then browser checks the whether same event is applied on the parent element, If yes, then browser performed that event for the parent just after the target element on which the actual event is fired.<\/p>\n

    But JavaScript Capturing<\/strong> is just opposite to the JavaScript Bubbling<\/strong> means event performed from parent to the target element. This can be achieved by passes third parameter as a true of JavaScript “addEventListener” function.<\/p>\n

    \"\"<\/p>\n

    If now click event is performed on the child element (id equals to div3) then the event performs for the parent first and then the child element.<\/p>\n

    Note<\/strong><\/em> – In JavaScript if we use the capturing process then bubbling process also works.<\/p>\n

    Just look at the above example. After the event is performed to the parent element browser perform the event for the target element and then that event will be performed for the element (id equals to div2). That’s the bubbling process worked after the capturing.<\/p>\n

    I hope this article will help you to understand about the Event Propagation of JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"

    We usually use an event to an element and whenever that event occurs to an element then the attached event to that element is fired. But we don’t know how JavaScript performs the event in the DOM. Today we will learn about the JavaScript Event Propagation means how JavaScript propagates the event between the parent […]<\/a><\/p>\n","protected":false},"author":71,"featured_media":43102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198],"tags":[],"class_list":["post-93440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nJavaScript Event Propagation - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Event Propagation - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"We usually use an event to an element and whenever that event occurs to an element then the attached event to that element is fired. But we don’t know how JavaScript performs the event in the DOM. Today we will learn about the JavaScript Event Propagation means how JavaScript propagates the event between the parent [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-22T15:27:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sambit Pattanayak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sambit Pattanayak\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\"},\"author\":{\"name\":\"Sambit Pattanayak\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01\"},\"headline\":\"JavaScript Event Propagation\",\"datePublished\":\"2017-08-22T15:27:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\"},\"wordCount\":347,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\",\"url\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\",\"name\":\"JavaScript Event Propagation - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png\",\"datePublished\":\"2017-08-22T15:27:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Event Propagation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01\",\"name\":\"Sambit Pattanayak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sambit Pattanayak\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sambit-p819\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Event Propagation - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Event Propagation - Webkul Blog","og_description":"We usually use an event to an element and whenever that event occurs to an element then the attached event to that element is fired. But we don’t know how JavaScript performs the event in the DOM. Today we will learn about the JavaScript Event Propagation means how JavaScript propagates the event between the parent [...]","og_url":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-08-22T15:27:52+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png","type":"image\/png"}],"author":"Sambit Pattanayak","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sambit Pattanayak","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/"},"author":{"name":"Sambit Pattanayak","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01"},"headline":"JavaScript Event Propagation","datePublished":"2017-08-22T15:27:52+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/"},"wordCount":347,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/javascript-event-propagation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/","url":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/","name":"JavaScript Event Propagation - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png","datePublished":"2017-08-22T15:27:52+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/javascript-event-propagation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/03\/Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/javascript-event-propagation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Event Propagation"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/23309d7bfba5b06d58b50ea5e3191f01","name":"Sambit Pattanayak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b470681418ca47d8211cf413884189c631a12188462ba25500fa51c897318975?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sambit Pattanayak"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/sambit-p819\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/93440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/71"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=93440"}],"version-history":[{"count":1,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/93440\/revisions"}],"predecessor-version":[{"id":93449,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/93440\/revisions\/93449"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/43102"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=93440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=93440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=93440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}