La manipulación de eventos en JavaScript se realiza principalmente a través de tres técnicas:
1. Eventos en línea: Esta es la forma más antigua de manejar eventos y la sintaxis es simple. Se hace directamente en el HTML.
```html
```
2. Manejador de eventos tradicional: Existen métodos que pueden asignar controladores de eventos como `element.onclick`.
```javascript
let button = document.getElementById(‘myButton’);
button.onclick = function() {
alert(‘Haz hecho clic en el botón’);
}
```
3. EventListener: Este es el método más moderno y generalmente preferido para manejar eventos. `addEventListener` no sobrescribe los controladores de eventos existentes en los elementos y puede agregar varios controladores de evento a un solo elemento sin sobrescribir los controladores de eventos anteriores.
```javascript
let button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function() {
alert(‘Haz hecho clic en el botón’);
});
```
Cabe mencionar que se pueden manejar una amplia variedad de eventos aparte de los clics, como el teclado (`keydown`, `keyup`, `keypress`), el mouse (`mousedown`, `mousemove`, `mouseup`), el formularios (`submit`, `change`, `focus`), entre otros.
También, se puede remover el manejador de eventos utilizando `removeEventListener`.
```javascript
let myFunction = function() {
alert(‘Haz hecho clic en el botón’);
};
let button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, myFunction);
// cuando queramos removerlo
button.removeEventListener(‘click’, myFunction);
```
Debes asegurarte de pasar la misma función de referencia a `removeEventListener` que se pasó a `addEventListener`.
