Event Bubbling

When any event of a DOM element fire then it automaticly fired same event of it parent DOM elemetn, this is called event bubbling

In below example when you click on button then automaticly its parent element's click event will be fired. You can stop event bubbling by using stopPropagation method.

To know more about stopPropagation, Click here.

CODE
<!DOCTYPE html>
<html>
<head>
  <title>Event Bubbling</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function () {
          $('#divParent').click(function (e) {
              alert('Parent div click event fired');
          });

          $('#divChild').click(function (e) {
              alert('Child div click event fired');
          });

          $('#btnClick').click(function (e) {
              alert('Button click event fired');
          });

      });
  </script>
</head>
<body>
  <div id="divParent" style="border:1px solid Red; width:300px;height:200px;margin:10px;">
    This is parent div
    <div id="divChild" style="border:1px solid green; width:200px;height:100px;margin:10px;">
      This is child div<br>
      <button id="btnClick">Click Me</button>
    </div>
  </div>
</body>
</html>
DISPLAY
This is parent div
This is child div

No comments :

Please Give Your Feedback