No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
23H
35M
41S
Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

addEventListener

14/29
Recursos

Aportes 156

Preguntas 39

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

me parecio gracioso

const input1 = document.querySelector("#numero1"); 
const form = document.querySelector("#form"); 
const input2 = document.querySelector("#numero2"); 
const btn = document.querySelector("#btncalcular"); 
const suma = document.querySelector("#sumaid");

//addEventListener

form.addEventListener("mouseover", enviarFormulario)

function enviarFormulario(e){
    e.preventDefault();

    alert("virus")
}

鉁 Prob茅 los eventos keypress y mouseover, haciendo esto repas茅 un poco de anteriores cursos 馃檶. Puedes probarlo en CodePen y dejo el c贸digo en GitHub

.

index.html

<!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>addEventListener</title>

  <link rel="stylesheet" href="./style.css">

  <!-- Montserrat Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">

</head>
<body>
  <h1><u>Eventos</u></h1>

  <p><code>keypress</code> Escribe para cambiar el emoji.</p>
  <input id="emojiInput" type="text" maxlength="250">
  <span id="emojiResult" style="font-size: 32px;"></span>

  <p><code>mouseover</code> No choques con las tuber铆as.</p>
  <button id="reset" disabled>Reiniciar</button>
  <div id="background">
    <span id="dieCount">MUERTES: 0</span>

    <div id="obstacles">
      <div class="pipes">
        
        <div class="pipeHitBox down">
          <img class="pipe down" alt="pipe" src="https://github.com/samuelcust/flappy-bird-assets/blob/master/sprites/pipe-green.png?raw=true">
        </div>
        <div class="pipeHitBox">
          <img class="pipe" alt="pipe" src="https://github.com/samuelcust/flappy-bird-assets/blob/master/sprites/pipe-green.png?raw=true">
        </div>

      </div>
    </div>

    <div id="message" hidden><span>PERDISTE</span></div>
  </div>
  <span id="comment">La hit box no es perfecta, pero funciona :D</span>

  <script src="./script.js"></script>
</body>
</html>

.

script.js

/* ************ keypress ************ */
const emojiInput = document.getElementById('emojiInput');
const emojiResult = document.getElementById('emojiResult');

emojiInput.addEventListener('keypress', changeEmoji);

function changeEmoji() {
  emojiPick = emojis[Math.floor(Math.random() * emojis.length)];
  emojiResult.innerHTML = emojiPick;
}

/* ************ mouseover ************ */
const resetBtn = document.getElementById('reset');
const pipesHitBox = document.querySelectorAll('.pipeHitBox');
const message = document.getElementById('message');
const dieCount = document.getElementById('dieCount');

// Agregar addEventListener a los tubos
pipesHitBox.forEach(function (pipeHitBox) {
  pipeHitBox.addEventListener('mouseover', youCrashed);
});

let i = 1;
function youCrashed() {
  // Habilitar bot贸n y mostrar mensaje "PERDISTE"
  resetBtn.disabled = false;
  message.style.display = 'flex';

  // Aumentar contador
  dieCount.innerText = 'MUERTES: ' + i++;
}

resetBtn.addEventListener('click', function () {
  // Deshabilitar bot贸n y ocultar mensaje
  resetBtn.disabled = true;
  message.style.display = 'none';
});

// -----------------------------------------------------------------------------

// Lista de emojis: https://gist.github.com/ikr7/c72843556ef3a12014c3
const emojis; // ESTA PARTE DE LOS EMOJIS ESTA EN MI REPOSITORIO TAMBI脡N, ES UNA LISTA MUY LARGA xD

.

style.css

:root {
  --pipe-height: 260px;
}

body {
  font-family: 'Montserrat', sans-serif;
}

code {
  color: green;
  font-size: 15px;
  font-weight: bold;
  background-color: lightgrey;
  padding: 2px 3px;
  border-radius: 3px;
}

#reset {
  margin-bottom: 10px;
}

#background {
  width: 250px;
  height: 300px;
  
  position: relative;
  display: flex;
  justify-content: space-evenly;

  background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fellisonleao.github.io%2Fclumsy-bird%2Fdata%2Fimg%2Fbg.png&f=1&nofb=1');
  background-size: 536px;
  overflow: hidden;

  cursor: url('https://raw.githubusercontent.com/samuelcust/flappy-bird-assets/master/sprites/yellowbird-upflap.png'), default;
}

#dieCount {
  position: absolute;
  top: 5px;
  left: 5px;

  color: red;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0px 0px 3px white;
}

#message {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-color: rgba(255, 0, 0, 0.4);

  color: white;
  font-size: 36px;
  font-weight: 700;

  text-shadow: 0px 0px 10px red;
}

.start, .finish {
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  text-align: center;
}

#obstacles {
  margin: 0 30px;

  display: flex;
  justify-content: center;
}

.pipes {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  position: relative;
}

.pipeHitBox {
  width: 74px;
  height: var(--pipe-height);

  display: flex;
  justify-content: flex-end;

  position: relative;
}

.pipe {
  height: var(--pipe-height);

  position: relative;
  top: 23px;
}

.pipe.down {
  top: -2px;
  transform: rotate(180deg);
}

.pipeHitBox.down { top: 10px; }
.pipeHitBox { bottom: -20px; }

#comment {
  color: gray;
  font-size: 10px;
  font-style: italic;
}

Me pareci贸 genial este evento, lo ve铆a a menudo en algunas p谩ginas.
Llama a alguna funci贸n cuando copiamos un texto!

Adem谩s otro evento incre铆ble es cuando entramos a un input,
Es lo mismo del ejemplo anterior solo que cambiamos el evento 鈥渃opy鈥 por 鈥渇ocus鈥

Pueden encontrar m谩s informaci贸n sobre los eventos en la gu铆a de MDN siguiendo este link https://developer.mozilla.org/en-US/docs/Web/Events 馃馃徏

Para que funcione el addEventListener, es muy importante que en el archivo html, la etiqueta script este al final del body, para que cargue primero el 谩rbol del DOM.
Sino tira el siguiente error:
Uncaught TypeError: Cannot read properties of null (reading 鈥榓ddEventListener鈥)

addEventListener:

Este metodo sirve para escuchar cualquier tipo de evento que ocurra dentro de un objeto, estos objetos pueden ser un elemento HTML, una ventana, el mismo documento, un XMLhttpRequest.

Los eventos pueden ser:

  • blur: Cuando el elemento pierde el foco.

  • click: El usuario hace clic sobre el elemento.

  • dblclick: El usuario hace doble clic sobre el elemento.

  • focus: El elemento gana el foco.

  • keydown: El usuario presiona una tecla.

  • keypress: El usuario presiona una tecla y la mantiene pulsada.

  • keyup: El usuario libera la tecla.

  • load: El documento termina su carga.

  • mousedown: El usuario presiona el bot贸n del rat贸n en un elemento.

  • mousemove: El usuario mueve el puntero del rat贸n sobre un elemento.

  • mouseout: El usuario mueve el puntero fuera de un elemento.

  • mouseover: El usuario mantiene el puntero sobre un elemento.

  • mouseup: El usuario libera el bot贸n pulsado del rat贸n sobre un elemento.

  • unload: El documento se descarga, bien porque se cierra la ventana, bien porque se navega a otra p谩gina.

    Syntaxis

   element.addEventListener(elemento, funcion);
//A QUI脡N -    QU脡 ACCI脫N - CUAL FUNCION
btn.addEventListener('click',btnOnClick);

Yo jugue con Donal Trump y con el evento onmouseover, cada que le pasaba el mouse hac铆a que la imagen de la naranja cambiara a una cara graciosa y como seleccionaba en tipo de imagen aleatoriamente de entre 4, imprimia el n煤mero que le toc贸 en la consola.

Mi HTML

<!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>Donal Trump</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
        body{
            background-color: black;
            padding: 0;
            margin: 0;
        }
        main{
            font-family: 'Source Sans Pro', sans-serif;
            color: whitesmoke;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h1{
            text-align: center;
        }

        #imgDt{
            width: 450px;
            border-radius: 50%;
            
        }

    </style>
</head>
<body>
    <main>
        <div>
            <h1>隆No lo molestes!</h1>
            <img id="imgDt" onmouseover="bother()" src="./imgs/normal.jpeg">
            
        </div>
        
    </main>
    <script src="./ejercicio_eventos.js"></script>
</body>
</html>

Mi .js (Descargu茅 las imagenes)


const imgDt = document.querySelector("#imgDt");

function bother(){
    let random = parseInt((Math.random() * 4));
    console.log(random);
    switch(random){
        case 1:
            imgDt.setAttribute("src", "./imgs/cambio1.jpg");
            break;
        case 2:
            imgDt.setAttribute("src", "./imgs/cambio2.jpeg");
            break;
        case 3:
            imgDt.setAttribute("src", "./imgs/cambio3.jpeg");
            break;
        case 4:
            imgDt.setAttribute("src", "./imgs/cambio4.jpg");
            break;
    }
    
}

Lo que me gusta de VSCODE, es que agregas pocas letras y ya te da m茅todos, funciones, par谩metros, entre otros. Solo das enter o TAB y tar谩n.
Soy maestro de primaria y si as铆 fueran dise帽ar mis planeaciones de r谩pidas terminar铆a todo en calor.

Otra forma de evitar que el formulario se recargue es en el bot贸n de Calcular, asignarle el tipo 鈥淏utton鈥

As铆:

    <button type="button" id="btnCalcular">Calcular</button>

Pero es m谩s especializado lo que se hace en esta clase, por supuesto.

I have enjoyed this module a lot! 馃懄馃徎馃憤馃徎

Los eventos mouseover y mouseout detectan cuando el cursor est谩 por encima o por fuera de un elemento, en este caso un bot贸n. Los us茅 para mostrar un mensaje random:
mouseover

