A developer is creating a simple webpage with a button.

Requirement:

The message should be displayed only on the first click of the button.

Original behavior:

The handler listen is attached with button.addEventListener( ' click ' , listen);.

That means listen is called on every click until the listener is removed or configured otherwise.

Two correct ways to ensure the listener only fires once:

Use the once option in addEventListener

Remove the event listener after the first run inside the handler

Option C:

On line 06, add an option called once to button.addEventListener().

This means modifying line 06 to:

button.addEventListener( ' click ' , listen, { once: true });

The once: true option tells the browser:

Call the listen function at most once.

After it is called the first time, automatically remove the listener.

So:

First click: alert shows, listener is removed automatically.

Subsequent clicks: no further calls to listen, no alerts.

This satisfies the requirement.

Option D:

On line 04, use button.removeEventListener( ' click ' , listen);

This means updating the handler:

function listen(event) {

alert( ' Hey! I am John Doe ' );

button.removeEventListener( ' click ' , listen);

}

Now:

On the first click, listen is executed:

It shows the alert.

It removes itself from the button’s click listeners.

On subsequent clicks, listen is no longer registered, so nothing happens.

This also satisfies the requirement.

Why A and B are incorrect:

Option A:

On line 04, use event.stopPropagation();

event.stopPropagation() stops the event from bubbling up the DOM tree.

It does not prevent the current listener from being called again in the future.

The click handler will still run on every click; it just prevents other listeners higher in the DOM from receiving the event.

Option B:

On line 02, use event.first to test if it is the first execution.

There is no built-in event.first property in standard DOM events.

This property does not exist and will be undefined.

You would need your own external flag (let hasRun = false;) to track first execution, but that is not what B describes.

Therefore, the two correct modifications are:

Answer: C, D

Study Guide / Concept References (no links):

addEventListener options object: { once: true }

removeEventListener to manually deregister event handlers

Event propagation (event.stopPropagation) vs handler lifecycle

DOM event model and listener registration