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.
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>
<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.
RECOMMENDED Post: JQuery Event Methods with examples
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>
<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 -
RECOMMENDED: Event Handling in JQuery - The definitive guide
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>
<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.
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>
<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.
RECOMMENDED: Traversing DOM Elements with the help of JQuery
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.
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>
<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
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>
<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....
RECOMMENDED Post: The Complete List of Selectors in jQuery
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.
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>
<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 -
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>
<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 -
RECOMMENDED: The Practical Guide to jQuery Attribute Methods
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>
<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 -
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.
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.