Svelte Actions: Creating events with Svelte actions

Hi, I'm Li Hau. Today I'm going to share with you how to create events using Svelte actions. So you may ask me, why do I need to create events? What do you mean by creating events? Well, you know the last video we talked about how to reuse event listeners using Svelte actions. And there's this one example that we use action to allow us to create like a custom secret unlock inputs which we're going to see over here. So just to recap, if you haven't seen this, you can click on the videos link over

here on the top right corner. And so here's a recap on the examples that we've created. So over here we create an action using secret combo action. It takes in two parameters. One is a secret, one is a callback. So in this example, we call use secret combo action. We pass in a secret which is a secret convo key, and then a callback which is whenever we successfully call this, press that secret combo keys. The callback function should be called which will do things that we want to do when it's c

alled. Right? So nothing wrong about doing it this way. Let me copy this over and go to the results. But what if we can have an event listener that listens to a custom event which tells us that the secret is unlocked, right? So probably we can have like a custom event listener over here which is like it's a custom event listener. So we listen to this custom event so we can use on directive to listen to it and events name. So for example like input, you can on like key down key press. Or you can

have on value events listen to change. But over here we can have our custom event name that we can define ourselves, right? So this name probably would be something like since we are using a secret combo, action will be like secret combo achieve. And since this is an event listener, we can pass in an event function. So here we say unlock, it goes through, right? So which means that we don't need a callback function, we can have our secret combo action that looks like this. And by adding this act

ion, probably we have a custom event that's called secret combo achieve. When that event happens, the triggers will call this callback function which is to set out not to be true. If you write it this way, you find it slightly more elegant than what we have done earlier where we pass in a callback. Right now we can have like events listener, right? So this is what I meant by creating an event. So an action can create events. I mean you can create events yourself, but we can use action to create

a custom event that is being triggered by a custom trigger. Right? So by for example in this case is when the combo action when you type in the combo in your input. So how do we do that? Over here in the existing code, we pass in the callback which is being called over here. So over here is where we successfully triggered. I mean, we successfully press down the combo keys, which is a callback which will call the callback. So now we don't want to get the call back from the action. Instead, you wa

nt to dispatch the customer events. So I'm going to say element dispatchevent new CustomEvent. And the custom event can have a custom event name, which in this case is the secret combo achieved. And that's about it. So instead of passing a callback, when you pass in the callback function that we call, we just dispatch events and you can decide whether you want to listen to it or not. Right. So having a callback function pass in, you probably have to check whether it's passed in it's a function a

nd then you call it. Right. Doing it this way, the need of having to pass in a action where you just dispatch events whenever you feel like it. And in this case, and then the user itself will be deciding on its own whether to pass in this. And then we do this page in action, whether there's events or not, it's optional. So one great thing about it, in this case, we change it this way. And yeah, let's try it out. So like the last video we have in the app Sell, we have the example, and the result,

which is the example, would be the original code that does not create any events and result is the one that creates an event. Right. So this reptile will be shared down the link in the description so that you can play around with it. On the left is the example and on the right is the results, which we use to create custom event. So let's see whether it works. So I'm going to press in the custom kombuki, which is up, down, left, right, left, right. So up, down left, right, left, right. Secret un

locked, right. So that's so easy, right? Yeah. So let's take a look at another example. And so just to drill you in this like way of creating custom events using actions. Right, in this example, example two, I'm going to change to example two and result two, which I'm going to create a file called result two, right. And over here, example two is what I call triple click event. So over here I can open up the console. So I sent it on click event listener. And when I click and I have to record acco

unt. So when I click increments account, right. So when I click three times in quick succession, then you'll be triggered like it will call a console triple click. Right. So how do you know that it's been clicked fast enough in succession? Basically, we set the time out. So I'm just like arbitrary time. In this case, it's 800 milliseconds. So within eight milliseconds, if you haven't clicked another click then you reset the counts back to zero, right? So what I do is I record this timeout ID. So

whenever the next time I click on it or clear this time out. So you won't reset my account and at the same time create a new time out so that I can record I can see whether the next time out next week and the next subsequent click, whether they are within 800 milliseconds as well. So if I click once, no effect, click twice, no effects, click one, two, three and you see a triple click. Right. So in elements you don't have an event called triple click. But how good it is if you can so a copy of t

he result, if you can have some you can write something like on triple click, right? How good is it to have this, right? So what can you do? Probably you can write an action, right? So the aim of this video you can write an action, you can apply that action on this button and once you apply that action, amazingly it has this triple click event that you can listen to and you can pass in a callback function. So that is what the action that we are going to use that you're going to write. So I'm goi

ng to say use triple click action. So I'm just adding a suffix of action to this so that you know that it is an action. It's not a mandatory thing to name your action that ends with an action. Nothing to do, it just needs to be a plain action and then you can pass it into the use directive. So I'm going to call triple click action and this will give me an element over here. I want to copy over the code that I've written over here, over here and over here as well as this on click, paste it in. Ok

ay. So I paste everything in and then I need to remember to elements that add events listener Click on click and when I add event listener I need to always remember to remove event listener on Destroy so that you remember to clean it up. Elements Remove Event Listener you have this action and hopefully to have this triple click event you just need this triple click action that applies to the button. And now when you click the button three times you get triple click. Yeah. So there you have it. Y

ou create an event using swell action, right? So with smart actions you can enhance your element so that it can dispatch any kind of events where you can listen to them. Right? So I believe that if you visit Svelte Tutorial on Actions, the one that they introduced about actions which is this Panama, as you can see here in this example is also where once you add this panable action you magically have this pen move and pen and event which you can listen to and react to it right? So that's about it

for today. If you like this video give me a thumbs up if you have anything that you want to ask me about actions or anything else or you find anything that I might have spoken wrong in this video comment down below in the description I will very happy to read all of them and reply to you so once again please subscribe to my channel so that you will receive my notifications on the latest video. I believe you probably have to click on that little Bell icon. I don't know how to draw it but go to m

y channel click the Bell icon after you subscribe so that you get the notification on the next video that's coming out. See ya bye.