addEventListener

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

Manuel Alejandro Cabos Apolaya

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

Remix Zapata

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 “copy” por “focus”

Santiago Moreno

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 🤙🏼

jag

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 ‘addEventListener’)

Samuel de los Santos

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

Juan Camilo Valencia Silva

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

ÁNGEL URIEL VELASCO MEJÍA

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

Rubén Ernesto Aragón Gil

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.

Jorge Almaguer Sánchez

Luis Ángel Ortega Durán

Otra forma de evitar que el formulario se recargue es en el botón de Calcular, asignarle el tipo “Button”

Así:

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

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

SebasPosada

I have enjoyed this module a lot! 👦🏻👍🏻

LESTHER XITUMUL MANUEL

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

David Valencia

Es imposible que JuanDC sea de este planeta

Geovanny Sneyder Paez Pabon

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 “sale” del elemento => Todos los elementos
onmouseover:El ratón “entra” 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>**

William Alejandro Ortiz Porras

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

Gabriel Nuñez

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

Juan Esteban Garcés Medina

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

Ines Valeria Foglino

hace 7 meses

Carlos Andrade

addEventListener 14/28

Esta clase trabaja los siguientes puntos:

como utilizar la función “addEventListener” 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 “submit” en un formulario y se explica por qué os formularios por defecto recargan la página al enviar los datos.

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 “onlick” 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 “querySelector” para seleccionar el botón con el ID “miBoton” y luego agregamos un “EventListener” que escucha el evento de “click” en ese botón. La función “btnOnClick” se ejecuta cuando se hace clic en el botón, imprimiendo un mensaje en consola.
Llamada de función en ‘addEventListener’

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);
```
Evento submit en formularios

En lugar de utilizar un botón para realizar una acción en un formulario, podemos utilizar el evento “submit” 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 “enviar 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 “submit”, la página se recarga automáticamente. para evitar esto, debemos utilizar la función “preventDefault” en el objeto event que se pasa como parámetro a la función que se ejecuta en el evento de “submit”.
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 “formulario”) y escuchar su evento de “submit”. Luego podemos agregar una función llamada “sumarInputValues” 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 “sumarInputValues” 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>
```

Josetruyolm

¿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 “escuchar” y la acción (o función) que queremos ejecutar cuando el evento suceda.

Danelia Sanchez Sanchez

https://lenguajejs.com/javascript/eventos/que-son-eventos/

José Pérez

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

Huilén Solís

Si VS Code te esta marcando event tachado:
Recuerden que event.preventDefault(); NO es una propiedad de js como tal. “event” 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();
};

Benjamín Rodríguez

Probé con el evento ‘change’, 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
})

Gian Marco Vitale

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.

David Lara

Aqui podemos encontrar la documentación oficial de de mozilla

Anderson alejandro Sanchez martinez

JAJAJAJA como dice "Eso no nos funciona"
Muy comico

Yulieth Perez

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

Tony Vasquez Estevez

hace 8 meses

Samuel Alvarez

hace 7 meses

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)

Santiago López Alarcón

hace 7 meses

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

Juan Síntora

“añadir un controlador de eventos”

miguel rendon

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

Samuel Ramirez

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 “click” 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.

Andres-Vega

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

Felipe López

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>

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

Ariel Plaza

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

Joe Pulgarin

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

Rafael Soriano Ramírez

Nunca me imaginé que preventDefault fuera nativo de javascript, ¡y lo es!

Gianmarco Cueva Apaza

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.

sergio perez

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

}

Ivan de jesus Romero leal

Use un “mouseover” para que se “swicheara” 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>

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

edgar zambrano

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

Cristian Paiva

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

JoaoGarduno

.addEventListener

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

Javier Luján Blanco

Muy buena clase. aclarada muchas dudas

Andrés Camilo Salgado

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

Michael Ramírez

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.

Dario Izurdiaga

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

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

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

