I forget about things like the prevent default method now and then, so maybe writing a long post about that and the event object in general will help me to remember better. There is also a great deal to cover when it comes to these event objects, such as the fact that the properties and methods will differ a little from one kind of event to another.
When I add an event listener to an element with the addEventListner method, or one of the many element properties such as the on click property, I have to give a callback method that will fire each time that event happens. In this callback method the first argument will be a reference to an event object. This event object has many useful properties and methods that can be used in the body of this callback function.
- The source code examples in this post are on Gihub
1.1 - The on click property of an element
The first step when it comes to working with event objects is to have a way to end up with one. One typical way to get one to work with would be to just set a function to the on click property of an element such as a div element. When doing so the first argument for this function will be a reference to the event object that will be available in the event that the div element is clicked.
1.2 - Using the add event listener method
1.3 - Mouse down event and target property
The click event works great, but in some cases I might want to attach it for when a mouse button is pressed down, but not up yet. So when it comes to this there is the mouse down event that will fire just when the mouse button is pressed down. With that said there are also mouse up, and mouse move events that will fire when the mouse button is released and when the mouse is moved.
In this example I have a state object that contains properties like a current pointer position, and I have a draw method that will render the current values of this state object to a div element as the inner text content of the div.
When clicking and dragging the mouse over the text you will notice that you can not highlight the text, that is because I called the prevetDefault method of the event object. This method will stop any kind of default browser behavior for the event such as text highlighting. This can come in handy when making some kind of game that involves user input for example. when someone clicks and drags over a canvas element I do not want any default browser behavior to happen when they do so.
There is a great deal more to write about when it comes to setting up some kind of system like this. For example there is the question of having touch and keyboard events be a way to also mutate the values of the state object for example. When it comes to doing so I need to know how to work with many various aspects of event objects. For example in touch events I can not just use the client x and client y properties like in mouse events because of the nature of multi touch.
2 - The target property in depth
It might be called for to take a closer look at the target property to really get a better understanding of what the target property is all about. Say you have a whole bunch of nested elements in a container element. For example a grid of div elements positioned in a grid like pattern in a container element by way of absolute positioning and the style API. Say I want to have an event handler that will fire when an div element in the grid is clicked, I could attach event handlers to each of the div elements, or I could just attach one event handler to the main container element because of something known as event bubbling.
Here I have a little example that is that grid of divs that I have mentioned with a single event handler attached to the container div. the event handler will change the background color of a div that is the element that is referenced by the target property. So when I click one of the nested divs the event bubbles up to the container element, the event handler fires there, and the target property refers to the element where the event happened, not the current element where the handler is attached. For that there is another property of interest called the currentTarget property that in that case would refer to the container element rather than one of the divs in the grid.
3 - Nested elements, the current target property, and the stop propagation method
So there is the target property and then there is the current target property of an event object. The target property will be the element where the event happened, and the current target property will be the element where the current event handler is firing. A good way to know the difference would be to play around with something that has to do with a nested collection of elements.
Say I have a collection of divs where each div is nested inside of each other and I have a mouse down event handler attached to each of them. If I click the innermost element the target and current target properties will refer to the same div, but then the events will bubble up to the top level. As the other handlers fire the current target property will refer to the current div element, but the target property will still just refer to the div that was clicked. So it is a good idea to know about the differences between the two properties in an event object that have to do with element references, if not it is easy to understand how this can cause some confusion.
So there is this thing going on that is called event bubbling, and you might be asking yourself is there a way to stop this from happening? The answer is yes and the method of interest with that in the vent object is the stopPropagation method.
3.1 - Using the current target property of an event object for a hander that will be attched to each child
The current target property of an event object is the current target for the current call of an event handler, rather than the target element where the event has started. So if I want to use the current target property in this example then I will want to attach an event handler for each element, and I will want to call the stop propagation method for each handler.
3.2 - Using the target property with a hander that will be attached to each child element
If I am attaching an event hander to each child element then I can also use the target property of an event object which should refer to the same element as with the current target property. However the target element and current target element will only be the same element if I am stopping propagation. If I do not stop propagation the there is a different when the event bubbles up from a child element to the parent element. So then in this example I am doing the ame thing as with my current target example, but now I am using the target property. This has the same effect but only because I am stopping propagation.
3.3 - The target property of an event object
The target property of an event object is a reference to the element to which an event has started. So when it comes to using this property I will only need to attach a single handler to the root element. I may not need to call the stop propagation method when it comes to attaching a single event hander to a root element this way. The reason why is because the stop propagation method is really mainly something that i would only want to call if I am attaching handers to each of the child elements. In this example I am not attaching to each child element, but rater I am just attaching to the root element and that element only. In this situation the target property of the event object will refer to the div that was clicked and the current target property will always refer to the root element to which the event hander is attached.
4 - Simulating events by creating an event object, and calling the dispatch event method
The way that I have found to do so as of this writing is to use the Event Constructor, and make any additional changes to the event object that need to happen. I then just need to get a reference to the element to which I want to emit an event, and call the dispatch event method of that element, passing the created event object as the first and only argument.
4.1 - Basic mouse event simulation example
Often I might want to have some kind of method where I call it, and pass an x, and y position as arguments. The result of doing so will then be a simulated click event at the given window relative position. So then in the body of such a method I could use the document element from the point method to get a reference to any element that may have been clicked at that location. I then just need to create an event object with the Event Constructor and make any needed changes to that object. After that I just call the dispatch event off of the reference to the element and pass the event object.
5 - Pointer event objects
Do not get me wrong there are situations in which pointer events will fall short, for example if I want to do something with multi touch I can not do so with pointer events, and would need to look into touch events and how these event objects are structured. If I want some code to run each time the user moves the scroll wheel of their mouse again this is an area where the pointer events and their event objects will fall short also.
Still pointer events are great when it comes to writing some code to run for certain pointers in general type events, so in this section I will be going over some examples. Of course I will be looking into what there is to work with when it comes to what there is in the event objects of these events. Also I will be touching base on some other related topics when it comes to some things that need to happen with CSS, and other issues that pop up when getting started with pointer events.
5.1 - Basic pointer down event example
The basic hello world style example of pointer events might make use of the pointer down event, and maybe the clientX, and clientY properties of the event object to work with in an event such as this. One thing to be aware of from the start is that these point events extend the Mouse event object, so then just like with mouse events there is a clientX and clientY properties of a pointer event.
These clientX, and clientY properties are still very much window rather than element relative though. Also there is looking into some issues that might come up when it comes to using a touch device rather than a mouse and so forth. So let’s look at a few more examples of these pointer events and the event objects of them
5.2 - Get element relative position with e.target and get bounding client rect method
AAfter event just a hello world there are already a few things that need to be addressed, one of which is the nature of the values that are stored in the clientX, and clientY properties. They are relative to the window, but not the element in which the event happened. So then in this example I am once again using the pointer down event to get a position where the pointer event happened. However this time I am using the target property of the event object to get an element reference to the element in which the event happened. I am then using the get bounding client rect to get a box object that contains margins from the other edge of the element to the edges of the window. I can then use these box values to adjust the clientX, and clientY values to get an element rather than window relative position.
5.3 - The pointer move event and CSS touch action
The pointer down event might be a good starting point, but there is also the pointer move event. One thing to be aware of when it comes to this kind of event is to make sure that things are set the way that I want them with the touch action css property. If not this event might not always work as one might expect it to when it comes to using a touch device at least.
6 - js event objects when working with keyboard events
When it comes to knowing what key is pressed there are two options that are of interest in the event objects for these keyboard events which are the key, and code properties. There are many other properties that you might see being used in various source code examples on the open web, but many of these examples might be a bot out of date. It is best to just stick to using the key property generally, and make use of the get char code at string prototype method if a char code is needed from the key property value. The main reason why one might want to use the code value is that it is not affected by case, where the key properties value will change depending if caps lock is on or the shift key is used.
6.1 - Basic key down event example and the key property of the event object
Here I have a simple getting started type example with keyboard event objects where I am attaching a key down event for the window object and just setting the inner text of a div element to the value of the key property when a key is pressed.
6.2 - The event object keyCode property and setting booleans for each code
When it comes to working out something for multi keys the first step might be to work out a system for storing the status of an array of keys. So in this example I am starting out with a keys array, and to set what array index value to set to a true or false value I am using the charCodeAt method of the string prototype to key the char code from the key property of the event object. So then I can press and hold a number of keys and the corresponding index values will be true. The index values can then be used to perform some kind of multi key function in the event that a certain collection of index values in this key array is true or not.
7 - Event propagation, event object target, current target, and stop propagation method
Yet another topic that is relative to event objects would be the topic of event propagation, also often known as event bubbling. This is where one has one or more child elements in a parent element and when an event happens in one of the child elements it will fire any event handlers for that child, but also for the parent element of that child element, and so on. This is why there is a target, and current target property in an event object as this will come into play for any and all events that will propagate such as an on click event. The target property is a reference to where the event started, while the current target property is a reference to the current element in a propagation of event handlers firing for this event that happened in the target.
7.1 - Basic example of event propagation, target and current target properties of an event object
First off, a basic example of this event propagation with a client event, and also some code that will help to show what the difference is between the target and current target properties of an event object.
7.2 - Stop propagation
To stop propagation I will need to call the stop propagation method.
7.3 - Get parent element example
So then this event propagation can be used as one of many ways to go about getting a reference to a parent element. Although there may be a whole lot of other ways of doing so that are far less complex such as just making use of the parentNode or parent element properties of a child element when having such a reference beforehand is the case.
8 - Event Objects in mouse events
So then when going this way with events and working with event objects I often will work out code that I want to work only with touch events, and then code that I want to work only with mouse events. So then in this section I should also touch base on touch events at least, but only for the sake of disabling touch events so that the code will not run for touch events as a touch screen will trigger mouse events actually.
8.1 - A basic mouse down event example
Since I already covered the click event, and also because that event is more of a pointer event, I think I will start off with the mouse down event. This as the same suggests is an event that will fire when a mouse button is pressed, but not yet released.
Even though this is a mouse event when working on a system that has both a mouse as well as a touch screen I have found that the mouse down event will fire for both mouse button clicks as well as when I use the touch screen. So the way to deal with this is to start out with a touch start event actually, and be sure to call the prevent default method in the body of the handler. The idea here is that I work out separate logic for touch events, otherwise why bother with these events right> I could just go with pointer events.
After the touch start event I then attach for the mouse down event. Inside the body of the lander I can use the client x and y properties to get the window relative position where the mouse down event has happened. Also I can take a look at the button property of the event object that will give me a number value that corresponds with what button was clicked on the mouse.
8.2 - Right clicking an element and the content menu event
One thing that will come up right away is what happens when I right click an element, when doing so there is the default browser context menu that comes up. If I want to do something custom with a right click button of a mouse I will need to find a way to disable that. So for this sort of thing there is the context menu event, inside the body of a handler of this context menu event I can call the prevent default method off of the event object to get that context menu to stop.
8.3 - The mouse up event
So now that I know how to get mouse events to only work with the mouse and not touch events as well as how to disable the context menu there is now also doing something with the mouse up event. So in this example I am using everything that I have covered thus far in this section but I am now also using the mouse down event as a way to figure out an amount of time between the firing of a mouse down and then mouse up event.
9 - Conclusion
So I work with event objects all the time when working out front end code mainly when dealing with user input, but also a wide range of other kinds of events. So knowing about the key properties and methods that there are to work with in an event object are key to understanding how to create front end web applications.
There is not just the core set of properties and methods like the target property, but also the many different properties that will change depending on the type of event. For example there is just the clientX property in mouse events, but with touch events there are arrays of objects and each object in that array has a clientX property because with touch events you can end up having to do something with multi touch.