mouseout

Es imposible que JuanDC sea de este planeta

aqui esta la lista de lo eventos que podemos aplicar manejando el DOM:

**
Evento : | Descripci贸n | Elementos para los que est谩 definido
onblur: Deseleccionar el elemento => <button>, <input>, <label>,<select>, <textarea>, <body>
onchange: Deseleccionar un elemento que se ha modificado => <input>, <select>, <textarea>
onclick: Pinchar y soltar el rat贸n => Todos los elementos
ondblclick: Pinchar dos veces seguidas con el rat贸n => Todos los elementos
onfocus: Seleccionar un elemento => <button>, <input>, <label>,<select>, <textarea>, <body>
onkeydown: Pulsar una tecla y no soltarla => Elementos de formulario y <body>
onkeypress: Pulsar una tecla => => Elementos de formulario y <body>
onkeyup: Soltar una tecla pulsada => Elementos de formulario y <body>
onload: P谩gina cargada completamente => <body>
onmousedown: Pulsar un bot贸n del rat贸n y no soltarlo => Todos los elementos
onmousemove: Mover el rat贸n => Todos los elementos
onmouseout: El rat贸n 鈥渟ale鈥 del elemento => Todos los elementos
onmouseover:El rat贸n 鈥渆ntra鈥 en el elemento => Todos los elementos
onmouseup: Soltar el bot贸n del rat贸n => Todos los elementos
onreset :Inicializar el formulario => <form>
onresize :Modificar el tama帽o de la ventana => <body>
onselect: Seleccionar un texto =><input>, <textarea>
onsubmit :Enviar el formulario
onunload: Se abandona la p谩gina, por ejemplo al cerrar el navegador => <body>**

En el caso de querer usar una arrow function usando const para enviarle como callback del addEventListener deben primero estar primero la arrow function y luego si crear el eventListener. Recuerden que las variables de tipo <<const>> a diferencia de var deben ser declaradas antes de ser usadas:
La clave ac谩 es el HOISTING

hice un programa que calcula el porcentaje de 2 numeros aplicando html, css y javaScript

Quiz谩s, la forma m谩s interesante y vers谩til de gestionar los eventos de Javascript sea utilizando el m茅todo .addEventListener(). Te dejo un video de apoyo de como manejar evento en JavaScript, es como ver un repaso de 茅sta y la anterior clase, espero te sirva 馃槃 https://youtu.be/03eid8Lc8V8

addEventListener 14/28

Esta clase trabaja los siguientes puntos:

  • como utilizar la funci贸n 鈥渁ddEventListener鈥 en JavaScript para escuchar eventos de clic en un bot贸n y evitar errores al llamar a una funci贸n.
  • Tambi茅n se muestra como utilizar el evento 鈥渟ubmit鈥 en un formulario y se explica por qu茅 os formularios por defecto recargan la p谩gina al enviar los datos.
  1. EventListener en botones:

    En el c贸digo HMTL tenemos un bot贸n que desamos que realice una acci贸n cuando se hace clic en 茅l. En lugar de usar el atributo 鈥渙nlick鈥 directamente en en bot贸n, podemos utilizar la funci贸n addEventListener en JavaScript. Ej:

    <button id="miBoton">Clic Aqu铆</button>
    

    JAVASCRIPT

    const miBoton = document.querySelector('#miBoton');
    miBoton.addEventListener('click'. btnOnClick);
    
    function bntOnClick () {
    	console.log('se hizo clic en el bot贸n');
    }
    

    En este ejemplo utilizamos la funci贸n 鈥渜uerySelector鈥 para seleccionar el bot贸n con el ID 鈥渕iBoton鈥 y luego agregamos un 鈥淓ventListener鈥 que escucha el evento de 鈥渃lick鈥 en ese bot贸n. La funci贸n 鈥渂tnOnClick鈥 se ejecuta cuando se hace clic en el bot贸n, imprimiendo un mensaje en consola.

  2. Llamada de funci贸n en 鈥榓ddEventListener鈥

    Cuando se utiliza addEvent Listener no debemos incluir los par茅ntesis al llamar a la funci贸n que deseamos ejecutar. Por ejemplo esto es incorrecto:

    miBoton.addEventListener('click'.btnOnClick());
    

    Al incluir el par茅ntesis, la funci贸n se ejecutar谩 inmediatamente en lugar de esperar el evento de clic. Lo correcto es llamar a la funci贸n sin los par茅ntesis:

    miBoton.addEventListener('click'.btnOnClick);
    
  3. Evento submit en formularios

    En lugar de utilizar un bot贸n para realizar una acci贸n en un formulario, podemos utilizar el evento 鈥渟ubmit鈥 del formulario para ejecutar una funci贸n cuando se envien los datos del formulario. por ejemplo:

    <form id="miFormulario">
    	<label for="nombre">Nombre:</label>
    	<input type="text id="nombre" name="nombre" required>
    
    	<label for="correo">Correo Electr贸nico:</label>
    	<input type="email" id="correo" name="correo" required>
    
    	<button type="submit">Enviar</button>
    </form>
    
    const miFormulario = document.querySelector('#miFormulario');
    miformulario.addEventListener('submit'. enviarFormulario);
    
    function enviarFormulario(event) {
    	event.preventDefault();
    	console.log('se envi贸 en formulario');
    }
    

    En este ejemplo se utiliza la funci贸n querySelector para seleccionar el formulario con el ID miFormulario y luego agregamos un EventListener que escucha el evento de submit en ese formulario. La funci贸n 鈥渆nviar formulario鈥 se ejecuta cuando se env铆a el formulario, imprimiendo un mensjae en la consola.

    1. Evitar la recarga de p谩gina en formularios

      Cuando se env铆a un formulario utilizando el evento 鈥渟ubmit鈥, la p谩gina se recarga autom谩ticamente. para evitar esto, debemos utilizar la funci贸n 鈥減reventDefault鈥 en el objeto event que se pasa como par谩metro a la funci贸n que se ejecuta en el evento de 鈥渟ubmit鈥.

    Por ejemplo si tenemos un formulario con un bot贸n para sumar dos n煤meros, en lugar de escuhcar el evento de click del bot贸n, podemos asignarle un ID al formulario (por ejemplo 鈥渇ormulario鈥) y escuchar su evento de 鈥渟ubmit鈥. Luego podemos agregar una funci贸n llamada 鈥渟umarInputValues鈥 que tome los valores de los campos de entrada del formulario y los sume. Al hacer click en el bot贸n, se llamar谩 a la funci贸n 鈥渟umarInputValues鈥 en lugar de recargar la p谩gina.

    <form id="formulario">
      <label for="num1">N煤mero 1:</label>
      <input type="number" id="num1" name="num1">
      <br>
      <label for="num2">N煤mero 2:</label>
      <input type="number" id="num2" name="num2">
      <br><br>
      <button type="submit">Calcular</button>
    </form>
    
    <script>
      const form = document.querySelector('#formulario');
    
      form.addEventListener('submit', function(event) {
        event.preventDefault();
        sumarInputValues();
      });
    
      function sumarInputValues() {
        const num1 = Number(document.querySelector('#num1').value);
        const num2 = Number(document.querySelector('#num2').value);
        const resultado = num1 + num2;
        document.querySelector('#resultado').innerHTML = resultado;
      }
    </script>
    

驴Qu茅 hemos hecho? El m茅todo addEventListener es la forma m谩s habitual que usamos para registrar eventos. Recibe dos par谩metros: el tipo de evento que queremos 鈥渆scuchar鈥 y la acci贸n (o funci贸n) que queremos ejecutar cuando el evento suceda.

Amigo Lautaro Els, al declarar la funcion de esta manera tambien funciona. Gracias por tu aporte, que motivo a practicar mas eventos con buen animo.

function enviarFormulario(){
  alert('virus');
  };

Si VS Code te esta marcando event tachado:
Recuerden que event.preventDefault(); NO es una propiedad de js como tal. 鈥渆vent鈥 lo utilizamos por que es el parametro que le damos a la funcion, y en el ejemplo del profesor es event, pero deben cambiarlo al mismo nombre que tenga el prametro de su funcion.

function bnt_on_click (event_name){
    event_name.preventDefault();
};

Prob茅 con el evento 鈥榗hange鈥, obteniendo el objeto que sea ingresado en el input.

const numberOne = document.querySelector('.input1');
const result = document.querySelector('.result');

numberOne.addEventListener('change', (e) => {
    result.innerHTML = e.target.value
})

Estuve en la clase anterior intentando hacer la funci贸n mediante el addEventListener, y como hab铆a llamado a la funci贸n con (), la funci贸n se ejecutaba antes de llamarla.
Estuve como 20 minutos sin entender el error hasta que vine a esta clase jajaj, me pasa por ansioso.

JAJAJAJA como dice "Eso no nos funciona"
Muy comico

Mi c贸digo ya con la suma =)

const h1 = document.querySelector('h1');
const form = document.querySelector('#form');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

form.addEventListener('submit', sumarInputsValues);

function sumarInputsValues(event) {
    event.preventDefault();
    const sumaInputs = parseInt(calculo1.value) + parseInt(calculo2.value);
    pResult.innerText = "Resultado: " + sumaInputs;
}

Un datico: Cuando un evento se pone desde un atributo en html, se agrega el prefijo on, y cuando es a un addEventListener no se le pone el on:

Como atributo en html:

<button onmouseover="sumarInputValues()" type="button" id="btnCalcular" >Calcular</button>

Como par谩metro en un addEventListener:

btn.addEventListener('mouseover', sumarInputValues)

