Welcome Guest! (App Version 3.1)

websitnero logo name

Event Bubbling

Event Bubbling

Event Bubbling is related to event actions being activated on different html elements in a certain order. Suppose you have a div and inside it there is a button. Clicking button not only triggers Click Event on the button but also to elements that are parent to it. In our case the div that contains the button and then body. The event propagates to the top of dom tree, meaning event the event is triggered on html element and if any alert or script is written for it related to 'click of html element', that too will be triggered.

So, if you think that clicking an element only triggers an event on that element only, you were in an illusion till now. The event always propagates adding event to all the parent elements for a certain node element, till it reaches the top of Dom Tree, ie, Document Root Object.

Similar is the case for all events, not only click. The events of hover, onmouseover, onmouseout, etc. all will behave in the same way as explained above.

Example

<head>
<style>
  body{background:yellow;padding:20px;}
  div{background:pink;padding:20px}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head>

<body>

<div>
  <button>Click Me</button> 
</div>

<script>
$('button').click(function(){
  alert("Button is clicked!");
});

$('div').click(function(){
  alert("Div is clicked!");
});

$('body').click(function(){
  alert("Body is clicked!");
});
</script>

</body>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.