Home Explore Help
Sign In
lovecoding
/
VIP32
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

DOM

e 1 year ago
parent
e4e10aa0f7
commit
e2546dc2ee
2 changed files with 108 additions and 0 deletions
Unified View Show Diff Stats
  1. 87 0
      JS初级/DOM/19.事件冒泡.html
  2. 21 0
      JS初级/DOM/20.默认事件.html

+ 87 - 0
JS初级/DOM/19.事件冒泡.html
View File 

@@ -0,0 +1,87 @@
 
+<!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: #f00;
 
+      }
 
+      .box2 {
 
+        width: 300px;
 
+        height: 300px;
 
+        background: #ff0;
 
+      }
 
+      .box3 {
 
+        width: 150px;
 
+        height: 150px;
 
+        background: #00f;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div class="box1">
 
+      <div class="box2">
 
+        <div class="box3"></div>
 
+      </div>
 
+    </div>
 
+    <!-- 
+        事件的三个阶段：
 
+            事件捕获:由外向内触发的操作
 
+            目标阶段
 
+            事件冒泡:由内向外触发的操作
 
+
 
+            阻止事件冒泡：
 
+                event.stopPropagation()
 
+                IE浏览器阻止事件冒泡
 
+                event.cancelBubble = true
 
+     -->
 
+    <script>
 
+      var box1 = document.querySelector(".box1");
 
+      var box2 = document.querySelector(".box2");
 
+      var box3 = document.querySelector(".box3");
 
+      // box1.onclick = function(eve) {
 
+      //     eve.cancelBubble = true;
 
+      //     alert("这是第一个");
 
+      // }
 
+      // box2.onclick = function(eve) {
 
+      //     eve.stopPropagation();
 
+      //     alert("这是第二个");
 
+      // }
 
+      // box3.onclick = function(event) {
 
+      //     event.cancelBubble = true;
 
+      //     alert("这是第三个");
 
+      // }
 
+
 
+      // 填加监听事件
 
+      // xxx.addEventListener('监听的时间方法',执行的函数,触发的事件类型：true (事件捕获) / false（事件冒泡）)
 
+      box1.addEventListener(
 
+        "click",
 
+        function (eve) {
 
+          eve.stopPropagation();
 
+          alert("内容1");
 
+        },
 
+        false
 
+      );
 
+      box2.addEventListener(
 
+        "click",
 
+        function (eve) {
 
+            eve.cancelBubble = true;
 
+          alert("内容2");
 
+        },
 
+        false
 
+      );
 
+      box3.addEventListener(
 
+        "click",
 
+        function (eve) {
 
+          eve.stopPropagation();
 
+          alert("内容3");
 
+        },
 
+        false
 
+      );
 
+    </script>
 
+  </body>
 
+</html>

+ 21 - 0
JS初级/DOM/20.默认事件.html
View File 

@@ -0,0 +1,21 @@
 
+<!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="http://www.baidu.com">点击</a>
 
+    <script>
 
+        var a = document.querySelector("a");
 
+        a.onclick = function(eve) {
 
+            alert("今天天气站好！");
 
+            // 阻止默认事件
 
+            // eve.preventDefault();
 
+            // IE阻止默认事件
 
+            eve.returnValue = false;
 
+        }
 
+    </script>
 
+</body>
 
+</html>