From 10ade499d388deda51204a04c879a354e1c057e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A6=E4=BB=B2=E6=99=93?=
 <10033715+wzx626@user.noreply.gitee.com>
Date: Thu, 24 Nov 2022 09:36:08 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 韦仲晓 <10033715+wzx626@user.noreply.gitee.com>
---
 ...22\214 _11_21_\347\254\224\350\256\260.md" | 19 +++++++++
 .../2022.11.24\344\272\213\344\273\266.md"    | 34 ++++++++++++++++
 .../202211.23\344\272\213\344\273\266.md"     | 39 +++++++++++++++++++
 3 files changed, 92 insertions(+)
 create mode 100644 "34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.18_DOM_\345\222\214 _11_21_\347\254\224\350\256\260.md"
 create mode 100644 "34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md"
 create mode 100644 "34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/202211.23\344\272\213\344\273\266.md"

diff --git "a/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.18_DOM_\345\222\214 _11_21_\347\254\224\350\256\260.md" "b/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.18_DOM_\345\222\214 _11_21_\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..39002a7
--- /dev/null
+++ "b/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.18_DOM_\345\222\214 _11_21_\347\254\224\350\256\260.md"	
@@ -0,0 +1,19 @@
+W3C已经定义了一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
+
+![DOM HTML 树](https://www.w3school.com.cn/i/ct_htmltree.gif)
+
+- 文档：一个页面就是一个文档，DOM中使用document表示
+- 元素：页面中的所有标签都是元素，DOM中使用element
+- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）,DOM中使用node表示
+
+
+
+
+
+1. **getElementById()**方法获取带ID的元素对象
+2. **getElementsByClassName();**根据类名获得某些元素集合
+3. **document.querySelector('选择器')**;根据指定选择器返回第一个元素对象 
+
+  **注意：切记里面的选择器需要加符号 类【class加. 】【类id加# 】【 标签无需加符号】**
+
+4. **document.querySelectorAll();**//返回指定选择器的所有元素对象集合
\ No newline at end of file
diff --git "a/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md" "b/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..8d6cffd
--- /dev/null
+++ "b/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/2022.11.24\344\272\213\344\273\266.md"
@@ -0,0 +1,34 @@
+**事件对象**
+
+事件对象：当我们触发了事件，调用设置好的事件函数（浏览器调用这个函数）系统为了方便我们控制事件，在调用函数的时候给我们传递了一个参数，浏览器传递进来的参数是一个对象-事件对象
+
+**阻止默认行为**
+
+默认行为：有些标签，不用给他绑定事件，有默认的行为，比如a/form/鼠标右击/选中文字...
+
+利用事件对象阻止鼠标默认行为
+
+   e.preventDefault();
+
+  e.returnValue = false;
+
+
+
+课堂案例：
+
+<script>
+      //使用onchange事件动态获取单选框的值
+      var input = document.getElementsByTagName('input');
+    var len = input.length;
+    var p = document.querySelector('p');
+    div.onchange = function () {
+        for (var i = 0; i < len; i++) {
+            if (input[i].checked == true) {
+                p.innerText = '您选择的是'+input[i].value;
+                 }
+       }
+    }
+</script>
+
+
+
diff --git "a/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/202211.23\344\272\213\344\273\266.md" "b/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/202211.23\344\272\213\344\273\266.md"
new file mode 100644
index 0000000..790f22d
--- /dev/null
+++ "b/34\351\237\246\344\273\262\346\231\223/\347\254\224\350\256\260/202211.23\344\272\213\344\273\266.md"
@@ -0,0 +1,39 @@
+## 1.1事件：
+
+用户在网页中的行为跟代码逻辑交互
+
+#### 1.2事件的三要素：
+
+1. 事件源：用户跟代码交互使用的标签
+2. 时间类型：行为的类型
+3. 事件处理程序：函数代码
+4. 事件语法：事件源.on类型 = function(){}
+
+##### 1.3**事件流**
+
+事件流： 事件从开始触发到执行结束的过程
+
+事件流分为三个阶段
+
+1.捕获阶段：找目标元素的过程。
+
+2.目标阶段：找到目标元素，执行他的事件
+
+3.冒泡阶段：从小到大离开目标元素的过程    默认非目标元素的事件是冒泡阶段执行的
+
+### 1.4冒泡
+
+- 指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
+
+- 如果不希望发生事件冒泡可以通过事件对象属性来取消冒泡
+
+- 实现终止冒泡
+  
+  ##### 阻止冒泡
+  
+  通过事件对象cancelBubble属性来取消冒泡
+  
+  1. e.cancelBubble = true;
+  
+  2. e.stopPropagation();
+
-- 
Gitee


From 925759f09155ed7e64d633e2282ee19303761a97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A6=E4=BB=B2=E6=99=93?=
 <10033715+wzx626@user.noreply.gitee.com>
Date: Thu, 24 Nov 2022 12:08:22 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 韦仲晓 <10033715+wzx626@user.noreply.gitee.com>
---
 .../2022.11.18\344\275\234\344\270\232.html"  | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 "34\351\237\246\344\273\262\346\231\223/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html"

diff --git "a/34\351\237\246\344\273\262\346\231\223/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html" "b/34\351\237\246\344\273\262\346\231\223/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html"
new file mode 100644
index 0000000..c397b69
--- /dev/null
+++ "b/34\351\237\246\344\273\262\346\231\223/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html"
@@ -0,0 +1,36 @@
+<!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>
+        body{
+            text-align: center;
+        }
+        div{
+            margin-top: 20px;
+            margin-left: 480px;
+        }
+        #box{
+            width: 500px;
+            height: 100px;
+            border: 2px solid rosybrown;
+        }
+    </style>
+</head>
+<body>
+    <input type="text" id="input">&nbsp;
+    <button onclick="start()">复制</button>
+    <div id="box">  
+
+    </div>
+    <script>
+        var inputText = document.getElementById('input');
+        function start(){
+            document.getElementById('box').innerText = inputText.value;  
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee