Handle Browser Events with Listeners and Delegation

Create a folder containing two local files: index.html and events.js. This small interface is Reading List Lab. It has one initial Preview button that will receive a direct listener in this step, plus form controls that you will use later.

Save this complete scaffold as index.html.

A listener connects a browser interaction to a named handler. Keep behavior in JavaScript rather than placing an inline event attribute such as onclick in HTML.

During page setup, addEventListener() receives a function reference. Writing handlePreview gives the browser the handler to run later. Writing handlePreview() would call the handler immediately during setup, before anyone activates the button.

Save this as events.js. The selectors connect the supplied page elements to the fixed variable names used throughout this tutorial.

A listener should describe the interaction you need—not merely the element you can see.

• Use click when a button is activated.
• Use input while a person edits a text control; it reports each change as it happens.
• Use change when a selection is changed and committed; it is a clear fit for the Format select.
• Use submit for the Reading List Lab form itself.

Keep the direct click listener on the first Preview button from the previous step. Do not treat the Add item button’s click as the whole form interaction: a form can also be submitted from its title field.

input is useful when feedback should follow each edit in the Title field. For a text field, change waits until the edited value is committed, commonly when the field loses focus. The Format select represents a committed choice, so change is a useful match.

For now, these handlers only report the controls’ current values with textContent. They do not filter items or build application state.

In events.js, keep the existing direct Preview listener. Then add these two named handlers and registrations. The element variables were supplied in the Reading List Lab scaffold.

A click handler receives an event object from the browser. In this Reading List Lab example, two properties answer different questions:

• event.target: Where did this click begin?
• event.currentTarget: Which element owns the listener that is running now?

The first Preview button contains a nested <span>Preview</span>. When a click begins on that visible span, target is the span. The direct listener is still attached to the surrounding Preview button, so currentTarget is the button.

Use currentTarget in the direct Preview handler because it is the button whose listener is executing. It remains the button even when the click begins on its nested span.

In events.js, replace the existing handlePreview function with this version. Keep the direct listener registration below it.

events.js — direct Preview handler

A click travels along an event path through the page: capture → target → bubbling.

For this focused trace, click the padding or background of the first Preview button—not the word inside its nested <span>. The button is then the event origin.

• A listener on list registered with { capture: true } runs during capture.
• The direct listener on previewButton runs at the target.
• A listener on list registered without a capture option runs during bubbling.

event.target stays the originating button for this trace. event.currentTarget changes to the element whose listener is currently running.

Temporarily replace your current handlePreview function and its direct Preview-button registration in events.js with the block below. Keep the existing element selections plus the title and format listeners from earlier steps.

The first list listener explicitly uses capture. The second list listener uses the default registration, so it observes the bubbling click.

events.js — diagnostic revision

A listener and a default action are separate. A listener can run when an event occurs; the browser may then perform its built-in behavior. For a valid form submission, that behavior commonly navigates or reloads the page. For the Read notes link, it moves to the #notes destination.

In Reading List Lab, cancel only the valid form submission so you can show local feedback. Leave the link alone. Do not use propagation control as a substitute for cancellation.

Listen for submit on form, not only for a click on its submit button. This one listener handles a click on Add item and an ordinary Enter submission from the title field.

Native required validation happens first. If the required title is empty, the browser can block submission before the submit event is dispatched. Keep the form validation intact: do not add novalidate.

For a valid submission, the handler below cancels navigation and writes a local message. It does not send, save, or add data yet.

In events.js, add this handler and registration alongside your existing listeners. Keep the registration only once.

The list already contains repeated Preview buttons. Instead of giving each button its own listener, delegation puts one click listener on the stable #reading-list ancestor.

A click on a button—or on its nested <span>—bubbles to the list. The delegated handler starts with event.target, finds the nearest matching Preview button, and acts only when that button belongs to this list.

This is a bounded use of delegation: the listener handles only Preview actions inside #reading-list.

Open events.js and replace its contents with the revision below. Save the file and reload index.html.

This revision removes the earlier direct Preview listener and the temporary capture and bubbling diagnostic listeners. The input, select, and form listeners remain in place. The previewButton selection remains part of the shared page setup, but delegation no longer registers a listener on that individual button.

The new list listener does not call preventDefault() or stopPropagation(). It reports a Preview action and leaves browser default actions and other listeners alone.

Complete replacement for events.js

Try the behavior in your local page:

1. Click the visible Preview text inside the Event Basics button.
2. Click the visible Preview text inside the Delegation Notes button.
3. Click an area of the list that is not inside a Preview button.

The first two clicks should update feedback with the matching title. The third click should not create a Preview message. The nested span works because the handler finds its enclosing action button.

Your delegated click listener is attached to the existing #reading-list element—not to each Preview button. When you append a new list item, its Preview button becomes another descendant of that same listener-owning list.

A click on either button bubbles to list. The existing handleListClick handler can then find the clicked button, including when the click begins on its nested <span>Preview</span> label. No new button listener is needed.

In events.js, add the helper after the element selections and before the handlers. Then replace the existing handleSubmit function with the version below. The form's submit listener stays registered once, and handleListClick stays registered on the existing list.

The helper uses familiar safe DOM operations to create the same button structure as the original entries. It does not register a listener on the new button.

Complete the missing statement in the submit handler. The variables already hold the submitted title and its display format. Connect those prepared values to the supplied helper; do not add a listener to the new button here.

Save events.js and refresh your local Reading List Lab.

1. Activate the nested Preview label for the original Event Basics entry and note the feedback.
2. Enter Dynamic Controls, choose Video, and submit the form.
3. Confirm that a new entry appears, then activate the nested Preview label in that new entry.

Perform this check in your own browser. Do not upload files or paste your full code.

removeEventListener() does not search for code that merely looks similar. It removes a listener only when three parts match the original registration:

1. the event type,
2. the same function reference, and
3. the same capture setting.

A function is a value. Writing a new function—even with identical statements—creates a different function value, so it cannot remove the earlier listener.

This lets you remove temporary diagnostics without touching the delegated handleListClick listener that keeps Preview controls working.

Temporarily add these named diagnostics and their registrations after the existing delegated Preview registration in events.js. Keep the existing list.addEventListener('click', handleListClick); line unchanged.

Version A confirms that the diagnostics and the delegated Preview handler can observe the same click. Next, add the removal calls below the temporary registrations, save, and refresh. This is Version B: the diagnostic messages disappear, while Preview feedback continues to update.

Your completed Reading List Lab now has a small but complete event flow. The title field reports live edits through an input listener. The format select reports a committed choice through change. The form’s submit handler keeps a valid local submission on the page, and the list’s one delegated click listener handles every Preview action.

Use this step to verify observable behavior rather than add a new pattern. A click on the text inside a Preview button begins at the nested span, bubbles to the stable list, and is resolved back to its actionable button by the delegated handler.

Save the repaired handler in events.js, keep the other completed handlers in place, and reload your local index.html. Then perform this compact verification sequence. For the Preview checks, click the visible word inside each button rather than an empty part of the button.