No tienes acceso a esta clase

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

Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

addEventListener

13/26
Recursos

Aportes 49

Preguntas 19

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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")
}

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鈥)

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.

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

鉁 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:[email protected];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;
}

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>**

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! 馃懄馃徎馃憤馃徎

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);

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

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);

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');
  };

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

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!!")
}

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;
  }
}

Es imposible que JuanDC sea de este planeta

驴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.

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;
}

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

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

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

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.

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;
}
<
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('click',sumarInputValues);
form.addEventListener('mouseover',sumarInputValues);
function sumarInputValues(event){
    event.preventDefault();
    const sumaInputs =  parseInt(input1.value) + parseInt(input2.value);
    pResult.innerText = "Resultado: " + sumaInputs + " 馃懝" + 'Moused over!';
}

> 

En mi ejercicio hice dos addEventListener para validar la entrada de solo numeros en los input, si no es numero, borro el contenido del input, doy una alerta y coloco el focus en el elemento para ingresar nuevamente el valor:

Agregue otros eventos del mouse con el boton mouseenter, mouseleave, mousemove.

const h1 = document.querySelector("h1");
const input1 = document.querySelector(".input1");
const input2 = document.querySelector(".input2");
const button= document.querySelector("button");
const span= document.querySelector(".span");
const h2 = document.querySelector(".h2class");

button.addEventListener("click",functionbutton)
button.addEventListener("mouseenter",mouseenter)
button.addEventListener("mouseleave",mouseleave)
button.addEventListener("mousemove",mousemove)

function mouseenter(){  
    span.innerHTML="SORPRESAAAAAAAAAAAAAAAAAAAAA"   
}
function mouseleave(){  
    span.innerHTML="CHAOOOOOOOOOOOOOOOOOOOOOOOO"   
}    
function mousemove(){  
    var x = event.clientX;     // Get the horizontal coordinate
    var y = event.clientY;     // Get the vertical coordinate
    var coor = "X coords: " + x + ", Y coords: " + y;
    h2.innerHTML=coor ;   
} 

function functionbutton(){
suma=Number(input1.value)+Number(input2.value);
console.log(suma);
span.innerHTML=suma;


}

Explorando addEventListener logre resolver el ejemplo de clase de una forma diferente, seguramente hay formas mejores de hacerlo pero bueno lo descubrir茅 en el proceso, espero te guste y sobretodo te ayude ;P

document.html

<form>
        <input placeholder="Ingresa un n煤mero" name="numberA">
        <input placeholder="Ingresa un n煤mero" name="numberB">
        <button>Sumar n煤meros</button>
</form>
<p id="result"></p>

script.js

const result = document.getElementById("result");
const form = document.querySelector("form");

function calculateInputsValues(event) {
    event.preventDefault();
    const {
        numberA,
        numberB
    } = event.target;

    let A = Number(numberA.value);
    let B = Number(numberB.value);

    if (A === 0 || B === 0) {
        let errorMessage = "La suma que quieres hacer no tiene sentido";
        console.error(errorMessage);
        alert(errorMessage)
    }

    result.innerHTML = `La suma de ${A} y ${B} es: ${A+B}`;
}
//Agregamos un listener al form para saber cuando se hizo click
form.addEventListener("submit", calculateInputsValues);

Un dato curioso yo utilizo el navegador firefox y a mi no me recarga la pagina, y es como what!!!, si alguien sabe porque? pasa esto complementaria mi comentario.

Me gust贸 cuando dijo la forma 鈥渕谩s aburrida, pero no por eso menos interesante鈥︹ 馃槂

Excelente profesor y excelente curso 馃槃

les dejo un ejemplo de un Event Listener con 2 eventos que se complementan para darle color a un div:
JavaScript

const bloque = document.querySelector(`.bloque`);

bloque.addEventListener(`mouseenter`, () => {
    bloque.style.backgroundColor = `red`;
});

//Sirve para cambiar al color original despues de haber paso el maude por el div:
bloque.addEventListener(`mouseleave`, () => {
    bloque.style.backgroundColor= `blueviolet`;
});

HTML que use, es muy simple:

//Agregue la etiqueta Style al Html y le di una dimencion y el backgroun-color blueviolet para que cambie a rojo al crear el evento...
    <div class="container">
        <div class="container bloque">
            <p>Bloque</p>
        </div>
    </div>
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) {
    event.preventDefault(); //Para no ejecutar por defecto el evento submit
    const sumaInputs = Number(input1.value) + Number(input2.value);
    pResult.innerText = "Resultado: " + sumaInputs;
}

Siento que falt贸 mas explicaci贸n principalmente con el tema de los eventos y las caracteristicas del addEventListener.