Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
W250511
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

addmin

fengchuanyu 2 долоо хоног өмнө
parent
5ca063a33c
commit
24e44044c3
3 өөрчлөгдсөн 124 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 53 0
      4-BOM&DOM/16_DOM事件机制.html
  2. 48 0
      4-BOM&DOM/17_DOM绑定事件.html
  3. 23 0
      4-BOM&DOM/18_DOM创建元素.html

+ 53 - 0
4-BOM&DOM/16_DOM事件机制.html
Файл харах 

@@ -0,0 +1,53 @@
 
+<!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>
 
+        .box1{
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: red;
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2"></div>
 
+    </div>
 
+    <script>
 
+        var oBox1 = document.getElementsByClassName("box1")[0];
 
+        var oBox2 = document.getElementsByClassName("box2")[0];
 
+
 
+        // 事件冒泡
 
+        // 事件冒泡：事件从最当前触发事件的元素开始，然后逐步向上冒泡到祖先元素，直到到达文档的根元素（html标签）。
 
+        // 事件冒泡的过程中，事件处理函数会按照元素的层级关系，从内到外依次执行。
 
+        // oBox1.onclick = function(){
 
+        //     console.log("box1")
 
+        // }
 
+        // oBox2.onclick = function(){
 
+        //     console.log("box2")
 
+        // }
 
+
 
+        oBox1.addEventListener("click",function(){
 
+            console.log("3-box1")
 
+        },false)
 
+        oBox2.addEventListener("click",function(){
 
+            console.log("4-box2")
 
+        },false)
 
+
 
+        oBox1.addEventListener("click",function(){
 
+            console.log("1-box1")
 
+        },true)
 
+        oBox2.addEventListener("click",function(){
 
+            console.log("2-box2")
 
+        },true)
 
+    </script>
 
+</body>
 
+</html>

+ 48 - 0
4-BOM&DOM/17_DOM绑定事件.html
Файл харах 

@@ -0,0 +1,48 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <button id="btn">按钮</button>
 
+    <script>
 
+        var oBtn = document.getElementById("btn");
 
+
 
+        // oBtn.onclick = function(){
 
+        //     console.log("按钮被点击了")
 
+        // }
 
+        // oBtn.onclick = function(){
 
+        //     console.log("hello");
 
+        // }
 
+
 
+        // 移除事件
 
+        // oBtn.onclick = null;
 
+
 
+
 
+
 
+        // var a = 10;
 
+        // var a = 20;
 
+
 
+        // 通过 addEventListener 绑定事件
 
+        // 接收三个参数 第一个事件名称 第二个事件处理函数 第三个布尔值是否冒泡
 
+        // oBtn.addEventListener("click",function(){
 
+        //     console.log("按钮被点击了");
 
+        // });
 
+        // oBtn.addEventListener("click",function(){
 
+        //     console.log("hello");
 
+        // });
 
+
 
+        // 两个匿名函数 及时内部方法一摸一样 都不是同一个函数
 
+
 
+        function foo(){
 
+            console.log("按钮被点击了")
 
+        }
 
+        oBtn.addEventListener("click",foo);
 
+        // 移除事件
 
+        // removeEventListener 要移除的事件内的参数一定要跟绑定事件时的参数一模一样
 
+        oBtn.removeEventListener("click",foo);
 
+    </script>
 
+</body>
 
+</html>

+ 23 - 0
4-BOM&DOM/18_DOM创建元素.html
Файл харах 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div>  你好 </div>
 
+    </div>
 
+    <script>
 
+        var oBox = document.getElementById("box");
 
+
 
+        // 创建元素
 
+        var oH1 = document.createElement("h1");
 
+        oH1.innerText = "hello world";
 
+        oH1.style.color = "red";
 
+        // 将元素插入到页面中 在当前标签的最后边
 
+        oBox.append(oH1);
 
+    </script>
 
+</body>
 
+</html>