Let's talk about events. If I have a button here, and I want to listen for a particular DOM event, like click, I could say x-on:click, and how about alert('I was clicked'). Now we can use this syntax, or the shorthand. Okay, let's declare this as an Alpine component, and have a look. We give it a refresh, I click, and sure enough, I get an alert. And of course, this would work for any DOM event. Maybe mouseover, or dblclick, or keydown, or keyup. In this case, if I mouseover it, but I don't click, I still get the alert. Okay, but what if we could fire custom events?

In this case, if I mouse over it, but I don't click, I still get the alert. Okay, but what if we could fire custom events? That would allow for communication between our components. Here's what I mean. Maybe this'll become, how about a Flash component. It's a common example, but it's pretty useful. So we'll say, yeah, I don't want to listen for a click, or anything like that. I want this custom event called Flash. When we have an incoming Flash message, I want to respond, and alert, caught. All right, let's give it a shot.

When we have an incoming Flash message, I want to respond, and alert, caught. All right, let's give it a shot. So I'm going to give it a refresh, and a little tip. I can select this element in the inspector, and if I do that, $zero will point to it. So you don't have to do any kind of document.querySelector thing. You never have to do that. Select the node, and then you have access to it. All right, so I can dispatch an event by doing dispatchEvent, and then we'll instantiate it.

All right, so I can dispatch an event by doing dispatch event, and then we'll instantiate it. New event called Flash. Okay, so now think about it. We're listening for an event called Flash, and when that comes through, we show an alert. Here is where we dispatch that event. So if I run it, we get an alert. Easy enough. But what if I want to include data or details along with the Flash message? That way I could do something like this, event.detail, and maybe that points to the message.

But what if I want to include data or details along with the Flash message? That way I could do something like this, event.detail, and maybe that points to the message associated with the Flash message. Now this $event, that's made available through Alpine, and it will always point to the event that just took place, or the object for that event. However, when we are using this event constructor function, yeah, I can't do anything like this. So if I run it, we'll get undefined. And that's because when you dispatch an event, you can't include additional data with it. However, I can use a custom event, which does allow for that. So now if I run it, it's effectively the same thing, but I am allowed to pass any object

for it on the window, or an event that has bubbled up to the window. So now if I give this a refresh, I'm going to dispatch an event again, but not from that element, it's going to be from the window instead. And now I get the same thing. Okay, so this is getting interesting. What if I create a helper function like Flash, that's going to accept a message. And when you call it, it's going to do window.dispatchEvent, new CustomEvent, Flash, where we send through the message. All right, let's give it a shot. Flash, hello there.

All right, let's give it a shot. Flash, hello there. And it works. Okay, so now we have a helper function here. Why don't we just grab that, I'm going to place it right down here. And I'll even say window.flash. All right, one more time. Flash, there's that one. We can do it again. It works.

We can do it again. It works. So let's think about what we're doing here. In our Alpine component, we're now listening for a custom event called Flash. We could call it foobar if you want. And as long as those match, you're good to go. So just remember, this event here matches up with the name of your custom event. All right, so when we have an event that has bubbled up to the window or began at the window, we will catch it and display an alert. So why don't we see what we can do here, if we can make this look nice and pretty.

So by default, we don't show this Flash message. But when a Flash event comes through, we will show it. And then I can say, xText. How do we get access to that message? Well, you'll remember, we have that event object, right? So why don't we say, show equals true, but then message equals event.detail. And we'll store that as well. Okay, so now we can bind the text of this div equal to the Flash message. Okay, what else? Let's put that down.

Okay, what else? Let's put that down. We could also say, x-show. So we're going to bind the display of this div equal to that property. All right, let's have a look. We're going to flash a message. And sure enough, we see it in the bottom right. Now you learned in the last episodes about transitions. So I could also say, x-show.transition. And I can even stack these on, like transition the opacity, and maybe also the scale, and

Flash it, one, two, three, and it goes away. You see, this stuff ends up being so easy. And remember, now you can dispatch this event anywhere in your code base. It could even be on a different Alpine component. Trigger FlashMessage. And here you say, let's split these. Here you say, well, when you click on me, we're going to dispatch on the window. So we'll do this one more time, but then I'll show you a shortcut. I could say, Flash, hello there. And think about it.

I could say, Flash, hello there. And think about it. That is going to call this global function. That global function dispatches an event from the window, and then this component listens for a Flash event on the window and shows the Flash message. So now we click it, and we get our Flash message at the bottom. Yeah, so it's really easy to communicate. So now what you could do is use this little dispatch function here that Alpine includes. Dispatch is just a helper shorthand for firing a custom event. And I can say, hello there again.

That will then bubble up all the way to the window. And once it gets to the window here, we will pick up on that and respond. But yeah, what's cool is you have the flexibility. If you want to use dispatch, all right, that's going to trigger or fire a custom event. It'll set the detail equal to this. But don't forget, if you want to pass additional data, the detail property can be an object. So you could have message here, and then maybe a level, and then a color, or things like that. Then once you catch that event right here, this event variable, or event.detail, would then be your object.

Then once you catch that event right here, this event variable, or event.detail, would then be your object. So you would do event.detail.message, or event.detail.level. But yeah, in our case, a string is all we need. All right, so to start, that should be most of what you need to know to begin working with events and custom events in your applications.