Skip to content

Instantly share code, notes, and snippets.

@vilvadot
Last active December 2, 2020 20:05
Show Gist options
  • Save vilvadot/7c8c14a9234ca2da87dc06e6bd2cf7ff to your computer and use it in GitHub Desktop.
Save vilvadot/7c8c14a9234ca2da87dc06e6bd2cf7ff to your computer and use it in GitHub Desktop.
Masterclass devscola DOM y Eventos
<!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