JQuery Event Methods with examples



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial guide, we are going to be discussing about the jQuery Event methods in details.

preventDefault() Method

preventDefault() method prevents the browser from executing the default action.

isDefaultPrevented method can be used to know if this method was ever called.

Syntax

The following below is the syntax to use this method -

event.preventDefault( )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

Following example below shows a simple usage of this method. This example illustrates how you can stop the browser from changing the page to href of any anchors -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "a" ).click( function( event )  {
                         event.preventDefault( );
                         alert( "Default behavior is disabled!" );
                    } );
               } );
          </script>
     </head>

     <body>
          <span>Click on the link below and it won't work:</span>
          <a  href = "https://www.google.com">Google</a>
     </body>
</html>



isDefaultPrevented() Method

The isDefaultPrevented( ) method checks if the event.preventDefault() was ever been called on this event object.

The method will return true if the preventDefault() has been called otherwise it returns false.

Syntax

The following below is the syntax to use this method -

event.isDefaultPrevented()

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

Following example below shows a simple usage of this method. This example illustrates how you can stop the browser from changing the page to href of any anchors -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "a" ).click( function( event )  {

                         if ( event.isDefaultPrevented( ) )   {
                              alert( "Default behavior is disabled -1" );
                         }  else {
                              alert( "Default behavior is enabled -1" );
                         }
                         event.preventDefault( );

                         if  ( event.isDefaultPrevented( ) )  {
                              alert( "Default behavior is disabled -2" );
                         }  else  {
                              alert( "Default behavior is enabled -2" );
                         }
                    } );
               } );
          </script>
     </head>

     <body>
          <span>Click on the link below and it won't work:</span>
          <a  href = "https://www.google.com">Google</a>
     </body>
</html>


stopPropagation( ) Method

stopPropagation( ) method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of an event.

The isPropagationStopped method can be used for knowing if this method was ever called.

Syntax

The following below is the syntax to use this method -

event.stopPropagation( )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

Following example below shows a simple usage of this method. This example illustrates how you can prevent other event handlers from being called -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( event )  {
                         alert( "This is : "  +  $( this ).text( ) );
                    } );
               } );
          </script>

          <style>
               div  { width: 100px;  margin: 10px;  padding: 10px;  border: 3px solid #666; }
          </style>
     </head>

     <body>
          <span>Click on any of the square below to see the effect:</span>

          <div  id = "div1"  style = "background-color: yellow;">
               OUTER BOX
               <div  id = "div2"   style = "background-color: blue;">
                    INNER BOX
               </div>
          </div>
     </body>
</html>



isPropagationStopped( ) Method

isPropagationStopped() method checks whether or not if the jQuery event.stopPropagation() was ever called on this event object.

This method will return true if the stopPropagation() has been called otherwise it returns false.

Syntax

The following below is the syntax to use this method -

event.isPropagationStopped( )

Parameter Details

Here is the description of all the parameters used by this methods -

  • NA.

Example

Following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( event )  {
                         alert( "This is :  "  +  $( this ).text( ) );

                         if ( event.isPropagationStopped( ) )   {
                              alert( "Event bubbling is disabled -1" );
                         }  else {
                              alert( "Event bubbling is enabled -1" );
                         }
                         event.stopPropagation( );

                         if  ( event.isPropagationStopped( ) )  {
                              alert( "Event bubbling is disabled -2" );
                         }  else  {
                              alert( "Event bubbling is enabled -2" );
                         }
                    } );
               } );
          </script>

          <style>
               div  {
                    width: 100px;  margin: 10px;  padding: 10px;  border: 3px solid  #666;
               }
          </style>
     </head>

     <body>
          <span>Click on any of the square below to see the effect:</span>

          <div  id = "div1"   style = "background-color: yellow; ">
               OUTER BOX
               <div  id = "div2"   style = "background-color: blue;">
                    INNER BOX
               </div>
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.

stopImmediatePropagation( ) Method
The stopImmediatePropagation( ) stops the rest of the handlers from being executed. This method also stops the bubbling by calling the event.stopPropagation( ) method.

isImmediatePropagationStopped can be used for knowing if this method was ever called.

Syntax
The following below is the syntax to use this method -

event.stopImmediatePropagation()

Parameter Details
Here is the description of all the parameters used by this methods -

  • NA.

Example
Following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( event )  {
                         alert( "1 - This is : "  +  $( this ).text( ) );
                    } );

                    // This will not be executed.
                    $( "div" ).click( function( event )  { 
                         alert( "2 - This is :  "  +  $( this ).text( ) );
                    } );
               } );
          </script>

          <style>
               div  { width: 100px;  margin: 10px;  padding: 10px;  border: 3px solid #666; }
          </style>
     </head>

     <body>
          <span>Click on any of the square below to see the effect:</span>

          <div  id = "div1"  style = "background-color: yellow;">
               BOX 1
          </div>

          <div  id = "div2"   style = "background-color: blue;">
               BOX 2
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.



isImmediatePropagationStopped() Method
isImmediatePropagationStopped() method checks whether the jQuery stopImmediatePropagation() was ever called on this event object.

The method will return true if the stopImmediatePropagation() have been called, otherwise false.

Syntax
The following below is the syntax to use this method -

event.isImmediatePropagationStopped()

Parameter Details
Here is the description of all the parameters used by this methods -

  • NA.

Example
Following example below shows a simple usage of this method -

<html>
     <head>
          <title>jQuery Example</title>
          <script  type = "text/javascript"   
               src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">               
          </script>  

          <script  type = "text/javascript">
               $( document ).ready( function( )  {
                    $( "div" ).click( function( event )  {

                         if ( event.isImmediatePropagationStopped( ) )   {
                              alert( "Event bubbling is disabled -1" );
                         }  else {
                              alert( "Event bubbling is enabled -1" );
                         }
                         event.stopImmediatePropagation( );

                         if  ( event.isImmediatePropagationStopped( ) )  {
                              alert( "Event bubbling is disabled -2" );
                         }  else  {
                              alert( "Event bubbling is enabled -2" );
                         }
                    } );
               } );
          </script>

          <style>
               div  {
                    width: 100px;  margin: 10px;  padding: 10px;  border: 3px solid  #666;
               }
          </style>
     </head>

     <body>
          <span>Click on any of the square below to see the effect:</span>

          <div  id = "div1"   style = "background-color: yellow; ">
               BOX 1
          </div>
               
          <div  id = "div2"   style = "background-color: blue;">
               Box 2
          </div>
     </body>
</html>

You can try the above code out to see the result for yourselves.

Alright guys! We have come to the end of this tutorial on jQuery Event Methods. In our next tutorial, we will be discussing about the jQuery Event Manipulation Methods.

Follow us on our various social media handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.

Thanks for reading and bye for now.