So lets start out with event listeners using the addEventListener method which is well supported with most modren web browsers these days. This works by gaining a reference to an element by whatever means, such as with document.getElementById, and then calling the addEventListener method of that element. The first argument that I give to addEventListener is the type of event I which to attach for, and the second argument is the method that I want to fire when this event occurs.
So I have some html for this example that looks like this.
And the html links to an external main.js file that looks like this.
For the most part addEventListener should be used as a way to attach events to an element. This way if I want I can attach more than one handler for the same event and element. The only reason why I might want to bother with another way of doing so is maybe over backward compatibility concerns with older version of Internet explorer.
Another way of attaching event handlers is to set a function to one of many named properties of an element or the window object. One of the down sides of this is that only one event can be attached at a time. However doing so will work on a wide range of clients.
The process is more or less the same for elements in the sense that a reference to the element must be obtained first. Once a reference is gained an event listener function just needs to be set to a property name of the desired event.
There are also a range of events that can be attached to the window object also.
When setting an event listener there is the first argument of the callback that is given. This argument is the event object which contains all kinds of useful information about the event when the event triggers. This can contain things like a reference to the element that was clicked on an on click event, or the x and y position of where a canvas element was clicked on such an event and much more. Some parts of an event object depend on the type of event, for example you would not find a touches array of points on a touch screen for a keyboard event. However many other parts of such an event object are more or less consistent across different types. In this section I will be going over some examples of event objects when working with event listeners.
In this basic example of using an event object I am setting the href property of an anchor element using the target property of the event object. The target property is a reference to the element in which the event took place. So the target property can generally be used as a way to reference the element to which the event listener was attached inside the body of the event listener.
For this example I am just attaching a click event listener that will set the href property of a link when it is clicked.
When I have a situation in which I have a bunch of nested elements, and I have a handler attached for each of them. If an event happens in a child event, that event listener will of course fire. However each event listener all the way up to the parent event will also fire as well on top of that. If I want to prevent this from happening I will want to use the stop propagation event object method.
Here I have a not so basic example of using event objects and event listeners that makes use of the canvas element. Here I am drawing some circles to a canvas with the arc canvas method. The position of the circles can be changed with the mouse click and mouse move event listeners.
When using mouse events the position of the mouse click,move event and so forth can be accessed via the event objects clientX, and clientY properties. However these values are window relative and not canvas element relative so I am using the getBoundingClientRect method to adjust those values to get a canvas relative x and y position.
When the example is up and running I can change the position of the circles by moving the mouse over the canvas, as well as clicking with the canvas with the click and mouse move event listeners. I could add many more listeners and make the project far more interesting, but you get the idea.