Skip to content

Commit 5430d98

Browse files
Douglas1688Douglas1688
committed
[ADD] Clase 18 Eventos
1 parent db2c850 commit 5430d98

4 files changed

Lines changed: 89 additions & 1 deletion

File tree

‎clase_17/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ const name = document.getElementById('name');
2121

2222
// title.classList.add('main-title');
2323
title.classList.remove('main-title');
24-
name.value = 'Yo siempre quise ser bichote'
24+
name.value = 'Algo para mostrar'

‎clase_18/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Eventos en JS</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
<!-- <a href="https://developer.mozilla.org/es/docs/Web/Events">Referencia de eventos</a>
10+
<a href="https://developer.mozilla.org/en-US/docs/Web/Events">Referencia de eventos (inglés)</a> -->
11+
12+
<div id="box" class="box red"></div>
13+
<input id="input" type="text"/>
14+
<button id="button">Click here</button>
15+
<script src="script.js"></script>
16+
</body>
17+
</html>

‎clase_18/script.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/* EVENTOS
2+
Es cualquier cosa que sucede en nuestro documento.
3+
El contenido se ha leído
4+
El contenido se ha cargado
5+
El usuario mueve el ratón
6+
El usuario pusla una tecla
7+
La ventana se ha cerrado
8+
9+
10+
Element.addEventListener('event',callback);
11+
12+
Eventos de ratón:
13+
click - cuando pulsamos el botón izquierdo del ratón.
14+
dblclick - cuando pulsamos dos veces seguidas el botón izquierdo del ratón.
15+
mouseenter - cuando entramos en la zona que tiene el evento.
16+
mousedown - cuando pulsamos el botón izquierdo del ratón.
17+
mouseup - cuando soltamos el botón izquierdo del ratón.
18+
mousemove - cuando movemos el ratón.
19+
mouseleave - cuando salimos de la zona que tiene el evento.
20+
21+
Eventos de teclado:
22+
keydown - cuando pulsamos una tecla.
23+
keyup - cuando soltamos una tecla.
24+
keypress - cuando pulsamos una tecla y no la soltamos.
25+
26+
*/
27+
let n = 0;
28+
const button = document.getElementById('button');
29+
const box = document.getElementById('box')
30+
const input = document.getElementById('input')
31+
// button.addEventListener('click',() => {
32+
// n++;
33+
// console.log(n);
34+
// });
35+
36+
// button.addEventListener('dblclick',() => {
37+
// console.log("Doble click");
38+
// });
39+
40+
// box.addEventListener('mouseenter',() => {
41+
// box.classList.replace('red','green')
42+
// });
43+
// box.addEventListener('mouseleave',() => {
44+
// box.classList.replace('green','red')
45+
46+
// });
47+
// box.addEventListener('mousedown',() =>{
48+
// console.log("Has pulsado la caja")
49+
// })
50+
// box.addEventListener('mouseup',() =>{
51+
// console.log("Has soltado la caja")
52+
// })
53+
54+
input.addEventListener('keydown',() =>{
55+
console.log('Has pulsado una tecla');
56+
})

‎clase_18/styles.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
a,
2+
button{
3+
display: block;
4+
}
5+
.box {
6+
width: 100px;
7+
height: 100px;
8+
background: red;
9+
}
10+
.red {
11+
background: red;
12+
}
13+
.green {
14+
background: green;
15+
}

0 commit comments

Comments
 (0)