Andres Felipe Piedrahita Morales

jajaja yo antes de todo (antes de ver la clase) utilice el type = ‘buttom’ 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

Leonardo Véliz

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>

Vicki Esther Avola

Esta clase me pareció super interesante. Gracias Juan

David Azael Rangel González

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>

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

Juan Sebastian Paez Medina

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

Jorge Luis Rueda Marin

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

Jorge Tamayo

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

gabriel gramajo

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

Referencia de Eventos (Event reference)

Esteban Felipe Mesa Archila

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>

Kimberlyn Serrano

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 😁

Alejandrina Pérez Lugo

Ya mejore mi mini calculadora de la clase anterior 😄

Captura de Pantalla 2022-10-08 a la(s) 20.34.31.png

Alejandrina Pérez Lugo

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>

Alejandro González

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>

Jesus Narciso Fernandez

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.

Jessica Daniela Páez Jiménez

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

Irving Martinez Fernandez

Algo de one piece

<!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="./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(“src”,“https://as01.epimg.net/meristation/imagenes/2021/02/08/noticias/1612786479_151283_1612786596_noticia_normal.jpg”);
}

function child(){
img.setAttribute(“src”, “https://pbs.twimg.com/media/CFGGcxbWEAEERYl.jpg”);
}

Resultado:

Andres-Vega

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

Henry Santiago Mora mancera

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

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>

Steevens Rodriguez

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

Nicolas Betancur Pavas

? 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

Rodrigo Viveros Ramirez

Captura de Pantalla 2022-08-08 a la(s) 09.17.04.png

Sergio Javier Lopez Olivera

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 “objeto”, 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.

Damian Ricardo Arenales Hernández

Cordial saludo,

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

Muchas gracias,

Atentamente
Damian Arenales

César Augusto Cortés Labrada

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(‘form’);
__
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(“submit”,calcularDatos);
__
Por lo tanto es valido escribir:
document.getElementById(‘form’).addEventListener(“submit”, 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.

Gerardo Garduño Rosas

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

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.

Eduar

function eventoMouse(){
alert(‘Hola, Bienvenido!!’)
}

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

Dave Juanes

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

Oscar Alexánder Ortiz Beltrán

hace 4 días

btn.addEventListener('mouseenter', () => {
    btn.style.backgroundColor = 'gray';
});

btn.addEventListener('mouseleave', () => {
    btn.style.backgroundColor = 'lightgray';    
});

Jose Antonio Rojas Ollarves

hace 12 días

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

Bryan Antonio Ortega Lezama

hace 24 días

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

Julian David Alzate Cuervo

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

Manuel Alejandro Ortiz

Excelente curso hermano, me motivaste mucho.

Manuel Alejandro Ortiz

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

Cristian Acalo

🦄✨

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

Jesús Eduardo Castillo Saavedra

hace 3 meses

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

Joel Alejandro Tovar Ramos

hace 3 meses

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

Luis Alfredo Suarez

addEventListener

addEventListener es un método en JavaScript que permite vincular un “escuchador” o “listener” 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 “click”, “mouseover”, “keydown”, 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 “miBoton”. 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 “miDiv”. 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! 👨‍💻

Juan Garcia

https://es.khanacademy.org/computing/computer-programming/html-js-jquery/dom-events-with-jquery/a/dom-events-and-properties

Acá una pagina con los diferentes eventos y ejemplos de qué hace cada uno.

Roger Morales Viquez

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

Gever Rodriguez

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

Antonio Maldonado

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.

Antonio Maldonado

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=“button”
.
xd

Victor Eduardo Macias Macias

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

Andrés Soret Chacin

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.

Miguel Ángel Ciavato Monsalve

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

Miguel Negron Garcia

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.

Rodrigo Beltrán

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

Erick Carrillo

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

BenjaTzul

Juan David nacio para enseñar que nivel de profesor

Carlos Casadiego