Skip to content

DA5. Event Handlers and Callbacks

Statement

Choose two of the following terms. Describe the following importance of the term in computer graphics and terms and provide examples of how they are implemented within Javascript, WebGL, and the Three.js API. End your response with one or two questions about the term you chose.

  • Event handlers
  • Callbacks
  • Registering a callback
  • Main event loop

Respond to three of your peers who chose a different term than you (if possible). In your response, provide an answer to the question(s) they provided.

Answer

Introduction

Event-driven programming (EDP) is a way of decoupling system components by allowing them to communicate through events. An event is a change of state that needs to be communicated to the concerned components. Event-driven development includes components such as events, event producers (triggers), event consumers (listeners or subscribers), and actions (callbacks); where all communicating with each other through an event loop (AWS, 2024).

There are many benefits to using EDP, but it is especially useful in reactive-GUI where actions should be triggered only by user interactions (e.g., moving the mouse for moving the character in a video game). For this text, I will be discussing the first two terms: Event handlers and Callbacks; but I will briefly introduce the other two terms as well.

Event Handlers

An event handler, especially in the JavaScript context, is a function (action) that is called when an event is triggered; it contains the logic that should be executed as a response to the event (Rahul & Hanna, 2024). For example, in a Three.js scene with OrbitControls, an OnMouseMove event handler causes the camera to change its position as the mouse moves.

Usually, an event listener is used to register the event handler which will be executed when the event is triggered. In JavaScript, the native addEventListener method is used to register event handlers as in the example below:

// Registering a click event handler to click events anywhere in the document
document.addEventListener("click", function () {
    console.log("The document was clicked");
});

The topic has triggered some questions in my mind such as: How events are propagated in the DOM tree? What would happen if there are multiple event handlers for the same event? What happens to the event when the execution of the event handler is failed?

Callbacks

A callback is a function that is passed as an argument to another function that is expected to control its execution. The function that receives the callback is responsible for calling it when necessary. Callbacks are usually used in asynchronous operations where the response is not immediate such as fetching data/files over the network or in TextureLoader in Three.js.

A famous example of Three.js/JavaScript callback is the requestAnimationFrame function which is used to render the scene at a consistent frame rate. The function takes a callback as an argument which is then called after the current frame is rendered as in the example below:

function animate() {
    // passing `animate` as a callback so it will be called after the current frame is rendered
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

Registering a Callback

Registering a callback is a way for library developers to allow intermediate developers to hook their own customized handlers and callbacks onto the library’s events. It is also another way of saying that a callback is being added to an event handler. For example, in JavaScript, the addEventListener method is used to register a callback to an event handler.

Main Event Loop

JavaScript is a single-threaded language, and it uses an event loop to handle asynchronous operations. The program keeps looping waiting for new events to be triggered or delivering the results of the executed callbacks to their callers. The event loop appears in Three.js with the infinite calls to requestAnimationFrame which keeps executing the callbacks and constructing the scene in every frame.

Conclusion

EDP differs from other programming paradigms in that it is asynchronous and non-blocking. When the program first starts, it registers all event handlers, and then enters the main event loop, which keeps waiting for events. Producers trigger events and push them into the event queue, where they are picked up by the event loop and delivered to their appropriate consumers (handlers) by adding their callbacks to the execution stack along with the event data. Callbacks then start executing according to the rules of the event loop. The event loop keeps looping waiting for more events until the program is terminated. There may be more steps involved in the process, but this is the general idea (Neubauer, 2023).

References

‌ ‌