8 min read

Event Driven Programming

Event Driven Programming: website load, user click, window resize, etc. As a developer, you have to make sure that your applications have a flow. That flow is determined by all the possible events that can occur as the user interacts with your app.

Event Driven Programming


Working with events is a totally new way of controlling the flow of an application. It is the first time that your code will not be executed in a linear flow. Instead, it will be executed asynchronously. Who knows what comes first???

What is an Event?

An event is something that happens! Like clicking on a button, pressing a key on the keyboard, hovering a div with your mouse, etc.

Your job as a developer is to prepare for those events and define the functions that are going to be handling those events.

event driven programming

But who Triggers these Events?

Sometimes it is the website user, sometimes it is the browser, sometimes it is another application letting you know something, sometimes the developer triggers events related to the business logic, etc.

There are dozens of events being triggered every minute, but you don’t have to do anything about it (not if you don’t want to). They are available to you depending on the type of application that you want to do.

Types of Events


Here are some of the types of events that are constantly being triggered (and you can listen to them):

MOUSE – Events

Data-TypeDescription
ClickWhen the user clicks with the mouse or finger in any HTML element.
Mouseover,
Mouseout
The event occurs when the pointer is moved onto (for mouseover) or outside (for mouseout) an element, or one of its children.
contextmenuWhen the user right clicks on the mouse.
MousemoveIf the user moves the mouse
Mousedown or MouseupIf the user presses or releases the mouse.

☝ Play with this demo here

FRAME – Events

Data-TypeDescription
LoadThe browser has finished loading the website.
ErrorThe event occurs when an error occurs while loading an external file (like a CSS or a JavaScript).
ScrollWhen the element or window gets scrolled.
PageHide
PageShow
When the user focuses in a different window/tab; or when the user comes back from a different window/tab.
ResizeWhen the window is resized.

☝ Play with this demo here

FORMS – Events

Data-TypeDescription
SubmitThe event occurs when a form is submitted.
Focusin and FocusoutThe event occurs when the pointer is moved onto an element or onto one of the element’s children.
InputThe event occurs when an element gets user input.
ChangeThe event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <keygen>, <select>, and <textarea>)

☝ Play with this demo here

KEYBOARD – Events

Data-TypeDescription
KeyupWhen the user releases the keyboard key.
KeydownWhen the user presses the keyboard key.
KeypressWhen the user presses and release the keyboard key. The difference from keydown/up is that Keypress only works on character keys. For example, it does not work on the up

☝ Play with this demo here

🔗 Here you can find a list with all the other less common events that you have at your disposal. Read them quickly, and be aware of them for future reference during your life as a developer.

Listening the events


Now that you know what events are out there, you can start listening them whenever you want during the runtime. The only way to react to any event is by listening to that event and assigning a function that will handle the event however you need.

Let’s repeat: To react you need to listen… And to listen you need to specify a handler function.

events driven programming

You can add an event listener in 2 different ways:

Adding Listeners from the HTML


For example, if you want to start listening when the user clicks on a particular button all you have to do is specify the "onclick" attribute to that specific HTML <button> tag, like this:

<!– myClickHandler is a javascript function that will handle the event >
<button onclick="myClickHandler();">Click me</button>
 
<script>
function myClickHandler(){
    alert(‘hello’);
}
</script>

Adding Listeners from JavaScript (during runtime)


Sometimes the DOM element doesn’t exist from the beginning. Maybe they are created after a database call or after the user did something. To solve that problem, you need to start listening after the new elements are created.

The .addEventListener function is perfect for this because it can be used in any DOM element during runtime.

When using the addEventListener function, you have to specify what event you want to listen to, and the handler function that will be called every time that event is triggered on that DOM element.

For example, this code is creating a list of names and each delete anchor in each row is listening to the "click" event – but only for that row.

The Event Object


Event handlers can have one optional parameter in the declaration of the function. This parameter is always filled with one "Event" object that contains a lot of information about the event that was triggered to get this function called.

No matter what type of event (mouse related events, keyboard event, frame, etc.), the event object is always going to have at least the following properties:

function myEventHandler(eventObj)
{
    console.log(eventObj.target);
     //will print on the console the DOM object that triggered the event  
    console.log(eventObj.type);
     //will print on the console the type of event  
    console.log(eventObj.cancelable);
     //will print on the console true or false if we can stop the propagation of this event  
}

Every Event Object has the following Properties:

PropertyDescription
TargetReturns the DOM object that triggered the event.
TypeThe type of event: click, mouseover, load, etc..
CancellableIf you can stop the propagation of the event or not.

Depending on the type of event, you will have additional properties that will give you very useful information about what happened when the event was triggered.

Additional information for mouse events

PropertyDescription
clientX, clientYReturns the horizontal or vertical coordinate of the mouse pointer – relative to the current window – when the mouse event was triggered.
pageX, pageYReturns the horizontal or vertical coordinate of the mouse pointer – relative to the document – when the mouse event was triggered.
whichReturns which mouse button was pressed when the mouse event was triggered.

Additional information for keyboard events

PropertyDescription
keyCodeReturns the Unicode character code of the key that triggered the event.
shiftKey, altKey or ctrlKeyReturns whether the shift,alt or ctrlkey was pressed when the key event was triggered.

Additional information for wheel events

PropertyDescription
deltaX, deltaYReturns the vertical or horizontal scroll amount of a mouse wheel (y-axis) or (x-axis).
deltaModeReturns a number that represents the unit of measurements for delta values (pixels, lines or pages).

🔗 There is a lot more information you can get from the event object, but we are focusing on the most used properties. For a bigger list of properties please read this guide.

Removing the Listeners


But what if I don’t want to continue listening? All modern browsers remove the events listeners when you delete the DOM element in which they were applied. If you don’t want to delete the DOM element, you can remove the listener manually using the .removeEventListener function.

element.removeEventListener(type, eventHandlerFunction);

You have to use the exact same parameters in the removeEventListener function as the ones you used in the addEventListener function.

Here is an example:

In this code, we are adding an event listener to the click event. Afterwards, the first time the click listener gets called, the handler function removes the event listener from the button. That’s why upon the second time the button gets clicked, nothing happens.