首页 发现 帮助
登录
lovecoding
/
VIP26
9
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

fix:day14

e 1 年之前
父节点
c2cc9063d7
当前提交
21078370c7
共有 11 个文件被更改，包括 224 次插入 和 9 次删除
合并视图 显示文件统计
  1. 6 1
      day14/html/4.添加节点.html
  2. 33 0
      day14/html/5.事件冒泡.html
  3. 12 0
      day14/html/6.事件默认行为.html
  4. 26 0
      day14/html/7.事件源.html
  5. 39 0
      day14/html/8.事件流.html
  6. 二进制
      day14/images/事件.png
  7. 14 8
      day14/js/4.添加节点.js
  8. 45 0
      day14/js/5.事件冒泡.js
  9. 8 0
      day14/js/6.事件默认行为.js
  10. 12 0
      day14/js/7.事件源.js
  11. 29 0
      day14/js/8.事件流.js

+ 6 - 1
day14/html/4.添加节点.html
查看文件 

@@ -8,7 +8,12 @@
 
 <body>
 
 <body>
 
     <div id="box">
 
     <div id="box">
 
         <p id="first">12345</p>
 
         <p id="first">12345</p>
 
-        <p>67890</p>
 
+        <p id="one">67890</p>
 
+        <ol id="list">
 
+            <li>1</li>
 
+            <li>2</li>
 
+            <li>3</li>
 
+        </ol>
 
     </div>
 
     </div>
 
     <!-- <p id="other">
 
     <!-- <p id="other">
 
         <span>12345</span>
 
         <span>12345</span>

+ 33 - 0
day14/html/5.事件冒泡.html
查看文件 

@@ -0,0 +1,33 @@
 
+<!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: 500px;
 
+            height: 500px;
 
+            background: #00f;
 
+        }
 
+        #box2 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #0f0;
 
+        }
 
+        #box3 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2">
 
+            <div id="box3"></div>
 
+        </div>
 
+    </div>
 
+    <script src="../js/5.事件冒泡.js"></script>
 
+</body>
 
+</html>

+ 12 - 0
day14/html/6.事件默认行为.html
查看文件 

@@ -0,0 +1,12 @@
 
+<!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 src="../js/6.事件默认行为.js"></script>
 
+</body>
 
+</html>

+ 26 - 0
day14/html/7.事件源.html
查看文件 

@@ -0,0 +1,26 @@
 
+<!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: #00f;
 
+        }
 
+        #box2 {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #000;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2"></div>
 
+    </div>
 
+    <script src="../js/7.事件源.js"></script>
 
+</body>
 
+</html>

+ 39 - 0
day14/html/8.事件流.html
查看文件 

@@ -0,0 +1,39 @@
 
+<!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: 300px;
 
+            height: 300px;
 
+            background: #ff0;
 
+        }
 
+        #box2 {
 
+            width: 150px;
 
+            height: 150px;
 
+            background: #f00;
 
+        }
 
+        #box3 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #00f;
 
+        }
 
+        #box4 {
 
+            width: 150px;
 
+            height: 150px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2"></div>
 
+    </div>
 
+    <div id="box3">
 
+        <div id="box4"></div>
 
+    </div>
 
+    <script src="../js/8.事件流.js"></script>
 
+</body>
 
+</html>

二进制
day14/images/事件.png
查看文件


+ 14 - 8
day14/js/4.添加节点.js
查看文件 

@@ -1,4 +1,6 @@
 
 var box = document.getElementById("box");
 
 var box = document.getElementById("box");
 
+var one = document.getElementById("one");
 
+var list = document.getElementById("list");
 
 console.log(box.nodeName);
 
 console.log(box.nodeName);
 
 console.log(box.nodeType);
 
 console.log(box.nodeType);
 
 console.log(box.childNodes[1].innerHTML);
 
 console.log(box.childNodes[1].innerHTML);
 
@@ -29,16 +31,20 @@ console.log(ul,'ul');
 
 console.log(li,'li');
 
 console.log(li,'li');
 
 // 添加 appendChild
 
 // 添加 appendChild
 
 ul.appendChild(li);
 
 ul.appendChild(li);
 
-console.log(ul);
 
+console.log(ul,'添加');
 
 box.appendChild(ul);
 
 box.appendChild(ul);
 
-var news = document.createElement('b');
 
-news.innerHTML = '字体';
 
-box.insertBefore(news,box[0]);
 
+// var news = document.createElement('b');
 
+// news.innerHTML = '字体';
 
