JQuery Event Manipulation Methods



Hello dear readers! Welcome back to another edition of our tutorial on jQuery. In this tutorial, we will 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 of the matched element. This method can also be used to bind custom events.

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

Syntax

The following 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 - This is one or more event types separated by a space.
  • data - This is an optional parameter which 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

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 jQuery off(events [, selector] [, handler (eventObject) ] ) method does the opposite of on() method, it removes a bound live event.

Syntax

The following 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 - It is the event type separated by spaces.
  • selector - A Selector String.
  • handler - A function to bind to the event on each of the set of matched elements.

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( )  {
                    
                    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, or off an object). This is a custom method which provides an 'in' to a frequent task.

Syntax

The following 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- Callback function to fire when the mouse is moved over a matched element.
  • out - Callback function to fire when the mouse is moved off the matched elements.

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

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

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

Syntax

The following 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 - The data to be passed to the event handler in the event data
  • handler - A function to bind to the event on each of the set of matched elements.

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' ).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 of the matched element. The handler is executed only once for each of the matched element. Otherwise, the same rules as described in bind() applies.

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

Syntax

The following 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 an optional parameter which 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

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 which will be executed whenever the jQuery DOM is ready to be traversed and manipulated.

This method is a replacement for using window.onload

Syntax

The following 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 execute whenever the DOM is ready

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' ).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 all matched elements.

Trigger is not limited to browser-based events, you can also trigger custom events that are registered with bind.

Syntax

The following 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 - This is an optional parameter which represents additional data to pass as an argument (after the event object) to the event handler.

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( )  {
                    
                    $( "#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 action is triggered, triggered event does not bubble, and also the live events are not triggered.
  • Second - The event is only triggered on the first element within the jQuery collection.

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

Syntax

The following 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 - This is an optional parameter which represents additional data to pass as an argument (after the event object) to the event handler.

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( )  {
                    
                    $( "#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
JQuery unbind([type], [fn]) method does the opposite of bind method. This removes bound events from each of the matched elements.

Syntax
The following 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 - The function to unbind from the event on each set of matched elements.

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( )  {
                    
                    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 on jQuery Event Manipulation Methods. In our next tutorial post, we will be discussing about Ajax in jQuery. Ajax is a full course on its own which is going to be 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.