Les dejo la docuemntaci贸n de Mosilla sobe los events [aqui] (https://developer.mozilla.org/es/docs/Web/Events)

const h1 = document.querySelector('h1');
const form = document.querySelector('#form');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

// form.addEventListener('submit', sumarInputValues);

// function sumarInputValues (event) {
//     // console.log({event});
//     event.preventDefault();
//    const sumaInputs = input1.value + input2.value; 
//    pResult.innerText = "Resultado: " + sumaInputs;
// }

form.addEventListener('click', sumarInputValues);

function sumarInputValues (event) {
    // console.log({event});
    // event.preventDefault();
   const sumaInputs = input1.value + input2.value; 
   pResult.innerText = "Resultado: " + sumaInputs;
}

鈥渁帽adir un controlador de eventos鈥

Al agregar btn.addEventlistener no me reconoce el nombre de la funcion y por tanto no ejecuta el codigo, recibo sugerencias muchas gracias
aca dejo el html https://media.discordapp.net/attachments/999863585423503430/1024132774401155183/unknown.png?width=708&height=387

aca dejo mi js
https://media.discordapp.net/attachments/999863585423503430/1024132636333060106/unknown.png?width=708&height=292

Un Ejemplo sencillo para estudiar el uso de addEventListener ser铆a el siguiente:

<form id="myForm">
	<input type="text" id="myInput">
	<button type="submit" id="myBtn">Submit</button>

<script>
	var form = document.getElementById("myForm");
var input = document.getElementById("myInput");
var btn = document.getElementById("myBtn");

btn.addEventLIstener("click", function (event) {
    event.preventDefault();
    if (input.value === "") {
        alert("Por favor ingrese un valor en el input")
    } else {
        alert("Formulario enviado con el valor " + input.value)
    }
})
</script>

En este ejemplo, se est谩 utilizando addEventListener para escuchar el evento 鈥渃lick鈥 en un elemento de bot贸n dentro de un formulario. Cuando se hace clic en el bot贸n, se llama a una funci贸n que comprueba si el campo de entrada est谩 vac铆o o no. si est谩 vac铆o, se muestro una alerta indicando que debe ingresar un valor. Sino est谩 vac铆o, se muestra una alerta indicando que el formulario se ha enviado con el valor ingresado.

Adem谩s, ele event.preventDefault() evita que la p谩gina se recargue al hacer submit en el formulario y mantiene el flujo en JavaScript para poder procesar la informaci贸n del formulario.

Here are some of the most common event types and event names:

Mouse Events: click, dblclick, mousedown, mouseup, contextmenu, mouseout, mousewheel, mouseover
Touch Events: touchstart, touchend, touchmove, touchcancel
Keyboard Events: keydown, keyup, keypress
Form Events: focus, blur, change, submit
Window Events: resize, scroll, load, unload, hashchange

Source

Hola!

Comparto mi parte de la actividad:

HTML

<!DOCTYPE html>
<html lang="es">
<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>Tarea</title>

</head>
<body>
    <h1>Actividad Eventos</h1>    
    <button id="btn">Realiza click con tu mouse</button>
    <p id="parrafo"></p>
    <script src="./js/eventosTask.js"></script>
</body>
</html>

JS

const btn = document.querySelector("#btn");

btn.addEventListener("mouseup", actionMouse);

function actionMouse(event) {
  let outText = document.querySelector("#parrafo");
  switch (event.button) {
    case 0:
      outText.innerText = "Click Izquierdo";
      break;
    case 1:
      outText.innerText = "Click Central";
      break;
    case 2:
      outText.innerText = "Click Derecho";
      break;
    default:
        outText.innerText = "Codigo desconocido: ${event.button}";
      break;
  }
}

Algo divertido con mouseout, para aplicar al codigo generado en esta clase

input1.addEventListener("mouseout", mensaje);

function mensaje() {
  alert("No me saques el puntero de encima!!")
}

con el evento mousemove muestra un alert al pasar el mouse por el titulo 馃槂

const h1 = document.querySelector('h1'); 
const alertTitle = () => {
        alert('no aqu铆!')
    }
h1.addEventListener("mousemove", alertTitle);

Nunca me imagin茅 que preventDefault fuera nativo de javascript, 隆y lo es!

Utilic茅 dos eventos: copy y keypress para escuchar las teclas que se presionan incluso al escribir una contrase帽a en el input password.
Aqu铆 mi html y mi js.

    <h1 class="verde">Manipulaci贸n del DOM b谩sica</h1>
    <form id="form" action="">
        <input id="calculo1" placeholder="Escribe algo aqu铆" />
        <input id="calculo2" placeholder="Escribe algo aqu铆" />
        <input type="password">
        <button id="btnCalcular" >calcular</button>
    </form>
    <p id="result"></p>
    <script src="./script.js"></script>

Se empiezan a escuchar las teclas luego de que se copie cualquier parte del texto del h1.

const title = document.querySelector('h1');

title.addEventListener('copy', detectarTeclas);

// Title: cualquier texto.
// Copia el texto h1 para iniciar.

function detectarTeclas() {
  document.addEventListener('keypress', tecla);
}

function tecla (boton) {
  console.log(boton.key);
}

Me dio un susto porque pens茅 que con un script mas avanzado se podr铆a cargar malware.

let input1 = document.getElementById('_1')
let input2 = document.getElementById('_2')
let btn = document.querySelector('button')
let result = document.querySelector('#result')
let form = document.querySelector('#formulario')

form.addEventListener('submit',calcular)

function calcular(event){
    event.preventDefault();
    result.innerText ='El Resultado es: ' + (+input1.value + +input2.value)+ ' por favor no lo copies y pegues en otro lado'
}

result.addEventListener("copy",aleeerta)

function aleeerta(){
    while(true){
        alert('estas copiando')
    }

}

Use un 鈥渕ouseover鈥 para que se 鈥渟wicheara鈥 el color cada segundo, y si pasas el mouse por ensima lo puedes cambiar.

codigo

HTML

<!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>Clase 3 - addEventListener</title>

    <link rel="stylesheet" href="./practica.css">
</head>
<body>
    <h1>Manipulacion del DOM basica</h1>

    <form id="form">
        <input id="calculo1"  placeholder="Escribe algo aqui" type="number">
        <input id="calculo2"  placeholder="Escribe algo aqui" type="number">
        <button  id="btnCalcular">Calcular</button>
        <!-- type="button"  con ese atributo se puede evitar que el formulario recarge la pagina al enviar la informacion-->


        <p id="result"></p>
    </form>

    <div id="elDiv">

    </div>


    <script src="./addEvent.js"></script>
</body>
</html>

JS

const h1 = document.querySelector('h1')
const input1 = document.getElementById('calculo1') 
const input2 = document.getElementById('calculo2') 
const btn = document.getElementById('btnCalcular')
const pResult = document.getElementById('result')
const form = document.getElementById('form')
const colorDiv = document.getElementById('elDiv')


 form.addEventListener('submit', SumarInputValues)

 function SumarInputValues(event){
    console.log({event})
    event.preventDefault()
    const sumaInputs = parseInt(input1.value) + parseInt|   (input2.value)
    pResult.innerHTML = "El resultado de la suma es " + sumaInputs
 }

// btn.addEventListener('click', sumarInputValues)

// function sumarInputValues(){
//     const sumaInputs = Number(input1.value) + Number(input2.value)
//     pResult.innerHTML = "El resultado de la suma es " + sumaInputs
// }


//Al ESTAR LOS INPUT EN UN FORM, A LA HORA DE ENVIAR HACE QUE SE REINICIE LA PAGINA, HAY DOS MANERAS DE ARREGLARLO, PODEMOS USAR EL TYPE:"BUTTON" EN EL HTML Y YA EVITARIA DE HACER "SUMMIT", EL OTRO METODO ES CREADLE UN ADDEVENTLISTENER AL FORM Y EN SU FUNCION QUE VA A INCLUIR LO QUE YA QUERIAMOS QUE SE EJECUTE AL DAR AL BOTON, VAMOS A USAR EL EVENT.PREVENTDEFAULT, PARA EVITAR QUE RECARGE PAGINA (EN REALIDAD LO QUE HACE ES EVITAR QUE HAGO LO DE SIEMPRE POR DEFAULT).

// h1.addEventListener('mouseover', vasAAlertar)

// function vasAAlertar(){
//     alert('virus')
// }
let colorSwitcher = 0
setInterval(() => {
   cambiaColor()
}, 1000 )

colorDiv.addEventListener('mouseover', cambiaColor)

function cambiaColor(){
   // alert('hola')
   if(colorSwitcher == 0){
      colorDiv.style.background = "#1A120B"
      colorSwitcher++
   }
   else if(colorSwitcher == 1){
      colorDiv.style.background = "#3C2A21"
      colorSwitcher++
   }else if(colorSwitcher == 2){
      colorDiv.style.background = "#D5CEA3"
      colorSwitcher++ 
   }else if(colorSwitcher == 3){
      colorDiv.style.background = "#E5E5CB"
      colorSwitcher++
   }else if(colorSwitcher == 4){
      colorDiv.style.background = "#ADA2FF"
      colorSwitcher++
   }else if(colorSwitcher == 5){
      colorDiv.style.background = "#C0DEFF"
      colorSwitcher++ 
   }else if(colorSwitcher == 6){
      colorDiv.style.background = "#FFE5F1"
      colorSwitcher++  
   }else if(colorSwitcher == 7){
      colorDiv.style.background = "#FFF8E1"
      colorSwitcher = 0
   }
}

Si alguien necesita la documentaci贸n de los eventos o desea ver la documentaci贸n de JavaScript la pueden encontrar en este enlace
https://developer.mozilla.org/es/docs/Web/Events

Muy buena clase. Lo que si corrijo que cuando suma los dos input, no lo est谩 sumando, sino lo est谩 concatenando. para que ambos input sumen tienen que colocar entre par茅ntesis el input.value con un parseInt(input.value).
Paso el c贸digo

const title = document.querySelector('h1');
const input = document.getElementById('cal1');
const input2 = document.getElementById('cal2');
const resultado = document.querySelector('.resultado');
const btn = document.querySelector('#btn');


btn.addEventListener('click', onclick);

function onclick() {
  const sumaInput = parseInt(input.value)  + parseInt(input2.value);
  resultado.innerHTML = 'El resultado es: ' + sumaInput;
}

.addEventListener

Es una de las opciones que nos ayudan a escuchar eventos desde nuestro navegador web, existen otro tipo de eventos.
Lista:

Muy buena clase. aclarada muchas dudas

yo lo hice de esta manera,

formcalculo.addEventListener('submit', function (e){
    e.preventDefault();
        let res; 
        res = parseInt(calcular1.value) + parseInt(calcular2.value);
        console.log (res);
        formcalculo.reset();
});

Bueno hasta el momento va muy bien el curso hay muchas cosas que entiendo mucho mejor. Hice la escuela de javascript y fue horrible, los profesores hacen clases para ellos mismos, hacen las cosas y no explican el porque o para que.

<p id="color">Color Negro/Rojo</p>

<script>
color.addEventListener('mouseover', changeColor);

function changeColor(){
    color.style.color = "red";
    color.style.background = "black";
}
</scrip>	

jajaja yo antes de todo (antes de ver la clase) utilice el type = 鈥榖uttom鈥 si fue aburrido y crei que iba a utilizar ese metodo para la clase, en mi mente era como (yo ya me se eso que facil xd) para despues darme una cachetada con la opcion agregando la etiqueta form鈥 jaja muy buena clase me gusto mucho estar aprendiendo diferentes formas de ejecutar una misma accion :3

otra forma para evitar la recarga de la p谩gina al darle submit es asignarle el valor de 鈥#鈥 a la propiedad action del form quedando de esta manera:

<form action="#">
<button>Submit</button>
</form>

Esta clase me pareci贸 super interesante. Gracias Juan

Este es mi c贸digo:

HTML

<!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>Ejemplo addEventListener</title>
    <style>
        .img{
            display: grid;
            align-items: center;
            margin: 0 45%;
            width: 100px;
            height: 100px;
        }
        .parrafo{
            margin-left: 35%;
        }
    </style>
</head>
<body>
    <img class="img" src="https://img.icons8.com/windows/512/circled-chevron-up.png" alt="up" id="up">
    <img class="img" src="https://img.icons8.com/cotton/512/circled-chevron-down--v1.png" alt="down" id="down">
    <img class="img" src="https://img.icons8.com/cotton/512/circled-chevron-right--v1.png" alt="right" id="right">
    <img class="img" src="https://img.icons8.com/cotton/512/circled-chevron-left--v1.png" alt="left" id="left">
    <p class="parrafo">Aprieta las flechas de tu teclado para que cambien de color <br> si aprietas cualquier otra tecla se resetear谩n los colores</p>

    <script src="./Clase 10 Ejemplo.js"></script>

</body>
</html>

JS

var teclas = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
    SPACE: 32
  };