+// box.insertBefore(news,box[0]);
 
 //删除 removeChild
 
 //删除 removeChild
 
 // box.removeChild(ul);
 
 // box.removeChild(ul);
 
-var h2 = document.createElement("h2");
 
-h2.innerHTML = '这是一个标题';
 
+var h5 = document.createElement("h5");
 
+h5.innerHTML = '这是一个标题';
 
 // 替换节点 replaceChild（新节点,旧节点);
 
 // 替换节点 replaceChild（新节点,旧节点);
 
-// box.replaceChild(h2,first);
 
+// box.replaceChild(h5,first);
 
 // 删除整个节点 remove()
 
 // 删除整个节点 remove()
 
-// box.remove()
 
+// box.remove()
 
+// console.log(list.childNodes[0])
 
+var li1 = document.querySelectorAll("#list li")[0]
 
+console.log(li1)
 
+list.insertBefore(h5,list[4]);

+ 45 - 0
day14/js/5.事件冒泡.js
查看文件 

@@ -0,0 +1,45 @@
 
+var box1 = document.getElementById("box1");
 
+var box2 = document.getElementById("box2");
 
+var box3 = document.getElementById("box3");
 
+
 
+// 事件捕获 由外向内触发操作 
+// 事件冒泡 由内向外触发操作
 
+// box1.onclick = function(event) {
 
+//     console.log("第一个盒子");
 
+//     event.stopPropagation();
 
+// }
 
+
 
+// box2.onclick = function(event) {
 
+//     console.log("第二个盒子");
 
+//     event.stopPropagation();
 
+// }
 
+
 
+// box3.onclick = function(event) {
 
+//     console.log("第三个盒子");
 
+//     // IE浏览器阻止事件冒泡方法
 
+//     event.cancelBubble = true;
 
+// }
 
+
 
+// 阻止事件冒泡
 
+// 1.event.stopPropagation();
 
+//2.event.cancelBubble = true;
 
+
 
+
 
+// addEventListener 添加监听事件
 
+// 1.要执行的事件 字符串格式
 
+// 2.执行的函数方法
 
+// 3.触发类型 false(事件冒泡) true（事件捕获）
 
+box1.addEventListener("click",function(event){
 
+    console.log("第一个盒子");
 
+    event.stopPropagation();
 
+},false);
 
+
 
+box2.addEventListener("click",function(event){
 
+    console.log("第二个盒子");
 
+    event.stopPropagation();
 
+},false);
 
+
 
+box3.addEventListener("click",function(event){
 
+    console.log("第三个盒子");
 
+    event.cancelBubble = true;
 
+},false);

+ 8 - 0
day14/js/6.事件默认行为.js
查看文件 

@@ -0,0 +1,8 @@
 
+var a = document.querySelector("a");
 
+a.onclick = function(event) {
 
+    console.log("123");
 
+    // 取消事件的默认行为
 
+    event.preventDefault();
 
+    // 适用于IE浏览器
 
+    // event.returnValue = false;
 
+}

+ 12 - 0
day14/js/7.事件源.js
查看文件 

@@ -0,0 +1,12 @@
 
+// 事件源 事件的源头
 
+var box1 = document.getElementById("box1");
 
+var box2 = document.getElementById("box2");
 
+
 
+box1.onclick = function(event){
 
+    console.log(event.target,'box1');
 
+}
 
+
 
+box2.onclick = function(event){
 
+    console.log(event.target,'box2');
 
+    event.stopPropagation();
 
+}

+ 29 - 0
day14/js/8.事件流.js
查看文件 

@@ -0,0 +1,29 @@
 
+var box1 = document.getElementById("box1");
 
+var box2 = document.getElementById("box2");
 
+var box3 = document.getElementById("box3");
 
+var box4 = document.getElementById("box4");
 
+
 
+
 
+// W3C规定的(万维网联盟)
 
+//DOM事件流：事件捕获阶段 目标阶段 事件冒泡阶段
 
+// 先捕获 后冒泡
 
+// 事件捕获
 
+box1.addEventListener('click',function(){
 
+    console.log(this,'box1');
 
+},true)
 
+
 
+box2.addEventListener('click',function(){
 
+    console.log(this,'box2');
 
+},true)
 
+
 
+
 
+// 事件冒泡
 
+box3.addEventListener('click',function(){
 
+    console.log(this,'box3');
 
+},false)
 
+
 
+box4.addEventListener('click',function(){
 
+    console.log(this,'box4');
 
+},false)
 
+
 
+// removeEventListener（参数1，参数2，参数3）