Accueil Explorer Aide
Connexion
lovecoding
/
class
10
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

dom

e il y a 11 mois
Parent
aae72a452e
commit
e832e63815
6 fichiers modifiés avec 193 ajouts et 0 suppressions
Vue séparée Afficher les stats Diff
  1. 10 0
      js/DOM/12.元素.html
  2. 77 0
      js/DOM/13.事件冒泡.html
  3. 22 0
      js/DOM/14.默认事件.html
  4. 20 0
      js/DOM/15.事件源.html
  5. 22 0
      js/DOM/16.事件流.html
  6. 42 0
      js/DOM/17.事件委托.html

+ 10 - 0
js/DOM/12.元素.html
Voir le fichier 

@@ -11,8 +11,12 @@
 
         2222
 
         <h1>1111</h1>
 
     </div>
 
+    <div id="list">
 
+        <p>hello</p>
 
+    </div>
 
     <script>
 
         var box = document.getElementById("box");
 
+        var list = document.getElementById("list");
 
         // console.log(box.nodeName)
 
         var main = document.getElementById("main");
 
         var h1 = document.querySelector("h1");
 
@@ -34,6 +38,12 @@
 
         main.removeChild(h1);
 
         // 删除页面元素节点 remove
 
         // h1.remove()
 
+        // alert(list.innerHTML)
 
+        alert(list.innerText)
 
+        /**
 
+         * innerText 只解析文本
 
+         * innerHTML 文本与标签一同解析
 
+         * /
 
     </script>
 
 </body>
 
 </html>

+ 77 - 0
js/DOM/13.事件冒泡.html
Voir le fichier 

@@ -0,0 +1,77 @@
 
+<!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>
 
+        div {
 
+            margin-top: 20px;
 
+        }
 
+        #box1 {
 
+            width: 600px;
 
+            height: 600px;
 
+            background-color: red;
 
+        }
 
+        #box2 {
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: green;
 
+        }
 
+        #box3 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        事件：
 
+            事件捕获  由外向内
 
+            目标阶段
 
+            事件冒泡  由内向外
 
+     -->
 
+    <div id="box1">
 
+        <div id="box2">
 
+            <div id="box3"></div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        var box1 = document.getElementById("box1");
 
+        var box2 = document.getElementById("box2");
 
+        var box3 = document.getElementById("box3");
 
+        // box1.onclick = function(event) {
 
+        //     console.log(event)
 
+        //     // 取消冒泡事件方法
 
+        //     event.stopPropagation();
 
+        //     alert("box1")
 
+
 
+        // }
 
+        // box2.onclick = function(event) {
 
+        //     alert("box2")
 
+        //     // IE浏览器
 
+        //     event.cancelBubble = true
 
+        //     // event.stopPropagation();
 
+        // }
 
+        // box3.onclick = function(event) {
 
+        //     alert("box3")
 
+        //     event.stopPropagation();
 
+        // }
 
+        // 添加监听事件
 
+        // xxx.addEventListener(事件类型，执行的函数，开启事件类别<true 事件捕获/false 事件冒泡>)
 
+        // xxx.removeEventListener...
 
+        box1.addEventListener('click',function(){
 
+            console.log("1111")
 
+        },false)
 
+        box2.addEventListener('click',function(){
 
+            console.log("222")
 
+            event.stopPropagation();
 
+        },false)
 
+        box3.addEventListener('click',function(){
 
+            console.log("333")
 
+            event.stopPropagation();
 
+        },false)
 
+    </script>
 
+</body>
 
+</html>

+ 22 - 0
js/DOM/14.默认事件.html
Voir le fichier 

@@ -0,0 +1,22 @@
 
+<!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>
 
+    <a href="https://www.baidu.com">哈哈哈哈</a>
 
+    <script>
 
+        var a = document.querySelector("a");
 
+        a.onclick = function () {
 
+            alert("哈哈哈哈");
 
+            event.returnValue = false;
 
+            // event.preventDefault()
 
+        }
 
+        // 取消元素默认事件
 
+        // event.returnValue = false;
 
+        // event.preventDefault()
 
+    </script>
 
+</body>
 
+</html>

+ 20 - 0
js/DOM/15.事件源.html
Voir le fichier 

@@ -0,0 +1,20 @@
 
+<!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="box1">1111</div>
 
+    <div id="box2">222</div>
 
+    <script>
 
+        var box1 = document.getElementById("box1");
 
+        var box2 = document.getElementById("box2");
 
+        box1.onclick = function(event) {
 
+            console.log(event.target)
 
+            // 事件源 事件的源头
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 22 - 0
js/DOM/16.事件流.html
Voir le fichier 

@@ -0,0 +1,22 @@
 
+<!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>
 
+    <script>
 
+        // 事件流
 
+        // js从开始执行到结束的函数
 
+        // 包含事件捕获及事件冒泡
 
+        // DOM事件流
 
+        // 三个阶段
 
+        // 事件捕获 目标事件 事件冒泡
 
+    
+    </script>
 
+</body>
 
+</html>

+ 42 - 0
js/DOM/17.事件委托.html
Voir le fichier 

@@ -0,0 +1,42 @@
 
+<!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 id="list1">
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <h1>777</h1>
 
+        <li>3</li>
 
+        <li>4</li>
 
+    </ul>
 
+    <button>添加</button>
 
+    <script>
 
+        var btn = document.querySelector("button");
 
+        var list = document.querySelector("#list1");
 
+        var lis = document.getElementsByTagName("li");
 
+        btn.onclick = function() {
 
+            var li1 = document.createElement("li");
 
+            // li1.innerText = Math.random();
 
+            li1.innerText = Math.round(Math.random() * 99 + 1)
 
+            list.appendChild(li1);
 
+        }
 
+        console.log(lis)
 
+        // for(var i=0;i<lis.length;i++) {
 
+        //     lis[i].onclick = function() {
 
+                
+        //     }
 
+        // }
 
+        list.onclick = function(event) {
 
+            console.log("走进来")
 
+            // console.log(event.target)
 
+            if(event.target.nodeName == "LI") {
 
+                console.log(event.target.innerHTML)
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>