Introduction
Imagine you're building a complex web application. Pre-built events like "click" and "submit" are great, but what if you need something more specific? This is where custom events come in - a way for your JavaScript code to create and fire its own events, allowing for more nuanced communication between different parts of your application.
Understanding Events in JavaScript
Before diving into custom events, let's first grasp the concept of events in JavaScript. Events are actions or occurrences that happen in the browser, triggered by either user interaction (like clicks, mouse movements, or keyboard inputs) or by the browser itself (like page load, resize, etc.). JavaScript provides a robust event handling mechanism to capture and respond to these events.
Why Custom Events?
While built-in events handle common interactions, custom events offer advantages:
Specificity: They signal unique actions within your application. Imagine an "itemAdded" event for a shopping cart or a "levelCompleted" event in a game.
Decoupling: Code that creates events (like a form submission) is separate from code that listens for them (like updating a progress bar). This improves code maintainability.
Data Transfer: You can attach custom data to events using the detail property, allowing informative messages to be passed along.
Built-in vs. Custom Events
JavaScript comes with a set of built-in events that cover common interactions. However, there are scenarios where these predefined events might not suffice. This is where custom events come into play. Custom events enable developers to define their own event types, extending the capabilities of event-driven programming in JavaScript.
Creating a custom event involves a few key steps
- Event Initialization: First, we need to initialize a new custom event using the CustomEvent constructor. This constructor takes two parameters: the event type and an optional object containing any additional data to be passed along with the event.
// Create a new custom event
const customEvent = new CustomEvent('customEventType', {
detail: { key: 'value' } // Optional additional data
});
- Dispatching the Event: Once the custom event is initialized, we can dispatch it on a specific DOM element using the dispatchEvent() method.
// Dispatch the custom event on a DOM element
document.dispatchEvent(customEvent);
- Subscribing to Custom Events: To respond to custom events, we need to add event listeners to the target elements. Event listeners "listen" for a specific event type and execute a function when that event occurs.
// Add an event listener for the custom event
document.addEventListener('customEventType', function(event) {
// Event handling logic here
console.log('Custom event triggered with data:', event.detail);
});
Practical Example: Custom textSelect Event
Let's illustrate the concept of custom events with a practical example. Suppose we have a text in our web application. We can create custom events which fires whenever the user makes a selection of our text in our web app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Selection Event</title>
</head>
<body>
<p>Select some text in this paragraph to trigger the event.</p>
<script>
// Event Initialization: Listen for selection changes
document.addEventListener('selectionchange', function() {
const selection = window.getSelection().toString();
if (selection) {
// Dispatching the Event: Dispatch custom event with selected text
document.dispatchEvent(new CustomEvent('textSelect', { detail: { selectedText: selection } }));
}
});
// Subscribing to Custom Events: Subscribe to the textSelect event
document.addEventListener('textSelect', function(event) {
// Log the selected text to the console
console.log('Selected text:', event.detail.selectedText);
});
</script>
</body>
</html>
So, copy this code and run the live server in your code editor. And in the local server open up your developer tools and that should look something like this -
So, when I've tried to select the text by double clicking on this, our custom event triggered and you can see the log in the developer tools right side.
Hurray!🥳 You've created your first custom event. Now go forth and build something amazing!
Conclusion
While JavaScript doesn't natively support a textSelect event, we can simulate it by combining existing events and JavaScript logic. By creating a custom textSelect event, we open up possibilities for enhancing interactivity and providing richer user experiences on the web. Whether it's highlighting selected text, triggering actions, or gathering insights, the textSelect event can be a valuable addition to your toolkit as a web developer. Happy coding!
If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, MongoDB & Web Development.
You can find me on Twitter, LinkedIn, and GitHub.
Thanks for reading🌻
Top comments (17)
Without any reference to bubbling or the ability to cancel events you could have also just called it "events". What distinguishes DOM events (i.e., in-built and custom events) from ordinary events are, however, those special abilities. So it would be great to also list them.
Thanks for the insightful perspective! You're absolutely right about the unique characteristics of DOM events, like bubbling and the ability to cancel them, setting them apart from ordinary events
Hello Madhu! This is an inspiring article, and we at Codemischief Software Solutions would love to repost it on our official page with due credits for more reach.
We are Codemischief Software Development Solutions and I am the Strategy personnel at the firm.
Would love to connect!
LinkedIn : [(linkedin.com/company/codemischief-...]
Website : [(codemischief.tech/)]
Personal : [(linkedin.com/in/manish-kadur)]
Regards,
Manish Kadur
That's amazing!!
Thank you so much for the support!, this really motivate me to do more good work :)
I have been writing JavaScript for some time now but this is the first time I am witnessing custom events. This article is so mind-blowing. JavaScript is so powerful when you know how to use it. Thanks for this.
I really appreciate your kind words <3
Thank you so much for reading :)
WOW! that is nuts and I like it. this is definitely food for thought.
I've always like the event dispatcher model (of running the queue when any JS reaches global scope).
Thank you for posting this, the ability to route events through the DOM node tree is really cool!
Thanks for reading :)
I didn't knew this was possible, thank you for writing this!
Glad you've learned something new!
Thanks for the feedback :)
Does it have to be attached to DOM node or it can be used on ordinary class?
Nope, innerText and textContent are meant for DOM nodes, not regular classes. They're perfect for updating text content in HTML elements using JavaScript.
Thanks for sharing! I like this one 👌
Glad you liked it :)
Good one.
Thanks, Bhavy!!
Thanks you!