---
name: on-listener
description: Usare quando l'utente vuole aggiungere event listener agli elementi DOM con una sintassi più compatta e leggibile.
---

# On Listener

Questa skill fornisce uno shortcut per `addEventListener()`, rendendo il codice più leggibile e riducendo la verbosità quando si gestiscono molti eventi.

## Procedura

1. **Aggiungere un listener**: Usare `on(elemento, evento, callback)`
2. **Definire il callback**: La funzione callback riceve l'oggetto event
3. **Rimuovere listener**: Usare il metodo nativo `removeEventListener()`

## Regole

- `elemento` deve essere un nodo DOM valido
- `evento` deve essere una stringa con il nome dell'evento (es: 'click', 'mouseover')
- `callback` deve essere una funzione
- Mantiene il contesto `this` dell'elemento, come il metodo nativo
- Non gestisce automaticamente la rimozione dei listener

## Esempi

### Esempio 1: Click su un bottone

```javascript
const btn = document.getElementById('myBtn');
on(btn, 'click', () => {
    console.log('Bottone cliccato!');
});
```

### Esempio 2: Mouse over su un elemento

```javascript
const box = document.querySelector('.box');
on(box, 'mouseover', (e) => {
    e.target.style.backgroundColor = 'yellow';
});
```

### Esempio 3: Gestire più eventi

```javascript
const input = document.getElementById('myInput');
on(input, 'focus', () => console.log('Focus acquistato'));
on(input, 'blur', () => console.log('Focus perso'));
on(input, 'change', (e) => console.log('Valore cambiato:', e.target.value));
```

### Esempio 4: Usare il contesto this

```javascript
on(document.querySelector('button'), 'click', function() {
    console.log(this); // this = l'elemento button
    this.style.backgroundColor = 'green';
});
```

## Dettagli Aggiuntivi

- **Eventi comuni**: 'click', 'mouseover', 'mouseout', 'keydown', 'keyup', 'submit', 'change', 'focus', 'blur', 'load'
- **Event object**: Il callback riceve l'oggetto event standard con proprietà come `target`, `type`, `keyCode`, ecc.
- **Compatibilità**: Funziona con tutti gli eventi DOM standard
- **Prestazioni**: Stessa performance di `addEventListener()`
- **Note**: Per rimuovere un listener, usare `elemento.removeEventListener(evento, callback)`