Events are things that happen within the system you are programming. The system produces a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. This process is referred to as event trapping.
Events are fired inside the browser window, and tend to be attached to a specific item that resides within it. This might be a single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur, such as:
The user selects, clicks, or hovers the cursor over a certain element.
The user presses a key on the keyboard.
The user resizes or closes the browser window.
A web page finishes loading.
A form is submitted.
A video is played, paused, or ends.
An error occurs.
There is a long list of
DOM HTML Events, and
DOM Event Objects
that can be trapped, but here is a short list of some of the more common:
Once JavaScript detects that an event has occurred, we need a way to process the code and enact some kind of procedure. There are basically three different ways of accomplishing this:
1. inline: event code written within the HTML element itself. For example:
make an element and from within that element, process the code and perform the action that will run when the event is triggered.
this is a click event and the button element will open an alert window when the button is clicked
*note: it is generally considered not good practice to use the inline method.
2. external: processes the click event externally, from the element, meaning not inline. This refers to processing the event either in a [script] running within the HTML file, or from an external Js file.
For example, let's create a NEW button with another click event:
< button id="b2">Button 2< /button>
creates a new button with an ID="b2"
now we can write our Js code externally from the element
const btn = document.querySelector('#b2');
assigns the variable btn to the new button, using querySelector for the ID #b2
btn.onclick = function () {
console.log('You Clicked the 2nd button');
}
we then assign a click event to the variable btn and process the event with the callback function that opens an alert window
3. addEventListener: is generally considered to be the best option for listening and "trapping" of events. It is generally used with external Js coding for processing of the event in either a [script] running within the HTML file, or from an external Js file.
selects the 1st [h4] element on the page and assign it to the variable btn2
and the processing Js code would be:
btn2.addEventListener('click', () => {
alert('You clicked the Heading 4');
})
i. We are processing the variablebtn2 by using addEventListener() to "trap" the event
ii. We then add an event type of click, so the event will be triggered by a mouse click.
iii. And finally, the callback function will open an alert window (once the h4 is clicked) showing that the H4 was actually clicked.
We can also skip assigning a variable, and shorten the coding in the following way:
document.querySelector('h4').onclick = () => {
alert('You clicked the Heading 4');
}
However, the first example of using addEventListener() is generally considered to be the better way of coding.
removeEventListener
Sometimes in larger applications, with many event listeners, it can potentially become a "load" on the system and has the potential to create problems within the execution of the code. To solve this problem, there is a process called removeEventListener, whereby you can remove any event listeners that you wish.