Suggest an edit

Improve this article

Refine the answer for “How does onclick differ from addEventListener()?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. The main difference

| Characteristic | `onclick` | `addEventListener()` |
|---|---|---|
| Number of handlers | Only one - a new one overwrites the old one | You can add several |
| Removal | Just assign `null` | Via `removeEventListener()` |
| Flexibility | Only one event (e.g. `onclick`) | Any event: `click`, `keydown`, `scroll`, `input`, `customEvent` |
| Extra options | None | Available (`once`, `capture`, `passive`) |
| Compatibility | Old, supported everywhere | Modern, supported in all modern browsers |

## 2. Example: overwriting a handler

```javascript
const btn = document.querySelector('#btn');

// first handler
btn.onclick = () => console.log('First');

// second handler
btn.onclick = () => console.log('Second');
```

In the end, clicking only outputs

```javascript
Second
```

because the second one **overwrote** the first.

But with `addEventListener()` both fire:

```javascript
btn.addEventListener('click', () => console.log('First'));
btn.addEventListener('click', () => console.log('Second'));
```

On click:

```javascript
First
Second
```

## 3. Example of removing a handler

With `onclick`:

```javascript
btn.onclick = null; // removes the handler
```

With `addEventListener`:

```javascript
function handler() {
  console.log('click');
}

btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);
```

## 4. Example with options (available only with addEventListener)

```javascript
btn.addEventListener('click', handler, { once: true });
```

The handler fires **only once** and is automatically removed.
This is not possible with `onclick`.

## 5. You can assign any events

With `onclick` you can only use "click", but with `addEventListener` you can use **any type**, even a custom one:

```javascript
element.addEventListener('myCustomEvent', () => console.log('custom event!'));
```

## 6. An example of the difference in HTML

You can add a handler right in HTML:

```javascript
<button onclick="alert('Hello')">Click</button>
```

But this is **not recommended** - it mixes structure (JS inside HTML) and is hard to maintain.
Modern practice is to always use `addEventListener()` in JS.

## Summary

|  | `onclick` | `addEventListener()` |
|---|---|---|
| Can assign multiple handlers | No | Yes |
| Can control behavior (once, capture) | No | Yes |
| Can listen for any events | Click only | Any |
| Can be used directly in HTML | Yes | No |
| Modern standard | Legacy | Recommended |

> **Conclusion:**
> `onclick` is a simple but outdated way, fine for small tasks.
> `addEventListener()` is the modern, flexible, and correct way to assign events in JavaScript.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts384 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.