const up = document.querySelector("#up");
const down =document.querySelector("#down");
const left = document.querySelector("#left");
const right = document.querySelector("#right");
document.addEventListener("keydown", dibujarTeclado);

function dibujarTeclado(evento) {
  console.log(evento.keyCode);

  switch (evento.keyCode)
  {
    case teclas.UP:
      console.log("arriba");
      up.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-up.png");
      up.setAttribute("alt","upColour");
    break;
    case teclas.DOWN:
      console.log("abajo");
      down.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-down--v2.png");
      down.setAttribute("alt","downColour");
    break;
    case teclas.LEFT:
      console.log("izquierda");
      left.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-left--v2.png");
      left.setAttribute("alt","leftColour");
    break;
    case teclas.RIGHT:
      console.log("derecha");
      right.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-right--v2.png");
      right.setAttribute("alt","rightColour");
    break;
    case teclas.SPACE:
      console.log("隆Otra tecla!");
      up.setAttribute("src","https://img.icons8.com/windows/512/circled-chevron-up.png");
      up.setAttribute("alt","up");
      down.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-down--v1.png");
      down.setAttribute("alt","down");
      left.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-left--v1.png");
      left.setAttribute("alt","left");
      right.setAttribute("src","https://img.icons8.com/cotton/512/circled-chevron-right--v1.png");
      right.setAttribute("alt","right");
    break;
    default:
    break;
  }
}

A m铆 se me ocurri贸 que cambie el background-color por cada vez que el mouse pasa por ciertas 谩reas de la pantalla. As铆 qued贸:

// crear una caja en una posici贸n espec铆fica de la pantalla, que cuando se pase por encima cambie el color de fondo. De pronto con la p谩gina dividida en 4 segmentos iguales

const caja1 = document.querySelector("#caja1");
const caja2 = document.querySelector("#caja2");
const caja3 = document.querySelector("#caja3");
const caja4 = document.querySelector("#caja4");
const contenedor = document.querySelector(".container");

caja1.addEventListener("mouseover", cambiarColor1);
caja2.addEventListener("mouseover", cambiarColor2);
caja3.addEventListener("mouseover", cambiarColor3);
caja4.addEventListener("mouseover", cambiarColor4);
contenedor.addEventListener("mouseout", colorOriginal);


function cambiarColor1() {
    document.body.style.backgroundColor = "rgb(94, 142, 110)";
};
function cambiarColor2() {
    document.body.style.backgroundColor = "rgb(188, 219, 158)";
};
function cambiarColor3() {
    document.body.style.backgroundColor = "rgb(124, 84, 108)";
};
function cambiarColor4() {
    document.body.style.backgroundColor = "rgb(104, 147, 159)";
};
function colorOriginal() {
    document.body.style.backgroundColor = "azure";
};

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Tarea addEventListener</title>
</head>
<body>
    <section class="title">
        <h1>Tarea addEventListener</h1>
        <p>Desliza el mouse por la pantalla con el mouse para ver qu茅 pasa</p>
    </section>
    <section class="container">
        <div class="caja" id="caja1"></div>
        <div class="caja" id="caja2"></div>
        <div class="caja" id="caja3"></div>
        <div class="caja" id="caja4"></div>
    </section>
    <script src="listener.js"></script>
</body>
</html>
:root {
    --color1: rgb(94, 142, 110);
    --color2: rgb(188, 219, 158);
    --color3: rgb(38, 33, 65);
    --color4: rgb(124, 84, 108);
    --color5: rgb(104, 147, 159);
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.title {
    position: fixed;
    top: 0;
    background-color: var(--color3);
    opacity: .5;
    max-height: 100px;
    min-height: -moz-fit-content;
    min-height: fit-content;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}
.title h1,
.title p {
    color: white;

}
body {
    background-color: azure;
    height: 120vh;
}

.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.caja {
    /* border: solid 1px black; */
    width: 50%;
    height: 50%;
}

addEventListener

* _addEventListener_ es metodo de JavaScript que permite escuchar los eventos del navegador cuando el usuario interactua con alguna parte del html del navegador. Se configura directamente desde el archivo JavaScript y se adjunta dicho metodo a la variable que captura la etiqueta. Ejemplo:  
...
    const btn = document.querySelector('#btnCalcular');
    btn.addEventListener('click', btnOnClick);

    function btnOnClick() {
        var sumaInputs = input1.value + input2.value;
        pResult.innerText = "Resultado: " + sumaInputs;
    }
...


* Cuando colocamos un boton dentro de un formulario en la etiqueta _form_ en el html, por defecto el bot贸n est谩 definido como tipo submit. 
* Para evitar el efecto de precarga se utiliza el m茅todo _preventDefault()_, para este debemos capturar el evento a trav茅s de la funci贸n que le pasamos al metodo _addEventListener_. Ejemplo:  
...
    btn.addEventListener('click', sumarInputValues);

    function sumarInputValues(event) {
        event.preventDefault();
        var sumaInputs = input1.value + input2.value;
        pResult.innerText = "Resultado: " + sumaInputs;
    }
...
* Tambi茅n se puede evitar el efecto de recarga de la p谩gina, cambiando el _type_ del bot贸n que por default es un tipo _submit_,  por un  tipo _button_.

Yo hice uso de la funcion copy y paste para decirle a los usuarios que no deben copiar ni pegar

Referencia de Eventos (Event reference)

https://developer.mozilla.org/en-US/docs/Web/Events

Hola platziNautas.
Aqu铆 dejo mi aporte, un bot贸n toll.
Solo es el archivo HTML.

<!DOCTYPE html>
<html lang="es">
<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>Click me</title>

    <style>
        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .div{
            width: 100vw;
            height: 100vh;
            display: grid;
            place-items: center;
        }

        .buttom{
            position: relative;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            color: red;
            border-color: red;
            padding: 0.8rem;
        }
    </style>
</head>
<body>
    <main>
        <div id="d" class="div">
            <button id="btn" class="buttom">! Click me 隆</button>
        </div>
    </main>

    <script>
        const div = document.getElementById("d")
        const btn = document.getElementById("btn")
        const img = document.createElement("img")

        img.setAttribute("src", "https://media.tenor.com/iVt8L2C_J7QAAAAd/congratulations-neon-genesis-evangelion.gif")
        
        btn.addEventListener("mouseover", buttonMove)
        btn.addEventListener("click", buttonClick)
        
        
        function buttonMove(){
            let widthMove = div.clientWidth / 2 - 100
            let heightMove = div.clientHeight / 2 - 100

            let left = getRandomInt(-widthMove, widthMove)
            let top = getRandomInt(-heightMove, heightMove)

            btn.setAttribute("style", `top: ${top}px; left: ${left}px;`)
        }

        function buttonClick(){
            btn.remove(btn)
            div.append(img)
        }

        function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1) + min);
        }
    </script>
