{"id":2975,"date":"2017-07-21T23:30:48","date_gmt":"2017-07-21T18:00:48","guid":{"rendered":"https:\/\/code4developers.com\/?p=2975"},"modified":"2020-06-16T18:37:29","modified_gmt":"2020-06-16T13:07:29","slug":"event-capturing-bubbling-javascript","status":"publish","type":"post","link":"https:\/\/code4developers.com\/event-capturing-bubbling-javascript\/","title":{"rendered":"Event Capturing and Bubbling in JavaScript"},"content":{"rendered":"

The DOM has two approaches for object to sense events: first is top down approach<\/strong> and second is bottom up approach. <\/strong>Top down approach is called event capturing<\/strong>\u00a0whereas bottom up is known as event bubbling.<\/strong><\/p>\n

Let\u2019s start with example where you have one html which contains <div>, <p> under <div>, and <input> under <p><\/p>\n

By doing this you will have below ready code<\/p>\n

<html>\r\n    <head>\r\n    <\/head>\r\n    <body>\r\n        <div id='divMain'>\r\n            <p id='pMain'>\r\n                <input id='btnClick' type='button' value='Click!'\/>\r\n            <\/p>\r\n        <\/div>\r\n    <\/body>\r\n<\/html><\/pre>\n
Event Capturing<\/strong><\/h3>\n
To understand what is event capturing add event listener to document, div, p, and input, also create functions for each listener. By doing this you will have below code<\/p>\n
<html>\r\n    <head>\r\n    <\/head>\r\n    <body>\r\n        <div id='divMain'>\r\n            <p id='pMain'>\r\n                <input id='btnClick' type='button' value='Click!'\/>\r\n            <\/p>\r\n        <\/div>\r\n        <script>\r\n            document.addEventListener('click', documentClick, true);\r\n            document.getElementById('btnClick').addEventListener('click', btnClick, true);\r\n            document.getElementById('pMain').addEventListener('click', pMainClick, true);\r\n            document.getElementById('divMain').addEventListener('click', divMainClick, true);\r\n\r\n            function documentClick(){\r\n                console.log('Document clicked');               \r\n            }\r\n\r\n            function btnClick(){\r\n                console.log('Button clicked');\r\n            }\r\n\r\n            function pMainClick(){\r\n                console.log('Main paragraph clicked');\r\n            }\r\n\r\n            function divMainClick(){\r\n                console.log('Main div clicked');\r\n            }\r\n        <\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
addEventListener() function have two mandatory parameters \u201cevent\u201d and \u201cfunction\u201d and one optional parameter \u201cuseCapture<\/strong>\u201d.<\/p>\n
useCapture<\/strong> has two possible values \u201ctrue\u201d and \u201cfalse\u201d. If \u201ctrue\u201d is set, then the event handler will execute in the capturing phase<\/strong><\/p>\n
So as written code if we click on button then output will be as below<\/p>\n
\"ECOutput\"<\/p>\n
In this case even though we are clicking button, it is calling document first and button at last. As written in introduction Event Capturing is like Top Down approach, that is why it is calling click event of document first and button at last in sequence.<\/p>\n
\"Event<\/p>\n
Event Bubbling<\/strong><\/h3>\n
Event bubbling is bottom up approach, so sequence of calling event is as below<\/p>\n
\"Event<\/p>\n
In this case, click event of button will be called first and document at last in sequence. In addEventListener() function\u00a0if \u201cfalse\u201d is set for useCapture parameter, then the event handler will execute in the bubbling phase.<\/strong><\/p>\n
To achieve this, we are using same example as event capturing, and code for it will be as below.<\/p>\n
<html>\r\n    <head>\r\n    <\/head>\r\n    <body>\r\n        <div id='divMain'>\r\n            <p id='pMain'>\r\n                <input id='btnClick' type='button' value='Click!'\/>\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <script>\r\n            document.addEventListener('click', documentClick, false);\r\n            document.getElementById('btnClick').addEventListener('click', btnClick, false);\r\n            document.getElementById('pMain').addEventListener('click', pMainClick, false);\r\n            document.getElementById('divMain').addEventListener('click', divMainClick, false);\r\n\r\n            function documentClick(){\r\n                console.log('Document clicked');               \r\n            }\r\n\r\n            function btnClick(){\r\n                console.log('Button clicked');\r\n            }\r\n\r\n            function pMainClick(){\r\n                console.log('Main paragraph clicked');\r\n            }\r\n\r\n            function divMainClick(){\r\n                console.log('Main div clicked');\r\n            }\r\n        <\/script>\r\n    <\/body>\r\n<\/html><\/pre>\n
Here we are passing \u201cfalse\u201d as \u201cuseCapture<\/strong>\u201d parameter in addEventListener(), this will allow you change event calling flow in bottom up approach.<\/p>\n
Output for above code will be<\/p>\n
\"EBOutput\"<\/p>\n
 <\/p>\n
CLICK HERE<\/a><\/strong> to read more articles on JavaScript<\/p>\n","protected":false},"excerpt":{"rendered":"
The DOM has two approaches for object to sense events: first is top down approach and second is bottom up approach. Top down approach is called event capturing\u00a0whereas bottom up…<\/p>\n","protected":false},"author":4,"featured_media":3127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[43,22],"powerkit_post_featured":[],"class_list":{"0":"post-2975","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-event-handling","9":"tag-javascript"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-LZ","jetpack-related-posts":[{"id":3468,"url":"https:\/\/code4developers.com\/event-delegation-javascript\/","url_meta":{"origin":2975,"position":0},"title":"Event Delegation in JavaScript","author":"Yatendrasinh Joddha","date":"April 19, 2018","format":false,"excerpt":"Event delegation is a pattern of adding an event listener to a parent node instead, of adding an event listener to the individual node. The added event listener will check for the bubbled event to find matching child element. In this article we will talk about how to implement an\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3194,"url":"https:\/\/code4developers.com\/react-hello-world-and-jsx\/","url_meta":{"origin":2975,"position":1},"title":"React: Hello World and JSX","author":"Arif Khoja","date":"January 8, 2018","format":false,"excerpt":"This is a typical Hello World implementation in React in JSX file. It shows one of two ways you can write components, and how you pass data to a components. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return (\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3489,"url":"https:\/\/code4developers.com\/automatic-bootstrapping-and-manual-bootstrapping-multiple-modules-in-angularjs\/","url_meta":{"origin":2975,"position":2},"title":"Bootstrapping multiple modules in AngularJS","author":"Arif Khoja","date":"April 26, 2018","format":false,"excerpt":"In this article we will be\u00a0Understanding AngularJS Bootstrap Process talking about automatic\u00a0Bootstrapping and manual Bootstrapping multiple modules in AngularJS. Angular initiates automatically upon [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]DOMContentLoaded[\/marker] event or when the angular.js script is downloaded to the browser and the [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]document.readyState[\/marker] is set to [marker color=\"#dbdbdb\" textcolor=\"#1e73be\"]complete[\/marker]. At this\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2873,"url":"https:\/\/code4developers.com\/custom-observable-knockout-js\/","url_meta":{"origin":2975,"position":3},"title":"Custom Observable in Knockout JS","author":"Yatendrasinh Joddha","date":"July 8, 2017","format":false,"excerpt":"Knockout JS is famous and widely used for its two-way binding concept. While developing application we uses ko.observable() to declare a knockout object. Here we will discuss how to create our own custom observable which will work same as observable but with our own functionality. Why it is required to\u2026","rel":"","context":"In "Knockout"","block_context":{"text":"Knockout","link":"https:\/\/code4developers.com\/category\/knockout\/"},"img":{"alt_text":"String","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/07\/1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3063,"url":"https:\/\/code4developers.com\/advanced-css-tricks-and-techniques\/","url_meta":{"origin":2975,"position":4},"title":"Advanced CSS Tricks and Techniques","author":"Arif Khoja","date":"August 9, 2017","format":false,"excerpt":"A wonderful collection of some bleeding edge CSS techniques for you to try out. Some of these might not be fully supported, so use in production at your peril! As time goes by, CSS is becoming more and more powerful. Nowadays, it allows a lot of possibilities. This article is\u2026","rel":"","context":"In "HTML\/Stylesheet"","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/08\/css_image.png?fit=384%2C384&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3818,"url":"https:\/\/code4developers.com\/slicepipe-jsonpipe-asyncpipe\/","url_meta":{"origin":2975,"position":5},"title":"Pipes in Angular Part \u2013 4 : SlicePipe, JSONPipe, AsyncPipe","author":"Yatendrasinh Joddha","date":"August 19, 2018","format":false,"excerpt":"Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2975"}],"version-history":[{"count":6,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2975\/revisions"}],"predecessor-version":[{"id":7068,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2975\/revisions\/7068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2975"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}