zsydgithub 2 years ago
parent
commit
ddfc68c315
2 changed files with 107 additions and 0 deletions
  1. 63 0
      6_Dom/7_事件.html
  2. 44 0
      6_Dom/8_拖拽.html

+ 63 - 0
6_Dom/7_事件.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    #div1{
+      width: 200px;
+      height: 200px;
+      background: red;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <input type="text" id="input1">
+  </div>
+  <script>
+    var div1 = document.getElementById('div1')
+    var input1 = document.getElementById('input1')
+    //点击事件
+    // div1.onclick = function(){
+    //   console.log(111111)
+    // }
+    //双击事件
+    // div1.ondblclick = function(){
+    //   console.log(2222)
+    // }
+    //鼠标移动
+    // div1.onmousemove = function(){
+    //   console.log(333)
+    // }
+    //鼠标划出
+    // div1.onmouseout = function(){
+    //   console.log(444)
+    // }
+    //按下鼠标触发事件
+    // div1.onmousedown = function(e){
+    //   console.log(555)
+    //   //鼠标相对于浏览器视口的坐标轴
+    //   // console.log(e.clientX,e.clientY)
+    // }
+    //松开鼠标触发事件
+    // div1.onmouseup = function(){
+    //   console.log(111)
+    // }
+    // input1.onkeydown = function(e){
+    //   console.log(e.keyCode)
+    //   if(e.keyCode == 13){
+    //     console.log('我是回车')
+    //   }
+    // }
+    // input1.onkeyup = function(){
+    //   console.log('onkeyup')
+    // }
+    input1.onkeypress = function(){
+      console.log('onkeypress')
+    }
+  </script>
+</body>
+</html>

+ 44 - 0
6_Dom/8_拖拽.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    *{
+      margin: 0;
+      padding: 0;
+    }
+    #div1{
+      width: 200px;
+      height: 200px;
+      background: aqua;
+      position: absolute;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1"></div>
+  <script>
+    var div1 = document.getElementById('div1')
+    //鼠标按下事件
+    div1.onmousedown = function(e){
+      //鼠标到边框的距离
+      var xLeft = e.clientX - div1.offsetLeft
+      var xTop = e.clientY - div1.offsetTop
+
+      console.log(xLeft,xTop)
+      //鼠标移动事件
+      div1.onmousemove = function(e){
+        div1.style.left = e.clientX - xLeft + 'px'
+        div1.style.top = e.clientY - xTop + 'px'
+      }
+    }
+    //鼠标抬起事件
+    div1.onmouseup = function(){
+      div1.onmousemove = null
+    }
+  </script>
+</body>
+</html>