FREELessons: 19Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.7 Dealing with Multiple Events

Up until this point, you can only provide a single event on an object through your library. In this lesson you’ll learn how to refactor this to support multiple events.

Related Links

3.7 Dealing with Multiple Events

So currently we can add events to a marker through our library, all we have to do is pass through an object literal and give details, about the event and the action to take on that event. So in this case, when we click on this marker, we'll get click alerted to us. So in addition to having this click event, we might also want to drag end event since this marker is draggable, but the way our options are set up is, it only takes this one event in. So on this lesson, we'll go through and we'll change this to allow us to add multiple events. So how do we change this from taking in a single event, to allowing multiple events? Well rather than just adding just one object, we can allow multiple. And we can support multiple objects with an array. So if we wrap the object in array brackets, and then we'll copy it and we'll create another events as well. And the second object will be for the drag end events. And since we're passing through more than one event, we can change this from event to events. So if we click on our marker we don't actually get an event firing off and that's because our current API doesn't know how deal with an array of events. So we'll go into our Mapster library, and then within our add marker function we can see we're checking to see if there is an event. And if there's an event, we're firing it off with a this._on function. So we need to change this from firing off one event to multiple. So first we want to check to see if there's any events. And if the options contains the events object, then we want to loop through it and attach each one of the events. So if we call the for each function on the events array. We can attach each event as we whip through. But currently, we're gonna have an issue with this right here, because this is not the Mapster library inside the for each function, so up here, when we're creating our variables, we can assign self to this. So, this way we know that we have the reference to our Mapster library. So now if we go and we click on name marker, we're still not getting a click event. So let's check out the console. So in the console we can see we get an uncaught typeerror, and it tells us that undefined is not a function. So when we click to see where the source is, we can see we get it on this._on. So let's log this to the console to see what it is when we're inside the for each. So in this case, this is the window and we need that to be the Mapster library. So let's go back and change that. So to make this refer to the Mapster library, there's a little trick we back do. We can store a variable called self to this, and so inside the for each we can say, self._on. So now we'll click the marker and we get the alert box, and now we'll drag the marker, and we get the dragged alert box. So now able to deal with multiple events for markers, but we aren't able to deal with multiple events for the map. So we can easily abstract out this function to our library and then we can reuse it for any object that can handle events. So we'll create a function and we'll call it _attachevents, and that will take in the object that we want to attach the events onto, and then the events themselves. So this is the same block of code from above, we're calling the for reach function of the events array, and we're attaching each event as we loop through. So now up here, we can change this block of code, and we can just call this, .attachevents. So we'll pass through the marker because we want to attach the events onto that object, and then we'll pass through the events themselves. And down on our attachevents function, we need to change this from saying marker to object. So when we click, we get clicked and now when we drag, we get dragged. Let's make sure our event arguments are still accessible as well. So inside the callback, we'll log out the event argument. So now when we click, we can see that we get our event argument. However, there is one thing that we could add to this function to make it a bit more useful, and that's actually returning the object that was clicked. So in this case we're adding a marker to the map, but we actually don't have access to this marker, until the function has been returned inside of this marker two variable. So what would be useful is, we could provide the second parameter and whenever this callback is fired off, we have access to the marker. So, our Mapster library, open our _on function. All we have to do is pass back the options.object inside the call function. So now, when the callback function is being fired off, we'll return back any event arguments, and then we'll also return back the object that the event was fired off on. So, our main script file, we'll log the event arguments and then the marker as well. You can see right here we have the event arguments, as well as the marker. So in this lesson we were able to change our add marker function from adding just one event to adding multiple events, and we did this by providing an array of events. And also on our Mapster library we took this function and obstructed all, so can be use for any object that supports events, such as a map. And to get more control on our event listener, we passed through the object that the event was being fired of on, in our callback handler. So, now on we need to add multiple events to an object, it is easy as going through and passing through an array of events.

Back to the top