首页 发现 帮助
登录
lovecoding
/
web0715
10
0
派生 0
文件 工单管理 0 Wiki
浏览代码

add

fengchuanyu 9 月之前
父节点
3a10d9af58
当前提交
04ba3bc55a
共有 4 个文件被更改，包括 171 次插入 和 0 次删除
合并视图 显示文件统计
  1. 二进制
      .DS_Store
  2. 74 0
      4_DOM&BOM/21_DOM事件机制.html
  3. 46 0
      4_DOM&BOM/22_DOM阻止事件机制.html
  4. 51 0
      4_DOM&BOM/23_DOM事件委托.html

二进制
.DS_Store
查看文件


+ 74 - 0
4_DOM&BOM/21_DOM事件机制.html
查看文件 

@@ -0,0 +1,74 @@
 
+<!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;
 
+        }
 
+        .box3{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2">
 
+            <div class="box3"></div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        var oBxo1 = document.getElementsByClassName("box1")[0];
 
+        var oBxo2 = document.getElementsByClassName("box2")[0];
 
+        var oBox3 = document.getElementsByClassName("box3")[0];
 
+
 
+        // 事件机制 冒泡
 
+        // oBxo1.onclick = function(){
 
+        //     console.log("box1");
 
+        // }
 
+        // oBxo2.onclick = function(){
 
+        //     console.log("box2");
 
+        // }
 
+        // oBox3.onclick = function(){
 
+        //     console.log("box3");
 
+        // }
 
+
 
+
 
+        // js事件机制分为 事件捕获 事件冒泡
 
+        // 事件捕获由外向内逐层触发 addEventListener 第三个参数为true
 
+        // 事件冒泡由内向外逐层触发 addEventListener 第三个参数为false
 
+
 
+        // js事件机制的顺序
 
+        oBxo1.addEventListener("click",function(){
 
+            console.log("box1");
 
+        },false)
 
+        oBxo2.addEventListener("click",function(){
 
+            console.log("box2");
 
+        },false)
 
+        oBox3.addEventListener("click",function(){
 
+            console.log("box3");
 
+        },false)
 
+
 
+        oBxo1.addEventListener("click",function(){
 
+            console.log("box1");
 
+        },true)
 
+        oBxo2.addEventListener("click",function(){
 
+            console.log("box2");
 
+        },true)
 
+        oBox3.addEventListener("click",function(){
 
+            console.log("box3");
 
+        },true)
 
+    </script>
 
+</body>
 
+</html>

+ 46 - 0
4_DOM&BOM/22_DOM阻止事件机制.html
查看文件 

@@ -0,0 +1,46 @@
 
+<!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{
 
+            position: fixed;
 
+            top:0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0,0,0,.5);
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: #fff;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            margin-top: -100px;
 
+            margin-left: -100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box2"></div>
 
+    </div>
 
+    <script>
 
+        var oBox = document.getElementsByClassName("box")[0];
 
+        var oBox2 = document.getElementsByClassName("box2")[0];
 
+
 
+        oBox.onclick = function(){
 
+            this.style.display = "none";
 
+        }
 
+        oBox2.onclick = function(e){
 
+            this.innerText = "hello";
 
+            e.stopPropagation();
 
+        }
 
+        
+    </script>
 
+</body>
 
+</html>

+ 51 - 0
4_DOM&BOM/23_DOM事件委托.html
查看文件 

@@ -0,0 +1,51 @@
 
+<!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>
 
+    <ul>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+    </ul>
 
+    <button id="add-btn">add</button>
 
+    <script>
 
+        // var aLi = document.getElementsByTagName("li");
 
+        // for(var i=0;i<aLi.length;i++){
 
+        //     aLi[i].onclick = function(){
 
+        //         console.log(this.innerText);
 
+        //     }
 
+        // }
 
+
 
+        // 事件委托 事件委托是基于冒泡机制实现
 
+        // 相当于把内部多个元素的事件委托给他们共同的父级去处理
 
+        var oUl = document.getElementsByTagName("ul");
 
+        var addBtn = document.getElementById("add-btn");
 
+        oUl[0].onclick = function(e){
 
+            // console.log(e);
 
+            // console.log(e.target.innerText);
 
+            if(e.target.tagName == "LI"){
 
+                console.log(e.target.innerText)
 
+            }else{
 
+                console.log("点错了");
 
+            }
 
+        }
 
+        var i = 4;
 
+        addBtn.onclick = function(){
 
+            var oLi = document.createElement("li");
 
+            oLi.innerText = i++;
 
+            oUl[0].append(oLi);
 
+        }
 
+
 
+
 
+        // /**
 
+        //  * 事件委托可以避免循环给内部元素绑定事件
 
+        //  * 他还可以获取到新增元素
 
+        //  * 
+        //  * /
 
+    </script>
 
+</body>
 
+</html>