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.
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>
<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>
RECOMMENDED: Event Handling in JQuery - The definitive guide
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.
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>
<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>
RECOMMENDED: Traversing DOM Element with the help of jQuery
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.
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>
<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>
RECOMMENDED: An Introduction to jQuery
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.
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>
<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.
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>
<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.
RECOMMENDED Post: The Regular Expressions Method in JavaScript
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.
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>
<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.
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.