Complete

brian-emarquez · brian-emarquez · commit 4f46548e6028 · 2021-04-30T18:05:03.000-05:00
diff --git a/023 Eventos raton Teclado/JavaScript.js b/023 Eventos raton Teclado/JavaScript.js
@@ -1,26 +1,35 @@
-// Atributos y clases
-
-const title = document.getElementById('title')
-const name = document.getElementById('name')
-
-/******* ATRIBUTOS *************/
-// console.log(name.getAttribute('id'));
-// name.setAttribute('type', 'date')
-// console.log(name)
-
-/********CLASES **************/
-// title.classList.add('main-title', 'other-title')
-
-// title.classList.remove('title')
-
-// if(title.classList.contains('title')) console.log('Title tiene la clases title');
-// else console.log('Title no tiene la clases title');
-
-// title.classList.replace('title', 'brian')
-
-console.log(title)
-console.log(name)
-
-
-
+ /*Eventos de raton
+     dbclick
+     mouseenter
+     mouseleave
+     mausedown
+     mauseup
+     mousemove
+  */
+
+ /*Eventos teclado
+     keydown
+     keyup
+     keypress
+ * */
+
+// const button = document.getElementById('button')
+// button.addEventListener('click', ()=>{
+//     console.log('CLICK');
+// })
+
+ // const button = document.getElementById('button')
+ // button.addEventListener('dblclick',()=>{
+ //     console.log('dblclick')
+ // })
+
+const button = document.getElementById('button')
+const box = document.getElementById('box')
+box.addEventListener('mouseenter', ()=>{
+    box.classList.replace('red', 'green')
+})
+ box.addEventListener('mouseleave', ()=>{
+     box.classList.replace('green', 'red')
+
+ })
 
diff --git a/023 Eventos raton Teclado/index.html b/023 Eventos raton Teclado/index.html
@@ -2,15 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title> DOM </title>
+    <title> Eventos </title>
+    <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
 
-    <h1 id="title" class="title">Atributos desde javascript </h1>
-
-    <label for="name">Name</label>
-    <input id="name" type="text>"/>
+<!--    <a href="https://developer.mozilla.org/es/docs/web/events"> Google de eventos</a>-->
+<!--    <a href="https://developer.mozilla.org/en-US/docs/web/events"> Google de eventos(ingles)</a>-->
 
+    <div id="box" class="box red"></div>
+    <button id="button"> Click me! </button>
     <script src="JavaScript.js"></script>
 </body>
 </html>
diff --git a/023 Eventos raton Teclado/readme.md b/023 Eventos raton Teclado/readme.md
@@ -1 +1,14 @@
 ### Eventos Raton Teclado
+
+- Un evento es cualquier cosa que sucede en nuestro documento
+    * El contenido se ha leido
+    * El contenido se ha cargado
+    * El usuario mueve el raton
+    * EL usuario Pulsa una tecla
+    * La ventana se ha cerrado
+    * y un largo etc.
+    
+
+```js
+Elemento.addEventListener('event`, callback)
+```
diff --git a/023 Eventos raton Teclado/style.css b/023 Eventos raton Teclado/style.css
@@ -0,0 +1,18 @@
+a,
+button{
+    display: block;
+}
+
+.box{
+    width: 100px;
+    height: 100px;
+    background: red;
+}
+
+.red{
+    background: red;
+}
+
+.green{
+    background: green;
+}
