fengchuanyu преди 5 месеца
родител
ревизия
254bb71c93
променени са 2 файла, в които са добавени 46 реда и са изтрити 5 реда
  1. 32 0
      5_DOM/17_移动元素.html
  2. 14 5
      5_DOM/3_绑定事件.html

+ 32 - 0
5_DOM/17_移动元素.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box{
+            width: 100px;
+            height: 100px;
+            background: red;
+            position: absolute;
+            top:200px;
+            left: 400px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box"></div>
+    <script>
+        var oDom = document.documentElement;
+        var oBox = document.getElementsByClassName("box")[0];
+        oDom.onmousemove = function(e){
+            console.log(e.clientX,e.clientY);
+            console.log(oBox.offsetLeft,oBox.offsetTop);
+        }
+        oDom.onmousedown = function(e){
+            oDom.onmousemove = null;
+        }
+    </script>
+</body>
+</html>

+ 14 - 5
5_DOM/3_绑定事件.html

@@ -30,9 +30,9 @@
 
         // }
         // 鼠标移动
-        // oBtn.onmousemove = function(){
-        //     console.log("onmousemove")
-        // }
+        oBtn.onmousemove = function(){
+            console.log("onmousemove")
+        }
 
         // 鼠标移入
         // 事件处理函数中是可以使用this this指向的是触发事件的对象
@@ -53,8 +53,17 @@
         // obj.talk();
 
         // 鼠标移出
-        oBtn.onmouseout = function(){
-            console.log("onmouseout");
+        // oBtn.onmouseout = function(){
+        //     console.log("onmouseout");
+        // }
+
+        // 鼠标按下
+        oBtn.onmousedown = function(){
+            console.log("onmousedown");
+        }
+        // 鼠标抬起
+        oBtn.onmouseup = function(){
+            console.log("onmouseup");
         }
 
     </script>