In a previous article, I wrote about the handleEvent() method for working with event listeners in Web Components.
Today, let's look at how we can use that to easily handle multiple event types.
By the way, if you're finding this series interesting, I'm working on a Web Components workshop. If you preorder it today, you'll get $100 off the price.
Alright, let's dig in!
A sample Web Component
Let's imagine we have a <mirror-type> Web Component. Inside it, there's an <input> and a <button>.
When the user types in the <input>, we want to display what they've typed in a div (that we'll inject when our Web Component loads). When they press the <button>, we want to clear the input and the displayed text.
<mirror-type> <label for="msg">Type some stuff</label> <input type="text" id="msg"> <button>Clear</button> </mirror-type>
Creating the Web Component
Let's start by creating our custom Web Component.
We'll define this.input and this.button properties for our existing HTML. We'll also create a this.mirror element and inject it into the DOM.
(If you're not sure what's happening here, I'd recommend reading your first Web Component as a primer.)
customElements.define('mirror-type', class extends HTMLElement { /** * Instantiate the component */ constructor () { // Access the parent class properties super(); // Define properties this.input = this.querySelector('input'); this.button = this.querySelector('button'); this.mirror = document.createElement('div'); // Inject the mirror element into the DOM this.append(this.mirror); } });
Now, we're ready to add interactivity.
Mirroring type
Inside the constructor(), we'll listen for input events on this.input, and run the handleEvent() method in response.
constructor () { // ... // Inject the mirror element into the DOM this.append(this.mirror); // Listen for events this.input.addEventListener('input', this); } /** * Handle events * @param {Event} event The event object */ handleEvent (event) { // Do stuff... }
Inside the handleEvent() method, we'll update the .textContent of this.mirror to match the this.input.value.
/** * Handle events * @param {Event} event The event object */ handleEvent (event) { this.mirror.textContent = this.input.value; }
Here's a demo.
Now, let's say we want to clear everything out when this.button is pressed.
We'd start by adding a click event to this.button.
// Listen for events this.input.addEventListener('input', this); this.button.addEventListener('click', this);
But how do we handle both event types inside the handleEvent() method?
We could setup an if...else statement.
/** * Handle events * @param {Event} event The event object */ handleEvent (event) { if (event.type === 'input') { this.mirror.textContent = this.input.value; } else { this.input.value = ''; this.mirror.textContent = ''; } }
But as Web Components scale and the number of listeners grows, this becomes a bit difficult to manage.
Because our Web Component class is an object, we can use bracket notation to run methods on it. I like to create on*() methods for each event, and use the event.type in the handleEvent() method to automatically run them.
/** * Handle events * @param {Event} event The event object */ handleEvent (event) { this[`on${event.type}`](event); } /** * Handle input events */ oninput () { this.mirror.textContent = this.input.value; } /** * Handle click events */ onclick () { this.input.value = ''; this.mirror.textContent = ''; }
Here's another demo.
While slightly more verbose, it results in an easier to manage and maintain Web Component over time.
Like this? You can support my work by purchasing an annual membership.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] How to listen to multiple events in a Web Component with the handleEvent() method"