The basics of JavaScript events.

While learning Javascript I came across the concept of an event. In this article I attempt to make sense of them and how they can relate to the DOM in vanilla front end JS.

Events/ Events/ Events

The DOM Is an event based system.

The Browser is an event based system.

Keydown etc are events which happen that the browser can capture / listen to and note.

When the browser is open and JS script is listening for a particular event it can then go off and execute a given task.

The DOM can execute events.

The browser DOM is an event based system … idea is that everything is responding to some sort of event.

Lots of events and responses.

Allows the programme to not only observe what is happening but do something about the events that are happening.

Javascript can tap into and listen to browser events.

JS is the base language which has been plugged into the browser.

JS is embedded in the browser .. Just as assembly language is embedded in the comp.. It is the only language the browser and the DOM is implemented on.

Event Listener

An event listener is an object that implements the EventListener interface, which defines a single method named handleEvent(). An event listener is used to observe a specific event and perform one or more actions when it occurs.

interface EventListener {

void handleEvent(in Event evt);

};

handleEvent: function(event) {

// Do something here, possibly using the event parameter

}

To add an event listener we have to employ the addEventListener() method.

This then listens for a specific event which happens in the browser/ on the DOM and does something with it. These elements can be attached to ‘targets’(see below) so elements within the DOM.

Eg.

window.addEventListener(‘keydown’, playSound);

function playSound(e) {

const audio = document.querySelector(`audio`);

audio.play();

}

Examples of events

‘Transitionend’ which happens when CSS has the transition property, is an event, like many others, which is only found in the browser environment.

So if you press the D key .. If the browser is open it listened to that event, notes it… then the eventListener can trigger an action.

After DOM is loaded it fires an event called DOM content loaded .. If you attach a listener to this event you know when it fully loaded.

Tracking is just attaching events to stuff …. So click through rate is just a function attached to an event in the DOM.

Can create custom events .. Which is a combination of actions .. So when these actions happen do this event.

There are extra APIS which are environment dependant..

There are APIS you are going to see in the browser that you don’t see in the Node.

Transitionend is an event which is an API..

APIs in the sense that they are things that belong to the browser … so if you run js in node then you don’t see transitionend etc ..

Node is still an event based system so has it’s own events it can run.

..one of the reasons it is different from other languages.

ALL TRACKING TECHNOLOGY we have is based off JS events. … custom tag management.

Event Target

The event target is the element (div, span etc) that generates or dispatches the current event

So if you click on a div, that div becomes the event target for the click event that occurred

Threading and Sync/ Async

Javascript is Single threaded means everything runs on one thread.

Single thread — it does one thing at one time.

There are some situations that make it look like it is doing more than one thing at a time but just a tick.. Ie. SetTimeOut

SetTimeOut with a time of 0 means that the function gets plopped on the event loop … 0 seconds means do this at any point when you are free .. If you are busy ignore it, put it in the loop then call it later. .. It’s not there yet .. It will be there at some point in time.

Single threaded is naturally sync.