Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Events

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Event Bubbling - JavaScript(Js)

Event bubbling is the process by which events fired in child elements “bubble” up to their parent elements.

Event Bubbling

 

Event bubbling is the process by which events fired in child elements “bubble” up to their parent elements. When an event is fired on an element, it is first delivered to the element’s event handler (if any), then to the parent element’s event handler (if any). This might re-sult in event handling that was not intended. If you intend to handle an event in a child element alone, you should cancel the bubbling of the event in the child element’s event-handling code by using the cancelBubble property of the event object, as shown in Fig. 13.8.

 

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 13.8: bubbling.html -->

 

      <!-- Canceling event bubbling. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Event Bubbling</title>

 

        <script type = "text/javascript">

        function documentClick()

        {

        alert( "You clicked in the document." );

 

        } // end function documentClick

        function bubble( e )

{

if ( !e )

var e = window.event;

 

alert( "This will bubble." );

        e.cancelBubble = false;

 

        } // end function bubble

 

        function noBubble( e )

{

if ( !e )

var e = window.event;

 

alert( "This will not bubble." );

        e.cancelBubble = true;

 

        } // end function noBubble

 

        function registerEvents()

{

document.onclick = documentClick;

document.getElementById( "bubble" ).onclick = bubble;

        document.getElementById( "noBubble" ).onclick = noBubble;

 

        } // end function registerEvents

        // -->

 

        </script>

 

        </head>

 

        <body onload = "registerEvents()">

 

        <p id = "bubble">Bubbling enabled.</p>

 

        <p id = "noBubble">Bubbling disabled.</p>

 

        </body>

 

</html>




Fig. 13.8 | Canceling event bubbling.

 

Clicking the first p element (line 45) triggers a call to bubble. Then, because line 37 registers the document’s onclick event, documentClick is also called. This occurs because the onclick event bubbles up to the document. This is probably not the desired result. Clicking the second p element (line 46) calls noBubble, which disables the event bubbling for this event by setting the cancelBubble property of the event object to true. [Note: The default value of cancelBubble is false, so the statement in line 23 is unnecessary.]


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.