JavaScript: The Event Loop

JavaScript is event based, meaning everything that happens within a browser window/tab is the result of an event occurring and code responding to that event. There are hundreds of potential events that may need to be responded to throughout the life-cycle of an HTML page.

An important concept to understand, when it comes to JavaScript and the browser, is the event loop, the primary driver of this event based system. The event loop is controlled and managed by the browser which keeps the loop running and dispatches all events as they occur. Due to this, developers are free to focus 100% of their energy on identifying the events they are interested in and writing logic to respond accordingly to those events. This code that is invoked in response to an event is called an ‘event handler’ or ‘listener’.

One of the most complex parts of JavaScript programming is the fact that events are fired unpredictably and in an unpredictable order. This means JS code has to be written in an asynchronous manner with each listener having the ability to be executed independently of all others.

Unlike a lot of other languages out there, the JavaScript event loop is ‘non-blocking’ meaning that JavaScript does not allow the event loop to be monopolized by any single function. This includes I/O (input/output) events, instead of waiting for a file read to complete or a database call to return before moving on, JavaScript requires a listener to be provided and assigns that listener to the I/O return event and it moves on. Ultimately what this does is keep the browser window responsive and usable while long running tasks are taken care of asynchronously. This is a huge advantage being that the browser window is the user interface, which should remain responsive at all times.

Reference: Mozilla Developer Event Loop

To get an idea, here are just some of the most common events that front-end developers deal with on a daily basis, of course there are many more that are just as important as these:

Window Events

  • onload: fires after the page finished loading
  • onerror: fires when an error occurs
  • onresize: fires when the browser window is resized
  • onunload: fires when the page is unloaded or browser window closes

Keyboard Events

  • onkeydown: fires when the user presses a key down and holds it down
  • onkeypress: fires when the user presses a key down and then releases it
  • onkeyup: fires when the user releases the key

Mouse Events

  • onclick: fires when the user clicks on an HTML element
  • ondblclick: fires when the user double clicks on an HTML element
  • ondrag: fires when the user drags an HTML element
  • onmouseover: fires when a user hovers the mouse cursor over an HTML element
  • onmousemove: fires when a user moves the mouse cursor over an HTML element

Reference: Mozilla Developer Web Events

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s