Reader Level:
Articles

JQuery Event Propagation

By Sateesh Arveti on March 19, 2010
In previous article, we looked into events present in JQuery. In this article, we will cover JQuery event propagation followed by firing events like button click through code.
  • 0
  • 0
  • 13823

In previous article, we looked into events present in JQuery. In this article, we will cover JQuery event propagation followed by firing events like button click through code. JQuery supports event bubbling. It means, when an event is fired on a child element. It will get propagate to its parents for handling by them as shown below:
 
In below HTML, when you click the button, it will fire click event of button as well as div element.
 
<html>
  <head>
    <title>JQuery Sample HTML Page</title>
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myButton').click(function(){alert('Button clicked');});
$('#myDiv').click(function(){alert('div clicked');});
});
</script>
  </head>
  <body>
<div id='myDiv'>
<input type="button" value="My Button" id="myButton"/>
</div>
  </body>
</html> 

We are not interested in firing click event of parent element [div]. We can rewrite above code to avoid event propagation as shown below:
 
$(document).ready(function() {
$('#myButton').click(function(){alert('Button clicked');});
$('#myDiv').click(function(event){if(event.target==this)alert('div clicked');});
});
 
We can check for event's target property before executing the code to avoid propagation. The other way to stop event propagation using event.stopPropagation() is shown below:
 
$(document).ready(function() {
$('#myButton').click(function(event){alert('Button clicked');event.stopPropagation();});
$('#myDiv').click(function(){alert('div clicked');});
}); 
 
Now, we will look into firing an event through code. In certain cases, we might need to fire button click event through code. This can be done using below code:

$('#myButton').click();// Executes code associated with myButton click event.


(or)
 
$('#myButton').trigger('click');
 
Tip:  We can write $(document).ready(function() {}) in shortcut as shown below:
 
$().ready(function()  {
.........
});
(or)
$(function() {
.........
});
 
I am ending the things here. In next article, we will discuss about Effects available in JQuery. I hope this article will be helpful for all.

Sateesh Arveti

I hold Bachelors degree in Computer Science along with MCSD,MCTS and MVP for the year 2009. Areas of Interest: C#, WPF, WF, silverlight, ASP.NET, Oracle and SQL Server.

COMMENT USING

Trending up