The event loop and listeners

How a graphical interface reacts: events arrive in a queue, a loop hands them out one by one on the UI thread, the listeners registered on the source run, the event propagates, and a long task freezes everything.

26 cards
3 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link

A few cards from the deck

Event: what is it?
Show the answer
A fact that occurred in the application, triggered by the user or the system: a click, a key press, a window closing, a timer ending.
In event-driven programming the program no longer calls what comes next itself: it waits for an event and reacts. The event object carries its source and its type.
The button is a child of the panel, and the button is clicked. In what order is the log written?

```javascript
panneau.addEventListener('click', () => journal.push('C'));
bouton.addEventListener('click', () => journal.push('A'));
bouton.addEventListener('click', () => journal.push('B'));
`
- A, B, C
- C, A, B
- A, C, B
- B, A, C
Show the answer
A, B, C
The listeners of one source run in the order they were added (A then B). Then the event bubbles up to the parent, whose listener C runs last, even though it was registered first.
The event object passed to the listener gives its type and its …, that is, the component on which the event occurred.
Show the answer
The event object passed to the listener gives its type and its source, that is, the component on which the event occurred.
One listener can serve several buttons: getSource() in JavaFX or event.target in JavaScript tells which one reacted.
Listener: what is it?
Show the answer
Code registered with a component so that it is called when an event of a given type occurs on it.
You never call it yourself: you plug it in (setOnAction, addEventListener) and the loop runs it. It is also called an event handler.
This time listener A calls event.stopPropagation(). What does the log hold after the click on the button, a child of the panel?

```javascript
panneau.addEventListener('click', () => journal.push('C'));
bouton.addEventListener('click', (event) => {
journal.push('A');
event.stopPropagation();
});
bouton.addEventListener('click', () => journal.push('B'));
`
- A
- A, B
- A, B, C
- C
Show the answer
A, B
stopPropagation() stops the event from bubbling up to the parent, so C does not run. The other listeners on the same button still run: only stopImmediatePropagation() would stop them.

Study this deck