Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding event registration and propagation
- Analyzing event properties
- Creating and removing DOM elements with events
- Removing an event
- Canceling and preventing default events
- Playing media events
- Handling media pauses
- Dragging and dropping
- Adding touch events
Skill Level Intermediate
So far we looked at different mass related events and learn how to add and delete DOM elements. Plus we also learned how to remove event listeners when necessary. I want to show you an example of how can you prevent some of the fault actions when working with events. So I'm going to use an event then handles right clicks called Context Menu. So let's go ahead and go into our code, and just update this paragraph, because we're going to do something a little bit different. So, I'm going to say right click on the image to see a larger version.
If we right click, we're going to get the bigger photo. However, we're also getting this pop-up menu. And that's because the default action for right click is to bring the OS' context menu. But if you see in applications like Google Drive or Google Docs, you know that you can create drop down menus that are customized to whatever you're doing at the moment. So this is how this event works. So we'll go back here and we need to prevent the default action. That's really easy to do. All we have to do is, say prevent default.
So we'll just come down here and say e.preventDefault. And that prevents the default behavior of the event. So if we go back, we refresh. We right click. We're not going to get the default OS context menu. And if we masked out, it will still destroy the picture. Now, another thing that I want to is, it would be nice if the position of the image that I'm bringing up, which sort of follows the mouse position. I think that it's a better effect and it's not really that hard to do.
Let's go back into our code here, and we're going to add a few lines of codes, asking essentially for a new event. And we'll just put that right here. We'll say e.target, just like we did the other events, and say add event listener, and this time, we're going to look for an event called mouse move. So, mousemove, and of course we're going to execute a function just like before, and, and here we're going to pass along a new event handler, so it's going to be an event called f. And we're going to start the function, and you know what, since this is called event f, I'm going to move it right under this one which is called event D, just to keep the letters in order.
It's not really a big deal. And all we gotta do here is modify the value of the left position and the top position. Of this style-sheet for this element, so I'm going to do myElement, and use style, left. With this style property you can modify any CSS that you want to by using the style properties right here. So what I want to change is the left property, and that's going to be equal to f.offset. X.
And then plus 15, and you have to add the word px at the end of this, because you can't just give a left property a value, it has to have a pixel amount. So you have to put the px value. And we can do the same thing for the top. And of course in here we're going to use offsetY. And we're going to save this, and come back here. Refresh, and now when we right click, this is going to follow our mouse. Now there's a little bit of a problem, I don't know if you can tell, when I first right click.
You can see that the event first appears at its original position wherever we put it before and then it kind of jumps as soon as we move it. And that's not good. We need to make it be at the position that we want as soon as it's created. So I'm going to switch back over here and I'm going to copy these two. And whenever I generate the image. So here's where I create the image element. What I want to do is go ahead and add this right here. And of course I want to track not the f object because the f object doesn't get generated.
Now, as I mentioned before when you learn how to work with one event, any other events are going to be pretty similar. So hopefully you're getting the hang of working with different types of events.