Update test code

anseki · anseki · commit e13e70a12051 · 2018-04-05T15:18:51.000+09:00
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@ AnimEvent controls timing of calling event listeners with [`requestAnimationFram
 
 AnimEvent works like [lodash's `throttle` function](https://lodash.com/docs#throttle), but it uses `requestAnimationFrame` that is more optimized for animation, instead of "wait-time".
 
+Example: Open a file `test/test.html` by web browser.
+
 ## Usage
 
 Load AnimEvent into your web page.
diff --git a/test/test.html b/test/test.html
@@ -39,7 +39,7 @@
 </head>
 <body>
 
-  <div id="stage"></div>
+  <div id="stage">Move the mouse here</div>
   <div class="view">
     <div id="bar1" class="bar"></div>
     <div id="count1" class="count"></div>
@@ -61,19 +61,30 @@
   style1 = bar1.style,
   style2 = bar2.style,
   countValue1 = 0,
-  countValue2 = 0;
-
-// Normal
-stage.addEventListener('mousemove', function(event) {
-  style1.width = event.pageX + 'px';
-  count1.textContent = ++countValue1;
-}, false);
-
-// AnimEvent
-stage.addEventListener('mousemove', AnimEvent.add(function(event) {
-  style2.width = event.pageX + 'px';
-  count2.textContent = ++countValue2;
-}), false);
+  countValue2 = 0,
+
+  // Normal
+  listenerNormal = function(event) {
+    style1.width = event.pageX + 'px';
+    count1.textContent = ++countValue1;
+  },
+  // AnimEvent
+  listenerAnimEvent = AnimEvent.add(function(event) {
+    style2.width = event.pageX + 'px';
+    count2.textContent = ++countValue2;
+  });
+
+stage.addEventListener('mousemove', listenerNormal, false);
+stage.addEventListener('mouseenter', listenerNormal, false);
+stage.addEventListener('mouseleave', listenerNormal, false);
+stage.addEventListener('mouseover', listenerNormal, false);
+stage.addEventListener('mouseout', listenerNormal, false);
+
+stage.addEventListener('mousemove', listenerAnimEvent, false);
+stage.addEventListener('mouseenter', listenerAnimEvent, false);
+stage.addEventListener('mouseleave', listenerAnimEvent, false);
+stage.addEventListener('mouseover', listenerAnimEvent, false);
+stage.addEventListener('mouseout', listenerAnimEvent, false);
 
   </script>
 
