Event handling: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

13. Event handling

Transcript

00:00

We're going to go over the basics of event handling, which we've already looked at throughout this series, but we're going to go on to some more practical examples, as well as some useful modifiers that you can use when you're working with events. So by events I mean, as we've already seen with things like buttons,

00:17

we can use X data directly on the button, or if this button was within a component, then this would still work in exactly the same way. We can use X on, and then we can say click, that's the name of the actual event itself, and then we want to do something in that instance.

00:36

So let's go ahead and just console.log out clicked. So we've already seen this work before, let's just say click me, let's head over to the browser, and let's check this out. There we go, so that works.

00:47

Now one thing that you can do that I don't actually like doing, is you can use the shorthand at to click, and if you come from Vue.js you'll know that this is pretty much the same as well. So I can use an at click, and that's going to have exactly the same effect.

01:02

Let's just try this out, and you can see it works in the same way. I don't like doing this, I prefer using X on, it just feels more natural to me, but you have that at symbol there if you do want to bind some kind of event in, instead of writing out X on and then the colon.

01:17

So these event handlers can be attached to pretty much anything. So for example, if we had a outer div, and we had a div inside of this, like I said before, as long as you have a component, this event can be attached to any element inside of that component.

01:34

So let's just say that we had a div that said click me, well we can attach an event handler to that, it works in exactly the same as JavaScript would. We would use something like document get element by id,

01:46

we would find that element by its id, could be anything, and then we would add an event listener. So that's pretty much what's going on behind the scenes. Let's go ahead and say X on click, and we'll console log,

01:57

clicked a div, and let's go over, and there we go. So it works in exactly the same way. So you can attach these events to pretty much any HTML element. Let's dive right in with a more practical example,

02:09

and this is going to be a input, a text input, that lets you hold shift to go down to a new line rather than submit it. I've just gone ahead and pulled the code in for what we're going to be building, just so you can see exactly what this is going to do.

02:24

I'm going to type some text in here and hit enter, and you can see that by pressing enter that's actually submitting it. These kind of inputs, these text areas, are useful for when you have some kind of chat application

02:34

where you want to actually submit the text and then clear it out afterwards. However with this, if we just give this page a refresh, if I type abc and I hold shift, I can actually go down and navigate these lines and write more

02:47

before I then further hit enter to submit this through. So this is just really a classic example of what you might build when you're learning about events. So let's build this out from scratch.

02:57

The first thing that we're going to have is a form. When we hit enter on that, it's going to submit this form for us. So we'll make the form itself the component with x data. We're not going to store anything in x data,

03:08

but we are going to say x on submit, and then that's going to go ahead and console log out what we saw before. So we'll just say submitted, and that would of course go ahead and probably send a request across.

03:19

And the actual method for sending that data perhaps to an API or some kind of service would be within x data. So that method would be defined in there. Now inside of here, we're of course going to have our text area.

03:30

Let's get rid of the name and ID because we're not really worried about hooking this up properly. And let's just go over and preview this. And there we go.

03:37

We have exactly what we saw before. Just at the moment, we have absolutely no functionality. So let's go and just pull this down and pull the rows down. Typically when we write this out, we've kind of seen this.

03:48

We would pull these down to new lines just so it's a little bit easier to see. So we're going to make this text area an actual alpine component. Despite the fact that we have a component on the outer, this really, this functionality that we want to build,

04:04

relates directly to the text area. So we're again going to initialize this text area with x data so we can go ahead and attach some properties in there to make sure that this works. Okay, so let's go ahead and get this working.

04:18

Now we need to know within this text area if the shift key is being held. So let's first of all just go and implement a really naive event handler here. Let's say key down or let's say key up. And basically what we want to do is submit this form

04:37

when we have hit the enter key or the return key. So to do this, there's a couple of ways. What we could do is we could get the actual event in here. And we saw this a little bit earlier on in the series.

04:50

So we could use event, check the key, and by that I mean, if we just console log out the event that this actually triggers. When I hit the A key, for example, you can see we get a keyboard event through. That's going to give us the key code which we could use to compare.

05:06

For example, if I just close this off and hit enter, you can see that we get the enter key. So we could use that to actually go ahead and submit the form. So if you were to do that, you would probably add an if statement in here. You would say event dot code, for example.

05:23

And you could say, well, if that equaled enter, then you could go ahead and submit the form. So in this case, what we're going to do is just console log out, submit. We're not actually going to submit the form because there's a much easier way to do this. So there we go.

05:38

Let's go over, hit enter. That submits. When I press any other key, it doesn't do anything. So we just get that submitted when the key code is enter.

05:46

Now, rather than doing all of this, Alpine makes this super easy with modifiers. So we have modifiers, for example, like submitting the form and preventing the default behavior, which we do actually need in there. But things like key up, we have key modifiers.

06:00

So for example, this now will only be called or triggered when the enter key is pressed. Let's try it out by just console logging something out in here just to see. Let's go over. Let's type in a load of characters, hit enter.

06:14

And there we go. So we've pretty much got our functionality working. So we can use this to submit the form. How would we do that?

06:20

We're going to talk about this special L property or object a little bit later. But essentially, L is the element that we're currently working on. So if we just console log out L, a lot of console logging here, but it's important to do this just to kind of see what's going on.

06:38

Let's hit enter. And there we go. We get the actual text area itself. So what we can do with this is this text area is presumably within a form.

06:45

