Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to implement custom events in jQuery?
Custom events in jQuery allow you to create your own events beyond the standard DOM events like click, hover, or keyup. This powerful feature enables you to build more modular and maintainable code by creating events that are specific to your application's needs.
To implement custom events, you use two main jQuery methods: bind() or on() to attach event handlers, and trigger() to fire the custom event. The custom event can be given any name and can carry additional data when triggered.
Example
The following example demonstrates how to create a custom event called enterKey that triggers when the Enter key is pressed in a textarea ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('textarea').bind("enterKey", function(e){
alert("You have pressed Enter key!");
});
$('textarea').keyup(function(e){
if(e.keyCode == 13) {
$(this).trigger("enterKey");
}
});
});
</script>
</head>
<body>
<textarea rows="2" cols="20"></textarea>
</body>
</html>
In this example, we first bind a custom event handler called enterKey to the textarea element. Then, we listen for the keyup event and check if the pressed key code is 13 (Enter key). When the Enter key is detected, we trigger our custom enterKey event using the trigger() method.
When you type in the textarea and press Enter, an alert box will appear displaying "You have pressed Enter key!" message.
Conclusion
Custom events in jQuery provide a flexible way to create application-specific events that can help organize your code better and create reusable event handlers for complex user interactions.
1K+ Views
