Thursday, May 7, 2020

JQuery Event Methods with examples



Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial, am going to be discussing about the jQuery Event methods in details with few examples.

While going through this tutorial guide, ask as much questions as you can in areas that you do not understand properly.

preventDefault(  ) Method

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

You can use the isDefaultPrevented method to know if this method was ever called. 

Syntax

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

The following example below shows a simple usage of this method. This example illustrates how you can stop the browser from changing the page to the 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 called on this event object.

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

Syntax

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

The following example below shows a simple usage of this method. This example illustrates how you can stop the browser from changing the page to the 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. 

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

Syntax

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

The 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

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

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

Syntax

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

The 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( ) method 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 to know if this method was ever called. 

Syntax
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
The 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 or not  if the jQuery stopImmediatePropagation() was ever called on this event object.

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

Syntax
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
The 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 guide on the jQuery event methods. In my next tutorial, i will be rounding up on event methods. Am going to be discussing about the event manipulation methods in my tutorial.

Feel free to ask your questions where necessary and your questions will be attended to as soon as possible.

Follow us on our various social media handles (facebook, twitter, instagram, Pinterest). Also do subscribe to our newsletter to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.