Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:56 minutes
  • Overview
  • Transcript

2.4 Creating and Dispatching Custom Events

Svelte wouldn't be much of a framework if it didn't allow us to create our own events. You'll learn how to do so in this lesson.

2.4 Creating and Dispatching Custom Events

In the previous lesson we created a list component that relies upon the user to supply the individual items. You can, of course, type something into the input box. We can click on the Add Guitar button or press the Enter key and voila. We have our item. And of course we achieve this with well, several things but one of them was handling the DOM click event on the button element. And in the previous lesson, you learned how we can set up those event handlers and also how we can modify that by preventing the default action from occurring. Well, in this lesson we're going to kind of pivot on that, and we are going to talk about custom events, because that just kinda makes sense. Yes, we need to know how to handle DOM events but we also need to know how to dispatch our own custom events and how to handle them as well. So in this lesson, we are going to add the ability to dispatch an event. Any time that we add a guitar to our list that's going to dispatch an event, that we can then listen for inside of the app component. So, the first thing we need is, an Event Dispatcher, and we get that from a function from svelte and we need to import that. It's called createEventDispatcher. It's aptly named because this is exactly what it does, and this is of course from svelte, and we need to use this function to create a dispatcher. So, I'm going to call that dispatch and then we will simply call createEventDispatcher. I mean it's pretty self-explanatory there. We import the events dispatcher creator and then we use that creator to create a dispatcher that we can use to dispatch any event from inside of this component. So whenever we add a guitar to our list, I want to dispatch an event, we can call that new-item. And then we can provide any detail that we want about this event. So it's obvious to me that we need to provide the new item that was added. But we could also have the guitars array, or the length, or anything like that. I mean, we can put inside of this detail anything that we want. So whenever we dispatch an event, we supply the name of the event and then the detail, and then all we have to do then is listen for this event. So, lets go to the app component and this is going to look very similar we use on all by colon and the name of the event that we dispatch which was new item. And then of course we have whatever it is that is going to handle this. So we could write a function that would handle it, so we could say handleNewItem. This would receive an event object and we can just write that detail to the console. So this event object is a custom event object and it has a detailed property which is the object we passed as the second argument to dispatch, so this would have our value. And then we could just use this function here, just like that. So if we look at the browser, let's pull up the console, we can add in a new item. And we see that has been written to the console. Although let's do this, let's say New Item and then we will have the value. So this will work exactly like we would expect it to. However, I'm going to write this just slightly different. Instead of defining the function up here, in our JavaScript I'm going to do so here and I'm going to use an arrow function. So this is going to receive the event, and then I'm just going to grab that call to console.log and put that there. So now we will have the same result, except that this is a little more declarative. And let's go back, let's test it, let's add a new item, Les Paul. .And anything that we type, and then add to our list is, of course, going to be displayed in the console as well. So creating a custom event is very simple. You need a dispatcher, so you import the createEventDispatcher function from Svelte. We create our dispatcher from that, and then we dispatch our events whenever we need to. We supply the name of the event as the first argument, and then the detail of that event as the second argument.

Back to the top