minor

Author: iliakan

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html

@@ -67,6 +67,10 @@
 
   </table>
 
+  <textarea id="text"></textarea>
+
+  <input type="button" onclick="text.value=''" value="Clear">
+
   <script src="script.js"></script>
 
 </body>

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js

@@ -19,6 +19,10 @@ table.onmouseover = function(event) {
   // hooray! we entered a new <td>
   currentElem = target;
   target.style.background = 'pink';
+
+  // show that in textarea
+  text.value += `OVER -> ${currentElem.tagName}.${currentElem.className}\n`;
+  text.scrollTop = 1e6;
 };
 
 
@@ -41,5 +45,10 @@ table.onmouseout = function(event) {
 
   // we left the <td>. really.
   currentElem.style.background = '';
+
+  // show that in textarea
+  text.value += `OUT <- ${currentElem.tagName}.${currentElem.className}\n`;
+  text.scrollTop = 1e6;
+
   currentElem = null;
 };

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation.view/script.js

@@ -1,13 +1,15 @@
 table.onmouseover = function(event) {
   let target = event.target;
   target.style.background = 'pink';
-  text.value += "mouseover " + target.tagName + "\n";
+
+  text.value += `OVER -> ${target.tagName}.${target.className}\n`;
   text.scrollTop = text.scrollHeight;
 };
 
 table.onmouseout = function(event) {
   let target = event.target;
   target.style.background = '';
-  text.value += "mouseout " + target.tagName + "\n";
+
+  text.value += `OUT <- ${target.tagName}.${target.className}\n`;
   text.scrollTop = text.scrollHeight;
-};
+};