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

nwe

zsydgithub 1 年之前
父节点
6bb5c42f14
当前提交
9e31c9314b
共有 4 个文件被更改，包括 204 次插入 和 0 次删除
合并视图 显示文件统计
  1. 87 0
      6_Dom/13_事件冒泡.html
  2. 23 0
      6_Dom/14_阻止事件默认行为.html
  3. 42 0
      6_Dom/15_事件源.html
  4. 52 0
      6_Dom/16_事件流.html

+ 87 - 0
6_Dom/13_事件冒泡.html
查看文件 

@@ -0,0 +1,87 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 300px;
 
+      height: 300px;
 
+      background: black;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    #div3{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: green;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2">
 
+      <div id="div3"></div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    var div3 = document.getElementById('div3')
 
+
 
+    // div1.onclick = function(){
 
+    //   console.log(div1)
 
+    // }
 
+    // div2.onclick = function(){
 
+    //   console.log(div2)
 
+    //   div2.style.background = 'white'
 
+    //   //阻止事件冒泡
 
+    //   event.stopPropagation()
 
+    // }
 
+    // div3.onclick = function(){
 
+    //   console.log(div3)
 
+    //   //阻止事件冒泡
 
+    //   event.cancelBubble = true
 
+    // }
 
+    //由内到外  是事件冒泡
 
+
 
+    //参数一  事件名称 字符串 必填项
 
+    //参数二  执行函数 必填项
 
+    //参数三  布尔值  可空
 
+    div1.addEventListener('click',function(){
 
+      console.log('我是div1')
 
+    })
 
+    div2.addEventListener('click',function(){
 
+      console.log('我是div2')
 
+    })
 
+    div3.addEventListener('click',function(){
 
+      console.log('我是div3')
 
+    })
 
+    div1.addEventListener('click',function(){
 
+      console.log('我是div1')
 
+    },true)
 
+    div2.addEventListener('click',function(){
 
+      console.log('我是div2')
 
+    },true)
 
+    div3.addEventListener('click',function(){
 
+      console.log('我是div3')
 
+    },true)
 
+
 
+
 
+    /* 
+    从里到外  事件冒泡  false
 
+    从外到里  事件捕获  true
 
+    先捕获 后冒泡  先从外到里  然后从里到外
 
+    */
 
+  </script>
 
+</body>
 
+</html>

+ 23 - 0
6_Dom/14_阻止事件默认行为.html
查看文件 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <a href="https://www.baidu.com" id="a1">123</a>
 
+  <script>
 
+    var a1 = document.getElementById('a1')
 
+    a1.onclick = function(e){
 
+      console.log(123)
 
+      //阻止事件默认行为  仅W3C
 
+      // e.preventDefault() 
+      //将其设置为false 表示取消事件默认行为
 
+      e.returnValue = false // 仅ie浏览器
 
+
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 42 - 0
6_Dom/15_事件源.html
查看文件 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: gray;
 
+    }
 
+    #div2{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: aqua;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    div1.onclick = function(e){
 
+      // console.log(this)
 
+      console.log(e.target)
 
+    }
 
+    div2.onclick = function(e){
 
+      // console.log(this)
 
+      console.log(e.target)
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 52 - 0
6_Dom/16_事件流.html
查看文件 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: gray;
 
+    }
 
+    #div2{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: aqua;
 
+    }
 
+    #div3{
 
+      width: 50px;
 
+      height: 50px;
 
+      background: red;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2">
 
+      <div id="div3"></div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    var div3 = document.getElementById('div3')
 
+    
+    div1.addEventListener('click',function(){
 
+      console.log(111)
 
+    },true)
 
+    div2.addEventListener('click',function(){
 
+      console.log(222)
 
+    },true)
 
+    div3.onclick = function(){
 
+      console.log(333)
 
+    }
 
+  </script>
 
+</body>
 
+</html>