We could say L closest, which is native JavaScript form. And then from this, we want to go ahead and dispatch an event. And that event is going to be a new JavaScript event called submit. Now, effectively, what we're doing here is we're dispatching an event that's going to

07:03

be picked up on our outer form. With this, it's going to prevent the default behavior. And it's going to console log submitted. Let's go over and just try this out.

07:11

I'm going to type a load of characters, hit enter. And at the moment, that doesn't look like it's working. So let's have a look. Let's just give this a hard refresh.

07:20

And there we go. That worked. I just needed to give that a hard refresh. So that's actually working.

07:24

But obviously, now what we want to do is allow the shift key, which I'm pressing right now as I'm speaking to you, to be held down to then go down. At the moment, holding the shift key and pressing enter still submits the form. So what we want to do is inside of this text area, inside of our data, keep a note on whether

07:42

the shift key is being held. So let's say shift held false, because by default, we'll assume it's not being held. And then what we can do is just attach more events onto here. So for example, we could say x on key down shift.

07:56

So remember, we have a modifier that allows us to detect which key is being held. If shift is being held, we can set shift held to true. So we're just modifying the property that we have here. And then what we could do is go ahead and say key up shift, shift held.

08:13

And we can set that to false. So now we can bring this together by only going ahead and dispatching this submit event to the closest form if the shift held is false. So we can just say if not shift held and go ahead and submit the form.

08:33

So if the shift key is not being held, we go ahead and submit. So let's go ahead and say abc enter that submits it. Let's say abc hold the shift key and go down. That's not being submitted.

08:45

And then finally, when I'm ready to submit it, we submit that out. So there are loads of ways that you can pull functionality like this together. But it's just a good example of using a few events here with a couple of different modifiers just to get you used to how you're going to work with events in Alpine.

09:04

So let's take a look at another example. I'm going to go ahead and comment this out. This is actually going to be a simpler example. So this is going to be a menu, a drop down menu that we want to open.

09:14

We're not going to style this out because it's going to take a little while to do that. But let's go ahead and just create out a div in here with some data. And let's say open false. Now, if you followed along the rest of the series, you're probably thinking,

09:29

well, this is going to be pretty straightforward. We're going to have the menu content inside of here with a condition on this to only show if open is true. And then we're going to have some sort of button to actually open the menu.

09:43

Well, you're right. But what happens if we want to close this menu by clicking outside of this menu content? Well, let's take a look now. So we're going to go ahead and get this working first of all.

09:54

Then we'll do a tiny bit of styling just so it makes more sense. So we're going to say when we click this button, we're going to set open to true. We're not going to toggle it. So this open menu button will not close this.

10:07

Let's go over and just check this out. So at the moment, we don't have any kind of condition on here. So let's say X show and only show that if it's open. And let's hit open menu.

10:18

And you can see that opens. Let's add some really, really simple styling to this just in line here. And let's just call this box just because I can't think of a better way to represent this right now. So let's say 200 pixels.

10:30

And let's make the height 200 pixels as well. And let's just set a background color here of slate gray or something like that. So let's go down and apply the class to this div box. Let's go over and check this out.

10:45

OK. So when I open it, there is the menu content. So you can kind of imagine that this is a kind of drop down at the top of your page. Now with this, I want to click anywhere outside of this box to close this off.

10:59

So let's go over and look at how we can do that with Alpine. We want to use X on click. So this is on the actual menu content itself, that box that we've just created. But Alpine has a special outside modifier,

11:13

which means that whenever we click anywhere outside this element, we trigger it. So let's say open false. That's pretty much it. Let's go over and check this out.

11:23

Hit open menu. Clicking anywhere inside of this, which is what I'm doing right now, doesn't do anything. As soon as I click anywhere outside, that goes ahead and gets rid of it. So you can see that we've pretty much in a couple of minutes

11:35

built the functionality that would eventually end up as some sort of drop down menu. OK. So we've covered these events. A lot of these are in the documentation.

11:44

So if you ever need to find a specific event, you can head over to the docs to find that out. But hopefully this gives you a really good overview of the kind of events that we can create as well as their modifiers and the kind of things that we can do with this really powerful functionality like this just in a couple of lines of code.

Episode summary

In this episode, we focus on the basics of event handling in Alpine.js. While we've already touched on events earlier in the series, this time we go deeper, looking at practical examples and showcasing several useful event modifiers to make our lives easier.

We start by getting familiar with how basic event listeners like x-on:click work, and even show the shorthand @click (if you're coming from Vue, this will feel familiar). There's a quick demo using buttons and console.log to make sure everyone sees it in action.

From there, the episode dives into a more hands-on example involving a text area—imagine the input you'd have in a chat app. We set it up so pressing Enter submits the form, but holding Shift+Enter lets you add a new line instead of submitting. Here, you'll see how to use event modifiers, keep track of Shift being held, and even how to programmatically submit a form from within your component. We log lots to the console during this process to make the inner workings less mysterious.

Next up is a neat dropdown menu example. The menu opens with a button, but the cool part is how we let users close the menu by clicking anywhere outside of it. Alpine’s @click.outside modifier makes this extremely easy, and you’ll see how simple it is to wire up this pattern.

The episode wraps up by pointing you at the Alpine docs for more specific event needs and recaps how event modifiers and handlers unlock a ton of UX improvements with minimal code. This is an action-heavy episode—so it’s a perfect time to pause and play along in your own editor!

Episode discussion

No comments, yet. Be the first!