Create mouseover和mouseenter的区别.html

Rain120 · Jan 25, 2018 · 74d7873 · 74d7873
1 parent 295ed65
commit 74d7873
Showing 1 changed file with 51 additions and 0 deletions.
diff --git a/mouseover和mouseenter的区别.html b/mouseover和mouseenter的区别.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>mouseove & mouseout和mouseenter & mouseleave</title>
+  <style>
+    div {
+      border: 1px solid red;
+      height:50px;
+      line-height: 50px;
+    }
+    #b1, #b2 {
+      border: 1px solid green;
+    }
+  </style>
+</head>
+<body>
+  <div id="con1">
+    <button id="b1">mouseove & mouseout</button>
+  </div>
+  <p id="demo1"></p>
+  <div id="con2">
+    <button id="b2">mouseenter & mouseleave</button>
+  </div>
+  <p id="demo2"></p>
+  <script>
+    var over = 0
+    var out = 0
+    var enter = 0
+    var leave = 0
+
+    // mouseover
+    document.getElementById('con1').addEventListener('mouseover', function() {
+      document.getElementById('demo1').innerHTML = 'mouseover ' + over++
+    })
+    //mouseout
+    document.getElementById('con1').addEventListener('mouseout', function() {
+      document.getElementById('demo1').innerHTML = 'mouseout ' + out++
+    })
+    //mouseenter
+    document.getElementById('con2').addEventListener('mouseenter', function() {
+      document.getElementById('demo2').innerHTML = 'mouseenter ' + enter++
+    })
+    //mouseleave
+    document.getElementById('con2').addEventListener('mouseleave', function() {
+      document.getElementById('demo2').innerHTML = 'mouseleave ' + leave++
+    })
+  </script>
+</body>
+</html>