InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Javascript

    Javascript strings

    • Javascript - check if string is number
    • Javascript - parseInt
    • string ends with check
    • string starts with check

    Javascript Array

    • array forEach
    • array append item
    • array remove last item
    • array prepend item
    • array remove first item
    • create array from 0 to N-1
    • convert array to json string

    Javascript control flow

    • for-in loop to iterate over keys of javascript object

    Javascript DOM

    • Javascript - DOM appendChild example
    • Javascript - get computed style of an element
    • Javascript - how to view text inside DOM element
    • Javascript - img onload examples
    • Javascript - ready vs on load event handler example
    • Javascript - use querySelector to set dom element html
    • Javascript DOMContentLoaded listener example
    • Javascript event bubble vs capture
    • Javascript how to stop event propagation
    • Javascript onscroll event handler
    • Javascript onscroll event handler with throttling
    • Make an element draggable using Vanilla Javascript
    • Multiple onload handlers using vanilla Javascipt
    • Use universal selector to get all DOM nodes in vanilla Javascript
    • document querySelector examples
    • dump all handlers on window object

    Javascript Cookbook

    • Are Javascript functions objects?
    • Declare and invoke anonymous function
    • HTML5 drag and drop
    • JSLint on command line on Ubuntu
    • Javascript - call vs apply
    • Javascript - implement class using function
    • Javascript - iterate over function arguments
    • Javascript - print all methods of an object
    • Javascript - run a function at regular interval
    • Javascript - textarea and text input select all
    • Javascript arrow function examples
    • Javascript check if variable is defined
    • Javascript local and global variables
    • Javascript parse json string
    • Javascript prototype examples
    • Javascript settimeout example
    • Javascript sleep implementation
    • Requirejs - quickstart guide for beginners
    • catch errors using window.onerror
    • print javascript object to log

    Javascript libraries

    • AngularJS
    • CasperJS
    • PhantomJS
    • React
    • jQuery

    Javascript global functions

    • Javascript - Number function
     
    • Home
    • > Tutorials
    • > Javascript

    Javascript event bubble vs capture

    on Feb 16, 2016

    Javascript/HTML events can propagate in two ways in DOM API. This is relevant when more than one element are listening on same event.

    Event propagation type How it works
    Event bubbling (default) Here event is handled by inner most element first. then it bubbles up.
    Event capturing or trickling down Here event is handled by outermost element first and the it trickles down

    Usage of addEventListener:

    ## For bubbling up: useCapture=false (default)
    ## For trickling down: useCapture=true
    target.addEventListener(type, listener[, useCapture]);
    

    Javascript event bubbling up example

    Here outer and inner div both listening to click event. Since we are using useCapture=false, event will be handled by inner div and then bubble up. Note that we could also have skipped useCapture as the default value is false. Here is the screenshot of outcome after the click.
    javascript-event-bubble-example

    <div class="outer"><div class="inner">click here</div></div>
    <div id="msg"></div>
    
    <script type="text/javascript">
    document.querySelector("div.outer").addEventListener("click", outer_click, false);
    document.querySelector("div.inner").addEventListener("click", inner_click, false);
    function outer_click(e) {
      document.querySelector("#msg").innerHTML += "In outer_click<br/>";
    }
    function inner_click(e) {
      document.querySelector("#msg").innerHTML += "In inner_click<br/>";
    }
    </script>
    refresh done
    try it online

    Javascript event tricking down example

    Here outer and inner div both listening to click event. Since we are using useCapture=true, event will be handled by outer div and then trickle down. Here is the screenshot of outcome after the click.
    javascript-event-capture-example

    <div class="outer"><div class="inner">click here</div></div>
    <div id="msg"></div>
    
    <script type="text/javascript">
    document.querySelector("div.outer").addEventListener("click", outer_click, true);
    document.querySelector("div.inner").addEventListener("click", inner_click, true);
    function outer_click(e) {
      document.querySelector("#msg").innerHTML += "In outer_click<br/>";
    }
    function inner_click(e) {
      document.querySelector("#msg").innerHTML += "In inner_click<br/>";
    }
    </script>
    refresh done
    try it online

    Suggested posts:

    1. Javascript how to stop event propagation
    2. Make an element draggable using Vanilla Javascript
    3. Javascript onscroll event handler
    4. view event handlers in Chrome
    5. Javascript onscroll event handler with throttling
    6. Javascript – catch errors using window.onerror
    7. How to trigger click using jQuery or Javascript
    8. Javascript – ready vs on load event handler example
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged Javascript, Javascript DOM, Tutorials, Web Development

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2022 InfoHeap.

    Powered by WordPress