Friday, May 8, 2020

JQuery Event Manipulation Methods



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

bind(type, [data], fn) Method

bind(type, [data], fn) method binds a handler to one or more events (like click) for each matched element. This method can also be used to bind custom events.   

Possible event values - blur, focus, load, resize, scroll, click, unload, etc.  

Syntax

Below is the syntax to use this method -

selector.bind( type, [data], fn )

Parameter Details

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

  • type - One or more event types separated by a space.
  • data - This is an optional parameter and does represents additional data passed to the event handler as event.data.
  • fn - A function to bind to the event on each of the set of matched elements.

Example

The following example below shows a simple usage of this method. Here it binds click event with each <div> element -

<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' ).bind( 'click',   function( event )  {
                         alert( "Hello World!" );
                    } );
               } );
          </script>

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

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

          <div  class = "div"  style = "background-color: yellow;"></div>
          <div  class = "div"  style = "background-color: blue;"></div>
          <div  class = "div"  style = "background-color: green;"></div>
     </body>
</html>

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



off( ) Method

The off( events [, selector] [, handler ( eventObject ) ] ) method does the opposite of on() method, it removes a bound live event.        

Syntax

Below is the syntax to use this method -

selector.on( event,  selector,  handler )

Parameter Details

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

  • events - Event types separated by spaces. 
  • selector - A Selector String. 
  • handler  - A function to bind to the event on each of the set of matched elements.

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( )  {
                    
                    function  aClick( )  {
                         $( "div" ).show( ).fadeOut( "slow" );
                    }

                    $( "#bind" ).click( function( )  {
                         $( "#theone" ).on( "click" ,   aClick ).text( "Can Click!" );
                    } );

                    $( "#unbind" ).click( function( )  {
                         $( "#theone" ).off( "click" ,   aClick ).text( "Does nothing..." );
                    } );
  
               } );
          </script>

          <style>
               button { margin: 4px; }
               button#theone { color: green;   background: yellow; } 
          </style>
     </head>

     <body>
          <p>Click on any of the buttons below to see the result:</p>

          <button  id ="theone ">Does nothing.......</button>
          <button  id = "bind">Bind Click</button>
          <button  id = "unbind">Unbind Click</button>
     </body>
</html>

Output

Below is the output of the above example -

jQuery Example Click on any of the buttons below to see the result:




hover(over,  out) Method

hover(over, out) method simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.  

Syntax

Below is the syntax to use this method -

selector.hover( over,  out )

Parameter Details

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

  • over - The callback function to fire when the mouse is moved over a matched element. 
  • out - The callback function to fire when the mouse is moved off the matched elements.

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' ).hover( 

                         function( )  {
                              $( this ).css( { "background-color" : "blue" } );
                         },
                         function( )  {
                              $( this ).css( { "background-color" : "yellow" } );
                         }
                    );
               } );
          </script>

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

     <body>
          <p>Click on any of the square below to see the result:</p>

          <div  class = "div"  style = "background-color: yellow;"></div>
          <div  class = "div"  style = "background-color: yellow;"></div>
          <div  class = "div"  style = "background-color: yellow;"></div>
     </body>
</html>

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


on(events[, selector] [, data], handler) Method

on(events[, selector] [, data], handler) method binds a handler to an event (like click) for all  the current and future matched elements. This can also bind custom events.

Possible event values  - focus, blur, load, resize, click, scroll, unload etc.

Syntax

Below is the syntax to use this method -

selector.on( event,  selector,  data,  handler )

Parameter Details

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

  • event- Event types separated by spaces.
  • selector - A Selector String.
  • data - Data to be passed to the event handler in event.data
  • handler - A function to bind to the event on each of the set of matched elements.

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' ).on( 'click' ,   function( event )  {
                         alert( 'Hello World!' );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any of the square below to see the result:</p>

          <div  class = "div"  style = "background-color: yellow;"></div>
          <div  class = "div"  style = "background-color: blue;"></div>
          <div  class = "div"  style = "background-color: green;"></div>
     </body>
</html>

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


one(type, [data], fn) Method

one(type, [data], fn) method binds a handler to one or more events to be executed once for each matched element. The handler is executed only once for each matched element. Otherwise, the same rules as described in bind() applies.

Possible event values  - focus, blur, load, resize, click, scroll, unload etc.

Syntax

Below is the syntax to use this method -

selector.one( type,  [data],  fn )

