Event Bubbling | how to create the bubbling and how to create cancel the bubbling in DHTMl in javascript

Event Bubbling is the process when the event is fired in the child element bubbled up to their parent element. When the event fire first event is delivered to the child event handler then it is delivered to the parent event handler. if you intend to handle an event in child element, you might be cancel the element the bubbling of the event in the child element in the code by using cancel the bubble property of the event object.
sourcecode
1. <html>
2. <head><title>STUDENTWEBSITE</title>
3. <script language="javascript">
4. function documentClick()
5. {
6. alert("you clicked in the document");
7. }

8. function paragraphclick( value )
9. {
10. alert("YOu are clicked here");

11. if(value)
12. {
13. alert("cacel bubble");
14. event.cancelBubble=true;
15. }
16. document.onclick=documentClick;
17. }
18. </script>
19. </head>
20. <body>
21. <p onclick="paragraphclick( false )">Click here</p>
22. <p onclick="paragraphclick( true )">Click here too</p>
23. </body>
24. </html>
And when you click – click here it will display you are click here then second dialog box it will display
Your are click in the document.
And when you click- you are click here too it will display the only one dialog box like you are click here
Second dialog box it will not display because it cancel the bubble by through passing the argument true.

When you click here line: 20 it pass the argument false

And when you click here too line: 21: it passes the argument true so in the line: 11 if condition becomes true so there even. Cancel bubble become true so it is does not perform the parent. You are click in the document

Event Bubbling  | how to create the bubbling and how to create cancel the bubbling in DHTMl in javascript


Related post