vilvadot/DOMYEventos.html

## DOMYEventos.html
<!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>
	<!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>