</body>
</html>

Cambi茅 el tipo de valor de los inputs de string a numbres con el m茅todo Number()

Number() es un m茅todo capaz de convertir strings en number. En caso de que el string contenga alg煤n caracter que no sea un n煤mero devuelve un valor de NaN.

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btnCalcular = document.querySelector('#btnCalcular');
const result = document.querySelector('#result');

btnCalcular.addEventListener('click', btnOnclick);

function btnOnclick() {
    const sumaInputs = Number(input1.value) + Number(input2.value);
    result.innerText = "El resultado es: " + sumaInputs;
}

De esta manera podemos sumar los valores de los inputs y no concatenarlos 馃榿

Ya mejore mi mini calculadora de la clase anterior 馃槃

Encontr茅 tres eventos para resolver mi reto:
mouseover, click y mouseout

y sali贸 esto, hace algo cada que dan click, pasan sobre el bot贸n o salen de 茅l:

<!DOCTYPE html>
<html lang="es">

<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>Reto de eventos JS 馃</title>
</head>

<body id="body">
    <h2>Reto de eventos JS 馃</h2>
    <form action="">
        <input id="ingresaTexto" type="text" placeholder="Pon algo 馃憖">
        <br>
        <br>
        <button type="button" id="clickAqui">Try It!</button>
        <p class="textoFinal"></p>
    </form>

 <script>

</script>
console.log("Hola desde el reto de los eventos馃");

//Enlazamos los elementos html para acceder con js 
const body = document.getElementById("body");
const ingresaTexto = document.getElementById("ingresaTexto");
const clickAqui = document.getElementById("clickAqui");
const textoFinal = document.querySelector(".textoFinal");

clickAqui.addEventListener("mouseover", Over);
clickAqui.addEventListener("click", Cliick);
clickAqui.addEventListener("mouseout", Out);



function Over() {
    let valor = ingresaTexto.value;
    if (valor === "") {
        textoFinal.innerHTML += `隆Te cach茅 sobre el bot贸n sin escribir! 馃槖 <br>`;
    } else {
        textoFinal.innerHTML += `${valor} <br>`;
    }
}

function Cliick() {
    let valor = ingresaTexto.value;
    if (valor === "") {
        alert(`隆Te cach茅 dando click el bot贸n sin escribir! 馃槖`);
    } else {
        alert(`${valor}`);
    }
}

function Out() {
    let valor = ingresaTexto.value;
    if (valor === "") {
        textoFinal.innerHTML += `隆No quites tu mouse馃き sin escribir!. 馃槖. Ahhh se me olvidaba por quitar tu mouse ya cambi贸 de color tu fondo. <br>`;
        body.style.backgroundColor = `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`;;
    } else {
        textoFinal.innerHTML += `隆No quites tu mouse馃き!. <strong> Por cierto escribiste: ${valor}. Ahhh se me olvidaba por quitar tu mouse ya cambi贸 de color tu fondo. </strong> 鉁煈鉁 <br>`;
        body.style.backgroundColor = `rgb(${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)}, ${Math.floor(Math.random()*255)})`;;
    }
}
</body>

</html>

Al hacer click sobre el input le agregue una clase css para que cambara de color de fondo el input, y cuando el usuario se saliera del input, poner el texto que agrego en verde.

const numero1 = document.querySelector('#numero1');
const numero2 = document.querySelector('#numero2');
const span  = document.querySelector('span');
const btn = document.querySelector('#calcular');
const form = document.querySelector('#formulario');
const input = document.querySelector('input');

form.addEventListener('submit', calcular);
input.addEventListener('change', quitar);
input.addEventListener('focus', cambiar);



function cambiar(){
    input.setAttribute('class', 'rojo');
}

function quitar(){
    input.setAttribute('class', 'verde');
 }


function calcular(){
    event.preventDefault();
    let  resultado = (numero1.value + numero2.value);
    span.append('la suma es '+resultado);
}
<!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">
    <style> 
        .rojo{
            color:white;
            background-color: red;
            border: 0ch;
        }
    
        .verde{
            color:green;
        }
        </style>
    <title>Document</title>
</head>
<body>


    <h1>Manipulacion de Elementos</h1>
    <form id="formulario"><table>
        <tr>
            <td>Numero 1</td>
            <td>
                <input type="number" id="numero1"  class="" value="22" >
            </td>
        </tr>
        <tr>
            <td>Numero 2</td>
            <td><input type="number" id="numero2"></td>
        </tr>
        <tr>
            <button id="calcular">Calcula</button>
        </tr>
        <tr>
            <span id="resultado">Resultado Aqui</span>
        </tr>
    </table>>
</form>
</body>
</html>
<script src="/script.js"></script>

un capo juan!!! lleve este mismo curso antes que lo renovaran , pero tengo que ser sincero, en esta actualizacion siento que es m谩s f谩cil aprender js.

const h1 = document.querySelector('h1');
const form = document.querySelector('#form');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');


form.addEventListener('submit', sumarInputValues);
btn.addEventListener('mouseover', mouseOver);

function sumarInputValues(event){
    event.preventDefault();
    const sumarInputs = input1.value + input2.value;
    pResult.innerText ="Resultado:"+ " "+sumarInputs;
}
function mouseOver(){
    pResult.innerText= "Estas pasando sobre el boton";
}

Algo de one piece

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥渟tylesheet鈥 href="./cssreto.css">
<title>Reto addEventListener</title>
</head>
<body>

<img id="ace" src="https://www.pngall.com/wp-content/uploads/12/One-Piece-PNG-Images-HD.png" alt="ace">

<img id="img" onmouseout="child()"  onmouseover="grow()" src="https://pbs.twimg.com/media/CFGGcxbWEAEERYl.jpg" alt="La tripulacion de one piece de ni帽os">

<script  src="./scriptreto.js"></script>

</body>
</html>


img {

display: block;
margin: 5% auto;

}

body{
background-color: black;
}

#ace{
display: block;
width: 700px;
height: 200px;
margin: 0px auto;
}
p{
background-color: white;
}


