Event handling

As explained in Secrets of the JavaScript Ninja, Second Edition

The phase of a web application's lifecycle in which the program waits for events and invokes event handlers.

Event handling is the phase when a browser waits for events and invokes the handlers registered for them. It follows page building, where JavaScript can register handlers with addEventListener. section 2.1 section 2.4

Events take turns:

• The browser places detected events in a queue in the order they occur. section 2.3.1
• The event loop checks the queue and runs the handler for its next event, if one exists. section 2.3.1
• Only one handler runs at a time; later events wait until it finishes. Long-running handlers can make an application unresponsive. section 2.3.3 section 2.3.1

Mouse moves and clicks

A page registers mousemove and click handlers on the body. Each handler adds a message to a list; if a click occurs while the mousemove handler runs, it waits in the queue. section 2.1 section 2.3.3

Figure 2.8. In the event-handling phase, all events (whether coming from the user, such as mouse clicks and key presses, or coming from the server, such as Ajax events) are queued up as they occur and are processed as the single thread of execution allows.

The diagram summarizes how user- and server-generated events enter the queue and are processed one at a time. section 2.3.1

How Secrets of the JavaScript Ninja, Second Edition covers it

How deep it goes

Explains event queuing, sequential handler execution, and responsiveness, while deferring detailed performance effects.

Examples

Uses mousemove and click events to append messages to a list in the DOM.

What you can do after

Understand how browsers queue events, invoke handlers, and defer later events until the current handler finishes.

How it connects

Connects event handlers with the event loop, event queue, and DOM updates.

liveBookmanning.com

Read Secrets of the JavaScript Ninja, Second Edition on liveBook Get the book at manning.com

Related concepts

• handleruses · A handler is a callable or software component that processes an event, request, message, or other input and performs associated processing.
• callbackused by · A callback is a function or other callable supplied to software for invocation later in response to a specified event, condition, or point in execution.
• event queueused by · An event queue is an ordered structure that buffers events until an event-handling system or consumer can process them.
• attributeconfigured by · An attribute is a named property, value, or piece of information associated with an entity, object, or program element.
• single-threaded execution modelconfigured by · A single-threaded execution model runs program work on one thread of control at a time, potentially interleaving progress among tasks.

This explainer was generated by Manning's knowledge graph from the text of Secrets of the JavaScript Ninja, Second Edition. The section links point to the parts of the book it draws on.