Parameter Details

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

  • type- An event type. 
  • data - This is the optional parameter and does represents additional data passed to the event handler as event.data.  
  • fn - A function to bind to the event on each of the set of matched elements.

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' ).one( 'click' ,   function( event )  {
                         alert( 'Hello World!' );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any of the square below to see the result:</p>

          <div  class = "div"  style = "background-color: yellow;"></div>
          <div  class = "div"  style = "background-color: blue;"></div>
          <div  class = "div"  style = "background-color: green;"></div>
     </body>
</html>

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


ready(fn) Method

ready(fn) method binds a function that will be executed whenever the jQuery DOM is ready to be traversed and manipulated. 

This method is a replacement for making use of window.onload 

Syntax

Below is the syntax to use this method -

selector.ready( fn )

Parameter Details

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

  • fn - A function to executed whenever the DOM is ready 

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' ).text( 'The DOM is now loaded....' ); 
               } );
          </script>

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

     <body>
          <div  class = "div"  style = "background-color: green;"></div>
     </body>
</html>

Output

Below is the output of the above example -


The DOM is now loaded....




trigger(events, [data] ) Method

The trigger( events, [data] ) method triggers an event on every matched element.

Triggered aren't limited to browser-based events and you can also trigger custom events that are registered with bind.

Syntax

Below is the syntax to use this method -

selector.trigger( event,  [data] )

Parameter Details

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

  • event- Event types separated by spaces.
  • data - An optional parameter and represents additional data to pass as argument (after the event object) to the event handler.

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( )  {
                    
                    $( "#div1" ).click( function( )  {
                         $( "#div2" ).trigger( 'click' );
                    } );

                    $( "#div2" ).click( function( ) {
                         alert( "Second Box is clicked" );
                    } );
               } );
          </script>

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

     <body>
          <p>Click on any of the square below to see the result:</p>

          <div  id = "div1"  style = "background-color: yellow;">ONE</div>
          <div  id = "div2"  style = "background-color: yellow;">TWO</div>
     </body>
</html>

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


triggerHandler( ) Method

The triggerHandler( events, [data] ) triggers all bound event handlers on an element (for a specific event type) without executing the web browser's default actions, bubbling or live event.

This method behaves similarly to the trigger method, with two major exceptions -

  • First - No default browser actions are triggered, the triggered event does not bubble, and as well live events aren't triggered.
  • Second - The event is only triggered on the first element within the jQuery collection.

This method will return the return value of the triggered handler instead of a chainable jQuery object. 

Syntax

Below is the syntax to use this method -

selector.triggerHandler( event,  [data] )

Parameter Details

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

  • event- Event types separated by spaces.
  • data - An optional parameter and represents additional data to pass as argument (after the event object) to the event handler.

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( )  {
                    
                    $( "#old" ).click( function( )  {
                         $( "input" ).trigger( "focus" );
                    } );

                    $( "#new" ).click( function( ) {
                         $( "input" ).triggerHandler( "focus" );
                    } );

                    $( "input" ).focus( function( ) {
                         $( "<span>Focused!</span>" ).appendTo( "body" ).fadeOut( 1000 );
                    } );
               } );
          </script>
     </head>

     <body>
          <button  id = "old">.trigger( "focus" )</button>
          <button  id = "new">.triggerHandler( "focus" )</button><br /><br />

          <input  type = "text"  value = "To Be Focused" />
     </body>
</html>

Output

Below is the output of the above example -

jQuery Example






unbind([type], [fn]) Method
unbind([type], [fn]) method does the opposite of bind, it removes bound events from each of the matched elements.       

Syntax
Below is the syntax to use this method -

selector.unbind( [type], [fn] )

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

  • type - Event types separated by spaces. 
  • fn - A function to unbind from the event on each of the set of matched elements. 

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( )  {
                    
                    function  aClick( )  {
                         $( "div" ).show( ).fadeOut( "slow" );
                    }

                    $( "#bind" ).click( function( )  {
                         $( "#theone" ).click( aClick ).text( "Can Click!" );
                    } );

                    $( "#unbind" ).click( function( )  {
                         $( "#theone" ).unbind( "click" ,   aClick ).text( "Does nothing..." );
                    } );
  
               } );
          </script>

          <style>
               button { margin: 4px; }
               button#theone { color: green;   background: yellow; } 
          </style>
     </head>

     <body>
          <p>Click on any of the buttons below to see the result:</p>

          <button  id ="theone ">Does nothing.......</button>
          <button  id = "bind">Bind Click</button>
          <button  id = "unbind">Unbind Click</button>
     </body>
</html>

Output
Below is the output of the above example -

jQuery Example Click on any of the buttons below to see the result:



Alright guys! We have come to the end of this tutorial. In my next tutorial, i will be discussing about Ajax in jQuery. Ajax is a full course on its own which will discussed in this blog very soon.

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.
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.