# addEventListener y manejo del DOM
**addEventListener** escucha un evento y ejecuta una función, estos dos argumentos se le pasan por parametros.
Partiendo de este código html, voy a utilizar **addEventListener** para escuchar el evento **'click'**, ejecutar la función **sumar()** y mostrar el resultado de la suma por pantalla.
### HTML
```htmlembedded=
<input id="num1" placeholder="Escribe un número">
<input id="num2" placeholder="Escribe otro número">
<button id="btn">Sumar</button>
```
### JavaScript
Lo primero voy a seleccionar los elementos del **DOM** para poder trabajar posteriormente con ellos.
```javascript=
const num1 = document.querySelector("#num1");
const num2 = document.querySelector("#num2");
const btn = document.querySelector("#btn");
```
El código de la función sumar sería el siguiente.
```javascript=
function sumar(num1, num2) {
return num1+num2;
}
```
Ahora con **addEventListener** voy a escuchar el evento **'click'** y a ejecutar la función **sumar()** del botón Sumar.
```javascript=
btn.addEventListener("click", sumar)
```
Pero en este punto me falta mostrar el resultado al usuario por pantalla. Para ello voy a utilizar de nuevo la manipulación del **DOM** ayudándome de JavaScript.
Lo primero que voy a hacer es crear un nuevo elemento HTML, en este caso un nuevo párrafo vacío y añadirlo al **body** de mi **HTML**.
```javascript=
const parrafo = document.createElement("p");
document.body.append(parrafo);
```
Ahora que tengo el párrafo creado voy a modificar la función **sumar()** para que manipule el **DOM** y añada el resultado de la suma al párrafo que he creado y se muestre por pantalla.
```javascript=
function sumar() {
const result = parseInt(num1.value) + parseInt(num2.value);
parrafo.innerText = result
}
```
Como se puede observar en el código anterior hay varias cosas que comentar. He tenido que extraer el valor introducido por el usuario en cada input accediendo a él por medio de **".value"**. El valor obtenido es de tipo **String** por tanto he tenido que transformarlo a tipo entero con el método **parseInt()**. Gracias a esto ahora si se pueden sumar los valores introducidos por el usuario.
## Resultado final
Para finalizar voy a mostrar el código completo del ejercicio, tanto el HTML como el JavaScript y una captura de la salida por pantalla de dicho código.
### HTML
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="num1" placeholder="Escribe un número">
<input id="num2" placeholder="Escribe otro número">
<button id="btn">Sumar</button>
<script src="./script.js"></script>
</body>
</html>
```
### JavaScript
```javascript=
const num1 = document.querySelector("#num1");
const num2 = document.querySelector("#num2");
const btn = document.querySelector("#btn");
btn.addEventListener('click', sumar);
const parrafo = document.createElement("p");
document.body.append(parrafo);
function sumar() {
const result = parseInt(num1.value) + parseInt(num2.value);
parrafo.innerText = "Resultado: " + result
}
```
### Captura salida por pantalla
***
## Otros eventos en JavaScript
>**Nota:**
*Cada evento tiene un nombre, por ejemplo "click". Además en el propio código HTML podemos asociar manejadores de eventos mediante atributos, que son usados para invocar una serie de comandos cuando se produce un evento sobre ese elemento. Los atributos que podemos usar en el HTML para asociar manejadores de eventos tienen siempre el prefijo "on" seguido del nombre del evento. Por ejemplo, "onclick".*
**blur (onblur):** Se desata un evento onblur cuando un elemento pierde el foco de la aplicación.
**focus (onfocus):** El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.
**change (onchange):** Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento.
**click (onclick):** Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace.
**dragdrop (ondragdrop):** Se produce cuando un usuario suelta algo que había arrastrado sobre la página web.
**keydown (onkeydown):** Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación.
**keypress (onkeypress):** Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla.
**keyup (onkeyup):** Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla.
**mousedown (onmousedown):** Se produce el evento onmousedown cuando el usuario pulsa el botón del mouse sobre un elemento de la página, se suelte o no el botón.
**mousemove (onmousemove):** Se produce cuando el ratón se mueve por la página.
**mouseout (onmouseout):** Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página.
**mouseover (onmouseover):** Este evento se desata cuando el puntero del ratón entra en el área ocupada por un elemento de la página.
**mouseup (onmouseup):** Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado.
**move (onmove):** Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame.
**resize (onresize):** Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga.
**reset (onreset):** Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario.
**select (onselect):** Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.
**submit (onsubmit):** Ocurre cuando el visitante aprieta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho.
**unload (onunload):** Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload.
## Otros eventos en JavaScript 1.3
**dblClick (ondblclick):** Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link.
**scroll (onscroll):** Este evento se produce cuando se realiza scroll o desplazamiento. Este desplazamiento se puede realizar en la página completa, pero también en elementos de la página que tengan sus propias zonas de scroll.
Sign in with Wallet
Connect another wallet