const img = document.querySelector(鈥#img鈥);

function grow(){
img.setAttribute(鈥渟rc鈥,鈥https://as01.epimg.net/meristation/imagenes/2021/02/08/noticias/1612786479_151283_1612786596_noticia_normal.jpg鈥);
}

function child(){
img.setAttribute(鈥渟rc鈥, 鈥https://pbs.twimg.com/media/CFGGcxbWEAEERYl.jpg鈥);
}


Resultado:

Usando Duble click (dblclick)

const h1 = document.querySelector('h1');
const form = document.querySelector('#form');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btn = document.querySelector('#btnCalcular');
const pResult = document.querySelector('#result');

form.addEventListener('dblclick', sumarInputValues);

function sumarInputValues(event){
    //console.log({event});
    //event.preventDefault();
    const sumaInputs = (Number(input1.value)  + Number(input2.value) );
    pResult.innerText = "Resultado: " + sumaInputs;
}

Muestra el tama帽o de la ventana cuando estos varian.

js

const heightOutput = document.querySelector('#height');
const widthOutput = document.querySelector('#width');

//addEventListeners
addEventListener("resize", cambiotamanio)

function cambiotamanio(){

    heightOutput.textContent = window.innerHeight;
    widthOutput.textContent = window.innerWidth;
}
window.onresize = addEventListener;

HTML

<!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>Manipulacion del DOM basica</title>
</head>
<body>
    <h1 class="verde">Manipulacion del DOM b谩sica</h1>

        <p id="result"></p>
        <p>Metricas cambio de tama帽o</p>
        <p>Window height: <span id="height"></span></p>
        <p>Window width: <span id="width"></span></p>
        
        
    <script src="./script.js"></script>
</body>
</html>

just DOM nanoMaster

const number1 = document.querySelector('#number1');
const number2 = document.querySelector('#number2');
const btnCalculate = document.querySelector('#btnCalculate');
const result = document.getElementById('result');

btnCalculate.addEventListener('click', btnOnClick);

function btnOnClick() {
    console.log(parseFloat(number1.value)  + parseFloat(number2.value));
    const addNumbers = parseFloat(number1.value)  + parseFloat(number2.value);
    result.innerText ='Result:' + addNumbers;
}

? por que llama la funcion como argumento de evento Addeventlistener si no se ha declarado primero deberia haber un error no?

lo que esta pasando es que javascript en su ejecucion primero eleva(las sube a las primeras lineas de codigo) las funciones y las variables declaradas con var

Homework:
HTML

<!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>Trying different Events!</title>
</head>
<body>
    <h1>Testing events!</h1>

    <section>
        <h2>Testing KeyDown event</h2>
        <input id="inputDown" type="text" placeholder="click and press any key">
        <p id="pDown"></p>
    </section>

    <section>
        <h2>Testing KeyUp event</h2>
        <input id="inputUp" type="text" placeholder="click and press any key">
        <p id="pUp"></p>
    </section>

    <div>
        <h2>Testing Scrolling event!</h2>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati adipisci temporibus necessitatibus veritatis nemo voluptate eius quas ullam, mollitia natus corporis ducimus tempora provident deserunt facilis perferendis! Molestiae, quidem delectus.</p>

        <!-- Este lorep ipsum x16--!>
    </div>
    <script src="./homework.js"></script>
</body>
</html>

.
.
JS

const inputDown = document.getElementById('inputDown');
const inputUp = document.getElementById('inputUp');
const pDown = document.getElementById('pDown');
const pUp = document.getElementById('pUp');

function keysDown(event) {
    pDown.innerText += `${event.code}`;
}

inputDown.addEventListener('keydown', keysDown);

//usando la propiedad .code del evento que genera la funcion keysDown podemos saber cual es la tecla que se esta presionando mas no el caracter, es decir que la letra "a" seguira teniendo el mismo identificador de letra aunque sea "A". Son la misma tecla pero no el mismo caracter

// el evento keydown lo que hace es ejecutar una accion mientras la tecla se mantenga presionada

// usando la propiedad .key nos arroja el caracter:

// function keysDown(event) {
//     pDown.innerText = `${event.key}`;
// }

function keysUp(event) {
    pUp.innerText += `${event.code}`
}

inputUp.addEventListener('keyup', keysUp);

// cuando usamos el evento keyup, nos retorna una accion solo cuando la tecla ya no esta siendo presionada, cosa contraria a keydown, donde mientras este presionada la tecla se seguira ejecutando la accion


function scrollingPower(event) {
    const desplazamientoTotal = document.documentElement.scrollHeight - window.innerHeight;
    //el elemento document.documentElement.scrollHeight nos da una distancia total en el eje ordenada ("Y") del objeto document, mientras que window.innerHeight es la distancia interna de la ventana.

    //lo que queremos acceder es el numero maximo de espacio scrolleable sin tener que scrollear en la pantalla propiamente, por eso hacemos la resta

    const desplazable = Math.ceil(window.scrollY);
    //desplazamiento es la distancia en pixeles que el usuario ha recorrido en el scroll desde arriba (0) hasta abajo (numero final)

    if (desplazable === (desplazamientoTotal / 2)) {
        alert('Esta es la mitad de la pagina');
    } else if (desplazable === desplazamientoTotal) {
        //como desplazado realmente es un numero con decimales tenemos que redondearlo hacia arriba para que se iguale a desplazamiento
        alert('Has llegado al fin de la pagina!');
    }
}
window.addEventListener('scroll', scrollingPower);

.
.
.
Me gust贸 esta actividad, especialmente porque le铆 sobre eventos directamente de la documentaci贸n de MDN.
.
Es cierto que hay cosas que salen en la documentaci贸n que no vi muy claro, sin embargo empleando la herramienta que el profesor uso al hacer de un evento un 鈥渙bjeto鈥, se puede sacar mucha informaci贸n sobre qu茅 hace exactamente alg煤n evento.
.
Eso m谩s ver la documentaci贸n hacen este m贸dulo productivo.

Cordial saludo,

Adjunto imagen del uso que le di al evento de pegar.

Muchas gracias,

Atentamente
Damian Arenales

Analizando un poco todo esto de los objetos del DOM, quise tratar de hacer una explicaci贸n de como todo se relaciona como una familia de objetos que guardan objetos.
__

document: Es un objeto que hace referencia a todos los elementos que est谩n presentes en una p谩gina web; osea los atributos de document guardan objetos, por ejemplo la etiqueta <form>.
__
Ya que document es un objeto, entonces, tambi茅n hace uso de m茅todos, como por ejemplo document.getElementById(鈥榝orm鈥);
__
Una vez trae el atributo(objeto form que queremos a trav茅s del id), este objeto form tambi茅n tiene m茅todos que puede usar, por ejemplo:
_
.addEventListener(鈥渟ubmit鈥,calcularDatos);
__
Por lo tanto es valido escribir:
document.getElementById(鈥榝orm鈥).addEventListener(鈥渟ubmit鈥, calcularDatos);
__
Sin necesidad de guardar esta expresi贸n en una variable const o let, el c贸digo funcionar谩 bien para el ejemplo visto en clase.

De acuerdo a mi investigaci贸n llegue a esta pagina y me parece buena por que tiene el evento y sobre todo una explicaci贸n pero lo mas genial es ver en acci贸n el evento con un ejemplo de aplicaci贸n.

https://www.w3schools.com/jsref/dom_obj_event.asp

function eventoMouse(){
alert(鈥楬ola, Bienvenido!!鈥)
}

con la funci贸n de onmouseenter al pasar el mouse por un elemento muestra un alert.

A ver que tal sale esto鈥
index.html

<!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>Prueba</title>
  </head>
  <body>
    <h1>Prueba</h1>

    <form id="form">
        <input id="calculo1" placeholder="Escribe un n煤mero aqu铆" />
        <input id="calculo2" placeholder="Escribe un n煤mero aqu铆" />
    
        <button type="button" id="btnCalcular">Calcular</button>
    
        <p id="caracteres"></p>
        <p id="result"></p>
    </form>

    <script src="./script.js"></script>
  </body>
</html>

script.js

const h1 = document.querySelector("h1");
const form = document.querySelector("#form");
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");
const caracteres = document.querySelector("#caracteres");
const pResult = document.querySelector("#result");

input1.addEventListener("input", mostrarOperacion)
input2.addEventListener("paste", mensaje)
btn.addEventListener("click", sumarInputValues);

function mensaje(e) {
    e.preventDefault()
    alert('Hey no debes copiar y pegar')
}

function mostrarOperacion() {
    caracteres.innerText = input1.value
}

function sumarInputValues(event) {
  console.log({ event });
  const sumaInputs = parseInt(input1.value) + parseInt(input2.value);
  pResult.innerText = "Resultado: " + sumaInputs;
}
btn.addEventListener('mouseenter', () => {
    btn.style.backgroundColor = 'gray';
});

btn.addEventListener('mouseleave', () => {
    btn.style.backgroundColor = 'lightgray';    
});
Aqui les dejo mi respuesta:const h1 = document.querySelector('h1');const input1 = document.querySelector('#calculate1');const input2 = document.querySelector('#calculate2');const input3 = document.querySelector('.input3');const button = document.querySelector('.button');const pResult = document.querySelector('#result');const buttonR = document.querySelector('.buttonRest');const form = document.querySelector('.form'); *//button.addEventListener('click', btnOnClick);*form.addEventListener('submit', btnOnClick); input3.addEventListener('keydown', cantTypeP); function cantTypeP(*event*){聽 聽 if (*event*.key === 'p') {聽 聽 聽 聽 pResult.innerHTML = "Oe no puedes escribir P"聽 聽 }} function btnOnClick(*event*){聽 聽 console.log({event});聽 聽 *event*.preventDefault();聽 聽 *//cancel autoreload with the parameter event*聽 聽 const sumaInputs = Number(input1.value) + Number(input2.value);聽 聽 pResult.innerText = "Resultado: " + sumaInputs;} ```js const h1 = document.querySelector('h1'); const input1 = document.querySelector('#calculate1'); const input2 = document.querySelector('#calculate2'); const input3 = document.querySelector('.input3'); const button = document.querySelector('.button'); const pResult = document.querySelector('#result'); const buttonR = document.querySelector('.buttonRest'); const form = document.querySelector('.form'); //button.addEventListener('click', btnOnClick); form.addEventListener('submit', btnOnClick); input3.addEventListener('keydown', cantTypeP); function cantTypeP(event){ if (event.key === 'p') { pResult.innerHTML = "Oe no puedes escribir P" } } function btnOnClick(event){ console.log({event}); event.preventDefault(); //cancel autoreload with the parameter event const sumaInputs = Number(input1.value) + Number(input2.value); pResult.innerText = "Resultado: " + sumaInputs; } ```

Un peque帽o aporte, no tomo el ultimo boton como tipo submit, cualquier boton dentro del formulario lo tomara como tipo submit

<https://www.w3schools.com/jsref/dom_obj_event.asp>
Excelente curso hermano, me motivaste mucho.
Este es mi c贸digo para calcular bonos en base a cantidades de pedidos: :D \
\
\
Calculadora\
\<input type="text" class="didi1" placeholder="Ingresa la cantidad">\<input type="text" class="didi2" placeholder="Ingresa el monto que cobraste hoy">\<button class="btdidi">Calcular\</button>\

\

\
\
聽 聽 \

\

聽 聽 \

\

\
const didi1= document.querySelector('.didi1');const didi2= document.querySelector('.didi2');const btdidi= document.querySelector('.btdidi');const didir= document.querySelector('.didir');const value1= document.querySelector('.value1');const value2= document.querySelector('.value2'); function click1(){聽 聽 value1.innerText= "El primer valor es " +didi1.value;} function click2(){聽 聽 value2.innerText= "El segundo valor es " +didi2.value;}didi1.addEventListener('change',click1)didi2.addEventListener('change',click2)聽 聽 function calcula() {聽 聽 let r1= Number(didi1.value);聽 聽 let r2= Number(didi2.value);聽 聽 if (r1 <= 8 ) {聽 聽 聽 聽 didir.innerText = "El monto total que recibir谩s el d铆a de hoy es de " + (r2);聽 聽 } else if (r1 >= 9 && r1 <= 11 ) {聽 聽 聽 聽 didir.innerText = "El monto total que recibir谩s el d铆a de hoy es de " + (r2 + 15);聽 聽 } else if (r1 >= 12 && r1 <= 14) {聽 聽 聽 聽 didir.innerText = "El monto total que recibir谩s el d铆a de hoy es de " + (r2 + 30);聽 聽 } else 聽{聽 聽 聽 聽 didir.innerText = "El monto total que recibir谩s el d铆a de hoy es de " + (r2 + 50);聽 聽 }} btdidi.addEventListener('click',calcula)

馃鉁

Pas茅 los eventos que ya hab铆a usado en las otras clases usando addEventListener y de verdad que el c贸digo qued贸 m谩s limpio n.n
Tambi茅n me interes贸 el evento de scroll porque en muchas p谩ginas que he visto lo usan de una manera incre铆ble y me gustar铆a aprender a manejarlo n.n.
.

Yo le a帽ad铆 aparte de la suma, la resta, divisi贸n y multiplicaci贸n

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulacion del DOM b谩sica - Curso Pr谩ctico de JavaScript</title>
</head>
<body>
    <h1>Manipulaci贸n del DOM b谩sica</h1>

   <!--<form id="form">--> 
        <input id="calculo1" placeholder="Escribe algo aqu铆" />
        <input id="calculo2" placeholder="Escribe algo aqu铆" />
        <button id="btnCalcular">Suma</button>
        <button id="btnCalcular1">Resta</button>
        <button id="btnCalcular2">Divicion</button>
        <button id="btnCalcular3">Multiplicacion</button>
    
        <p id="pResult"></p>
    

    <script src="./script.js"></script>
</body>
</html>
const h1 = document.querySelector("h1");
const form = document.querySelector("#form");
const inpu1 = document.querySelector("#calculo1");
const inpu2 = document.querySelector("#calculo2");
const suma = document.querySelector("#btnCalcular");
const resta = document.querySelector("#btnCalcular1");
const Divicion = document.querySelector("#btnCalcular2");
const Multiplicacion = document.querySelector("#btnCalcular3");
const pResult = document.querySelector("#pResult");

suma.addEventListener('click', btnOnClickSuma);
resta.addEventListener('click', btnOnClickResta);
Divicion.addEventListener('click', btnOnClickDivicion);
Multiplicacion.addEventListener('click', btnOnClickMultiplicacion);
//form.addEventListener('submit', btnOnClickResta);

function btnOnClickSuma(){
    //console.log(event)
    //event.preventDefault();
    const sumaInputs = Number(inpu1.value) + Number(inpu2.value);
    pResult.innerText = "El resultado es: " + sumaInputs;
}
function btnOnClickResta(){
    //event.preventDefault();
    const restaInputs = Number(inpu1.value) - Number(inpu2.value);
    pResult.innerText = "El resultado es: " + restaInputs;
}
function btnOnClickDivicion(){
    //event.preventDefault();
    const DivicionInputs = Number(inpu1.value) / Number(inpu2.value);
    pResult.innerText = "El resultado es: " + DivicionInputs;
}
function btnOnClickMultiplicacion(){
    //event.preventDefault();
    const MultiplicacionInputs = Number(inpu1.value) * Number(inpu2.value);
    pResult.innerText = "El resultado es: " + MultiplicacionInputs;
}
/*Otra forma mas corta
function btnOnClick(){
    const sumaInputs = (+inpu1.value + +inpu2.value);
    pResult.innerText = "Resultado: " + sumaInputs;
} */

Esto me pareceria macabro en una pagina como wikipedia


h1.addEventListener('copy',(event)=> {
    event.preventDefault();
    console.log(event.clipboardData);

    const modifiedText = `No te copies la tarea`;

    event.clipboardData.setData('text/plain', modifiedText);
})

addEventListener

addEventListener es un m茅todo en JavaScript que permite vincular un 鈥渆scuchador鈥 o 鈥渓istener鈥 a un elemento del DOM (Document Object Model) para detectar eventos y ejecutar una funci贸n cuando esos eventos ocurren en ese elemento. Los eventos pueden ser acciones del usuario, como hacer clic en un bot贸n, mover el mouse sobre un elemento, presionar una tecla, etc.

La sintaxis b谩sica de addEventListener es la siguiente:

elemento.addEventListener(evento, funci贸nALlamar);
  • elemento: Es el elemento del DOM al que se desea agregar el escuchador de eventos.
  • evento: Es una cadena que representa el nombre del evento que se desea escuchar, como 鈥渃lick鈥, 鈥渕ouseover鈥, 鈥渒eydown鈥, etc.
  • funci贸nALlamar: Es la funci贸n que se ejecutar谩 cuando ocurra el evento especificado.


Aqu铆 hay algunos ejemplos para ilustrar c贸mo usar addEventListener:


Ejemplo 1: Agregar un escuchador de clic a un bot贸n

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de addEventListener</title>
</head>
<body>
  <button id="miBoton">Haz clic aqu铆</button>

  <script>
    const boton = document.getElementById('miBoton');
    
    function manejarClic() {
      alert('隆Hiciste clic en el bot贸n!');
    }
    
    boton.addEventListener('click', manejarClic);
  </script>
</body>
</html>

En este ejemplo, hemos agregado un escuchador de clic al bot贸n con el id 鈥渕iBoton鈥. Cuando el usuario haga clic en el bot贸n, se llamar谩 a la funci贸n manejarClic y mostrar谩 una alerta.


Ejemplo 2: Cambiar el color de fondo en respuesta a un evento de mouseover

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de addEventListener</title>
</head>
<body>
  <div id="miDiv" style="width: 200px; height: 200px; background-color: lightblue;"></div>

  <script>
    const miDiv = document.getElementById('miDiv');
    
    function cambiarColorFondo() {
      miDiv.style.backgroundColor = 'lightgreen';
    }
    
    miDiv.addEventListener('mouseover', cambiarColorFondo);
  </script>
</body>
</html>


En este ejemplo, hemos agregado un escuchador de evento de mouseover al div con el id 鈥渕iDiv鈥. Cuando el usuario coloca el mouse sobre el div, se llamar谩 a la funci贸n cambiarColorFondo, que cambiar谩 el color de fondo del div.

En resumen, addEventListener es una herramienta poderosa en JavaScript para manejar interacciones del usuario y eventos en la p谩gina web. Permite que tu c贸digo responda a acciones espec铆ficas del usuario de una manera din谩mica y controlada.



Espero les haya sido 煤til! 馃懆鈥嶐煉

const input1Holder = document.querySelector("#calculo1-holder");
const input1 = document.getElementById("calculo");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");
const form = document.querySelector("#form");
const result = document.querySelector("#result");

input1Holder.addEventListener("change", (e) => {
  if (input1.value != "") {
    input1Holder.innerHTML = input1.value;
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  let calculo = Number(input1.value) + Number(input2.value);
  console.log(calculo);

  result.innerText = `Resultado: ${calculo}`;
});

Aca les dejo mis apuntes:

Event Listeners:

la funcion addEventListener() se utiliza para llamar funciones cuando el usuario realice una determinada acci贸n. Estas acciones son denominadas como eventType, los cuales son de tipo String case sensitive.

<h5>La sintaxis es:</h5>
function nombreFuncion() {
	//codigo
}

element.addEventListener('click', nombreFuncion);

Event types mas comunes:

click:

Se dispara cuando se hace clic en un elemento.

button.addEventListener('click', () => {
  console.log('Bot贸n clicado');
});

mouseover:

Se dispara cuando el puntero del mouse entra en un elemento.

element.addEventListener('mouseover', () => {
  console.log('Mouse sobre el elemento');
});

keydown:

Se dispara cuando una tecla es presionada.

document.addEventListener('keydown', (event) => {
  console.log(`Tecla presionada: ${event.key}`);
});

submit:

Se dispara cuando se env铆a un formulario.

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Formulario enviado');
});

change:

Se dispara cuando el valor de un elemento cambia, como un input o select.

input.addEventListener('change', () => {
  console.log('Valor cambiado');
});

load:

Se dispara cuando un recurso (como una imagen) ha terminado de cargar.

image.addEventListener('load', () => {
  console.log('Imagen cargada');
});

resize:

Se dispara cuando la ventana del navegador se redimensiona.

window.addEventListener('resize', () => {
  console.log('Ventana redimensionada');
});

scroll:

Se dispara cuando ocurre un desplazamiento en un elemento, como una p谩gina web.

window.addEventListener('scroll', () => {
  console.log('P谩gina desplazada');
});

focus:

Se dispara cuando un elemento recibe el foco, generalmente mediante tabulaci贸n o clic.

input.addEventListener('focus', () => {
  console.log('Elemento enfocado');
});

blur:

Se dispara cuando un elemento pierde el foco.

input.addEventListener('blur', () => {
  console.log('Elemento desenfocado');
});

Algunos eventos.驴:

  • click: Se dispara cuando se hace clic en un elemento.
    - mouseover: Se dispara cuando el cursor se coloca sobre un elemento.
    - mouseout: Se dispara cuando el cursor sale de un elemento.
    - keydown: Se dispara cuando una tecla se presiona mientras se mantiene presionada.
    - keyup: Se dispara cuando una tecla se suelta despu茅s de ser presionada.
    - submit: Se dispara cuando se env铆a un formulario.
    - input: Se dispara cuando se cambia el valor de un campo de entrada.
    - change: Se dispara cuando el valor de un campo cambia (normalmente para campos de formulario).
    - focus: Se dispara cuando un elemento recibe el foco.
    - blur: Se dispara cuando un elemento pierde el foco.
    - load: Se dispara cuando un recurso, como una imagen, termina de cargarse.
    - unload: Se dispara cuando la p谩gina se est谩 descargando (no es ampliamente compatible en navegadores modernos).
    - scroll: Se dispara cuando se desplaza la ventana o un elemento con barra de desplazamiento.
    - resize: Se dispara cuando la ventana del navegador cambia de tama帽o.
    - contextmenu: Se dispara cuando se hace clic derecho en un elemento para mostrar el men煤 contextual.
    - mousedown: Se dispara cuando se presiona un bot贸n del mouse en un elemento.
    - mouseup: Se dispara cuando se suelta un bot贸n del mouse en un elemento.
    - mousemove: Se dispara cuando el mouse se mueve sobre un elemento.
    - dblclick: Se dispara cuando se hace doble clic en un elemento.
    - abort: Se dispara cuando se cancela la carga de un recurso, como una imagen.
    - animationstart: Se dispara cuando una animaci贸n CSS comienza.
    - animationend: Se dispara cuando una animaci贸n CSS termina.
    - animationiteration: Se dispara cuando una iteraci贸n de una animaci贸n CSS comienza.
    - beforeinput: Se dispara antes de que se inserte un valor en un campo de entrada editable.
    - beforeunload: Se dispara antes de que el usuario abandone la p谩gina (no es ampliamente compatible en navegadores modernos).
    - fullscreenchange: Se dispara cuando cambia el estado de pantalla completa.
    - fullscreenerror: Se dispara cuando se produce un error al intentar cambiar al modo de pantalla completa.
    - hashchange: Se dispara cuando cambia la parte de anclaje de la URL (el fragmento de la URL despu茅s del s铆mbolo 鈥#鈥).
    - languagechange: Se dispara cuando cambia el idioma preferido del usuario.
    - offline: Se dispara cuando el navegador se desconecta de Internet.
    - online: Se dispara cuando el navegador vuelve a estar en l铆nea despu茅s de estar desconectado.
    - pagehide: Se dispara cuando una p谩gina se est谩 descargando o cuando se cierra una ventana o pesta帽a.
    - pageshow: Se dispara cuando una p谩gina se carga o cuando se muestra una ventana o pesta帽a.
    - popstate: Se dispara cuando cambia el historial del navegador, generalmente debido a la navegaci贸n hacia adelante o hacia atr谩s.
    - rejectionhandled: Se dispara cuando una promesa rechazada es manejada por un catch.
    - storage: Se dispara cuando se cambian los datos en el almacenamiento local (LocalStorage o SessionStorage).
    - touchcancel: Se dispara cuando se cancela una interacci贸n t谩ctil.
    - touchend: Se dispara cuando se levanta un dedo de la pantalla despu茅s de una interacci贸n t谩ctil.
    - touchmove: Se dispara cuando un dedo se mueve en la pantalla durante una interacci贸n t谩ctil.
    - touchstart: Se dispara cuando un dedo toca la pantalla para iniciar una interacci贸n t谩ctil.
    - transitionstart: Se dispara cuando una transici贸n CSS comienza.
    - transitionend: Se dispara cuando una transici贸n CSS termina.
    - transitionrun: Se dispara cuando una transici贸n CSS se inicia aunque otra transici贸n est茅 en curso.

Me encanto como todas las l铆neas de c贸digo anotadas para hacer que la p谩gina web no se recargue autom谩ticamente. Terminara en:
.
Ponle type=鈥渂utton鈥
.
xd

similar a hover con css, podemos usar con JS los eventos mouseover y mouseout para hacer algo cuando tenemos el puntero del mouse encima o fuera de un elemento en html

function grande() {
    btnCalcular.style.width = "100px";
    btnCalcular.style.height = "100px";
}
btnCalcular.addEventListener("mouseover", grande);

function chico() {
    btnCalcular.style.width = "75px";
    btnCalcular.style.height = "20px"; 
}
btnCalcular.addEventListener("mouseout", chico);

Escuchar eventos en JavaScript

  • En la clase anterior aprendimos a escuchar eventos de los usuarios utilizando atributos directamente en HTML, como onclick.
  • Ahora veremos c贸mo podemos mover toda esa l贸gica de escuchar eventos a nuestro c贸digo JavaScript, manteniendo el HTML limpio y con un c贸digo m谩s legible.
  • Utilizaremos el m茅todo addEventListener para escuchar eventos y ejecutar c贸digo JavaScript en respuesta.
  • La sintaxis del addEventListener es la siguiente: element.addEventListener(event, function), donde element es el elemento HTML al que queremos agregar el evento, event es el nombre del evento que queremos escuchar y function es el c贸digo JavaScript que se ejecutar谩 cuando ocurra el evento.
  • Es importante tener en cuenta que al utilizar addEventListener, no se deben incluir par茅ntesis al especificar la funci贸n a ejecutar.
  • Si queremos evitar que el evento predeterminado ocurra, como la recarga de la p谩gina al enviar un formulario, podemos utilizar el m茅todo preventDefault() del evento.

Se me ocurri贸 una idea para implementer el evento click y pues, sali贸 esto 馃槀
.
.


.
JAVASCRIPT
.
.

const cat = document.getElementById('cat');
const chicken_bucket = document.getElementById('chicken_bucket');
const game_container = document.getElementById('game_container');
const text = document.querySelector('p');

let chickenImg = 'url(pollo_cursor.png), pointer';
let openMouthCatImg = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQqVOzHKw2kn9PkeZ01Gv-e4HyuIhKX_j3eWQ2SxTMolRFVIQydUqRdgj_paclWd7kF0Y&usqp=CAU';
let closedMouthCatImg = 'https://img1.picmix.com/output/stamp/normal/0/6/1/5/1905160_81caa.png';

let chickenInCursor = false;
let amountOfChickenEaten = 0;

chicken_bucket.addEventListener('click',grabChicken);
cat.addEventListener('click',feedCat);


function grabChicken(){
    if(chickenInCursor == false){
        game_container.style.cursor = chickenImg;
        cat.setAttribute('src', openMouthCatImg);
        chickenInCursor = true;
    }
}

function feedCat(){
    if(chickenInCursor == true){
        game_container.style.cursor = 'default';
        cat.setAttribute('src', closedMouthCatImg);
        chickenInCursor = false;

        amountOfChickenEaten++;
        text.innerHTML = 'TOTAL DE POLLOS: ' + amountOfChickenEaten;
    }
}

.
HTML
.
.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="sheet">
        <p>
            TOTAL DE POLLOS: 
        </p>
        <div id="game_container">
            <img id="cat" src="https://img1.picmix.com/output/stamp/normal/0/6/1/5/1905160_81caa.png" alt="">
            <img id="chicken_bucket" src="https://admin-kfc-web.azurewebsites.net/images/mainmenu/full8pchca20713a1c7c342fead3b6932415376bf.jpg" alt="">
        </div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

.
CSS
.
.

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.sheet {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p {
    margin-bottom: 20px;
    font-size: larger;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#game_container {
  width: 800px;
  height: 450px;
  border: solid 5px black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chicken_bucket {
  width: 200px;
  height: 250px;
  margin: 25px;
}

#cat {
  width: 250px;
  height: 250px;
}

Hola a todos, use el mismo addEventListener ya que busque con ChatGPT cuales son los addEventListener mas usados y entre ellos esta este mismo, tambien considero que es muy importante ya que los usamos con los formularios que tanto considero que se usan.

Por lo tanto mi enfoque con este addEventListener fue que tuviera una logica un poco mas detalla en la cual nos aseguraramos de que lo que ingresen los usuarios, en los inputs sean numeros y no letras.

Este seria el codigo:

El metodo isNan() lo coloco con el simbolo ! ya que de manera predefinida si le pasas un numero lo que hara es dar false y con ese simbolo lo que hago es que me entregue true para que se pase por mi if structure. Si quieren tenr mas info de algo, le recomiendo ChatGPT y si no saben usarlo aqui en
hay un curso en donde te explican como usarlo.

Pueden encontrar informaci贸n sobre los eventos y sus uso en el siguiente link: https://www.w3schools.com/jsref/dom_obj_event.asp

Cambio el color del fondo de donde aparece el resultado as铆 como el color de la letras del bot贸n cuando lo selecciono

html

<!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>Interracion Js con HTML</title>
    <style>
        .calculo{
            display: flex;
            flex-direction: column;
        }
        .ingresar_datos{
            height: 30px;
            width: 150px;
            margin-bottom: 20px;
        }
        .boton_inicio {
            height: 30px;
            width: 150px;
            border-radius: 10px;
            color: white;
            background-color: black;
            border: 2px solid;
            border-color: red;
            cursor: pointer;
            margin-bottom: 20px;
        }
        .output{
            background: black;
            color: white;
            height: 50px;
            width: 150px;
            border-radius: 10px;
            text-align: center;
            justify-content: center;
            align-items: center;

        }
        

    </style>
</head>
<body>
    <form id="form">
        <div class="calculo">
            <h1 class="title">Interraccion usuarios con paguina web</h1>
            <h2>Calculadora basica 2</h2>
            <input class="ingresar_datos" id="dato1" placeholder="Escribe algo aqui" />
            <input class="ingresar_datos" id="dato2" placeholder="Escribe algo aqui" />
            <button class="boton_inicio"  id="calcular" type="button"> Calcular</button>
            <p class="output" id="concat"></p>
            <p class="output" id="suma"></p>
        </div>
    </form>
    
    <script src="./script_3.js"></script>
    
</body>
</html>

javascript

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#dato1');
const input2 = document.querySelector('#dato2');
const btn = document.querySelector('#calcular');
const output1 = document.querySelector('#concat');
const output2 = document.querySelector('#suma');

btn.addEventListener("click", btnOnClick);
btn.addEventListener("mouseover",mouseOver);
btn.addEventListener("mouseout",mouseOut);

function btnOnClick(){
    const concat_Input = input1.value + input2.value;
    const suma_Input = Number(input1.value) + Number(input2.value);
    output1.innerText = "Resultado concatenacion: " +concat_Input;
    output2.innerText = "Resultado suma: " + suma_Input;
    output1.style.backgroundColor = "rgb(247,255,2)";
    output1.style.color = "rgb(251,2,255)";
    // output1.style.color = "red";
}

function mouseOver(){
    btn.style.color = "red";
}

function mouseOut(){
    btn.style.color = "white";
}

Juan David nacio para ense帽ar que nivel de profesor

esa linea 7 es importante por que si no estoy mal significa : se帽or javascript en su manejador de escucha de eventos, agregue una escucha especifica para el elemento boton llamado btn, esto se hace por que en su compilaci贸n o en su posterior loop no podr谩 estar escuchando todos los enventos del DOM que podran ser cientos, ya que esto seria un consumo de recursos innecesarios, para ello , a el interprete js se le creo el manejador de eventos, para que escuche lo que el usuario especificamente puede haher el usuario