minor

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

@@ -195,6 +195,10 @@ Here's an example of code that accounts for all possible situations:
 
 [js src="mouseenter-mouseleave-delegation-2/script.js"]
 
+Once again, the important features are:
+1. It uses event delegation to handle entering/leaving of any `<td>` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation.
+2. Extra events, such as moving between descendants of `<td>` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters `<td>` as a whole.
+
 ```online
 Here's the full example with all details:
 

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

@@ -18,11 +18,7 @@ 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;
+  onEnter(currentElem);
 };
 
 
@@ -44,11 +40,23 @@ 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;
-
+  onLeave(currentElem);
   currentElem = null;
 };
+
+// any functions to handle entering/leaving an element
+function onEnter(elem) {
+  elem.style.background = 'pink';
+
+  // show that in textarea
+  text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`;
+  text.scrollTop = 1e6;
+}
+
+function onLeave(elem) {
+  elem.style.background = '';
+
+  // show that in textarea
+  text.value += `out <- ${elem.tagName}.${elem.className}\n`;
+  text.scrollTop = 1e6;
+}

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

@@ -2,7 +2,7 @@ table.onmouseover = function(event) {
   let target = event.target;
   target.style.background = 'pink';
 
-  text.value += `OVER -> ${target.tagName}.${target.className}\n`;
+  text.value += `over -> ${target.tagName}\n`;
   text.scrollTop = text.scrollHeight;
 };
 
@@ -10,6 +10,6 @@ table.onmouseout = function(event) {
   let target = event.target;
   target.style.background = '';
 
-  text.value += `OUT <- ${target.tagName}.${target.className}\n`;
+  text.value += `out <- ${target.tagName}\n`;
   text.scrollTop = text.scrollHeight;
 };