Last active
December 2, 2020 20:05
-
-
Save vilvadot/7c8c14a9234ca2da87dc06e6bd2cf7ff to your computer and use it in GitHub Desktop.
Masterclass devscola DOM y Eventos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>DOM y Eventos</title> | |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" /> | |
<style> | |
pre { | |
background: #161f27; | |
min-height: 16px; | |
border-radius: 10px; | |
padding: 15px; | |
} | |
summary { | |
display: inline; | |
} | |
code { | |
margin-bottom: 10px; | |
} | |
.stop { | |
background: #c91d44; | |
color: white; | |
} | |
.spacer{ | |
height: 40px; | |
display:block; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>DOM y Eventos</h1> | |
<details> | |
<summary> | |
<h2 class="que-es-el-dom">1. Qué es el DOM?</h2> | |
</summary> | |
<p>Document Object Model</p> | |
<p>Es la representación orientada a objetos de la página web</p> | |
<p> | |
Está formado por los elementos (nodos) presentes en la estructura de nuestra web | |
</p> | |
<p>Propiedades, métodos y eventos</p> | |
<p> | |
Es una | |
<a href="http://bioub.github.io/dom-visualizer/" target="_blank">estructura en árbol</a | |
> | |
</p> | |
<p> | |
Global => Window => Document => HTML => estructura?</p> | |
</p> | |
<code>Cómo definimos esta estructura?</code> | |
<code>Para qué sirve?</code> | |
</details> | |
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | |
<h2 id="titulo-3">2. Qué podemos hacer con él?</h2> | |
<div class="spacer"></div> | |
<div id="mi-elemento" data-demo="true"> | |
Soy un elemento! | |
</div> | |
<div class="spacer"></div> | |
<h3>Buscar/Seleccionar elementos</h3> | |
<code>document.getElementById("mi-elemento")</code> | |
<code>document.querySelector("#mi-elemento")</code> | |
<code>document.querySelectorAll(h2)</code> | |
<code>document.querySelector("[data-demo]")</code> | |
<div class="spacer"></div> | |
<h3>Modificarlos</h3> | |
<script> | |
const miElemento = document.getElementById("mi-elemento") | |
function addElement(){ | |
const newElement = document.createElement('div') | |
newElement.className = 'nuevo-elemento' | |
newElement.innerHTML = '🔥' | |
miElemento.appendChild(newElement); | |
} | |
function removeElement(){ | |
const elementToRemove = document.querySelectorAll('.nuevo-elemento')[0] | |
elementToRemove.remove() | |
} | |
</script> | |
<style> | |
#mi-elemento{ | |
padding: 20px; | |
background:yellowgreen; | |
border-radius: 10px; | |
color:black; | |
} | |
.nuevo-elemento{ | |
padding: 16px; | |
display:inline; | |
} | |
.light{ | |
color:red !important; | |
background:white !important; | |
border: 2px solid black !important; | |
} | |
</style> | |
<p>Contenido: <code>miElemento.innerHTML = 'Tú si que eres un elemento!'</code></p> | |
<p>Estilo: <code>miElemento.style = "color: blue"</code></p> | |
<p>Atributos HTML: <code>miElemento.style = "color: white"</code></p> | |
<p>Hasta clases de css!: <code>miElemento.classList.add("light")</code></p> | |
<div class="spacer"></div> | |
<h3>Añadir/quitarlos</h3> | |
<p> | |
<button onClick="addElement()">Añadir</button> | |
<button class="stop" onClick="removeElement()">Quitar</button> | |
</p> | |
<div class="spacer"></div> | |
<h3>Escuchar sus cambios 👇🏻</h3> | |
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | |
<h2>3. Eventos</h2> | |
<blockquote>"Los eventos son acciones o ocurrencias que pasan en el sistema en que estás programando" - <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events" target="_blank">MDN</a></blockquote> | |
<p>Pueden informar de acciones del usuario o de cosas que ocurran en la web</p> | |
<p>Son objetos, que utilizan la interfaz del objeto Event de javascript</p> | |
<p>Pueden tener propiedades adicionales para dar más información</p> | |
<p>Hay <a href="https://developer.mozilla.org/en-US/docs/Web/Events" target="_blank">muchos tipos</a> de eventos </p> | |
<div class="spacer"></div> | |
<h3>Cómo los usamos?</h3> | |
<p>Event listeners y Event handlers</p> | |
<p>Contenido de los eventos (target)</p> | |
<h4>Qué podemos "escuchar"?</h4> | |
<p>La posición del ratón: <code>document.addEventListener("mousemove", printEvent);</code></p> | |
<script> | |
const printEvent = (event) => { | |
console.log(event); | |
document.querySelector("#mouse-event").innerHTML = JSON.stringify({ | |
x: event.pageX, | |
y: event.pageY, | |
}); | |
}; | |
function trackMouse() { | |
document.addEventListener("mousemove", printEvent); | |
} | |
function stopTrackMouse() { | |
document.removeEventListener("mousemove", printEvent); | |
} | |
</script> | |
<p> | |
<pre id="mouse-event"></pre> | |
<button onClick="trackMouse()">Track</button> | |
<button onclick="stopTrackMouse()" class="stop">Stop tracking</button> | |
</p> | |
<div class="spacer"></div> | |
<input type="text" placeholder="dime cosas bonitas" /> | |
<p>Cuando se escribe en un input: <code>document.querySelector("input").addEventListener("keyup", (event) => { console.log(event.target.value); console.log(event)})</code></p> | |
<div class="spacer"></div> | |
<p>Cuando se hace click en algo: <code>document.querySelector("#algo").addEventListener("click", (event) => { alert("Se ha clickado en algo!"); console.log(event);})</code></p> | |
<button id="algo">Algo 🐸</button> | |
<div class="spacer"></div> | |
<p>Y muchas cosas más...</p> | |
<div class="spacer"></div> | |
<h3>Podemos emitirlos</h3> | |
<code>const paellaEvent = new Event('paella') | |
<br/> | |
miElemento.dispatchEvent(paellaEvent);</code> | |
<div class="spacer"></div> | |
<h3>Qué es el "event bubbling"?</h3> | |
<style> | |
.bubbling{ | |
display:flex; | |
text-align:center; | |
justify-content: space-between; | |
min-width: 200px; | |
color:black; | |
padding: 20px; | |
background: white; | |
border-radius: 10px; | |
border: 1px solid black; | |
} | |
.bubbling:hover{ | |
cursor:pointer; | |
} | |
.bub-1{ | |
background: orangered; | |
} | |
.bub-2{ | |
background: blue; | |
min-width: 50px !important; | |
} | |
</style> | |
<code>Qué alert saldrá si hago click en...?</code> | |
<br/> | |
<code>event.stopPropagation</code> | |
<div class="spacer"></div> | |
<div class="bubbling hover" onclick="alert('El padre')">El padre | |
<div class="bubbling bub-1" onclick="alert('El hijo')">El hijo | |
<div class="bubbling bub-2" href="#" onclick="alert('🕊')">🕊</a> | |
</div> | |
</div> | |
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment