Página inicial Explorar Ajuda
Entrar
lovecoding
/
VIP28
9
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

new

zsydgithub 1 ano atrás
pai
10fee07bea
commit
8400f45bc8
3 arquivos alterados com 145 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 42 0
      Dom/15_事件源.html
  2. 59 0
      Dom/16_事件流.html
  3. 44 0
      Dom/17_事件委托.html

+ 42 - 0
Dom/15_事件源.html
Ver arquivo 

@@ -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>

+ 59 - 0
Dom/16_事件流.html
Ver arquivo 

@@ -0,0 +1,59 @@
 
+<!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: greenyellow;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    #div3{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: orange;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2">
 
+      <div id="div3"></div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+    /* 
+    js的事件流  从触发事件到处理事件的整个流程
 
+    包括事件捕获和事件冒泡
 
+    */
 
+    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.addEventListener('click',function(){
 
+    //   console.log(333)
 
+    // },true)
 
+    div3.onclick = function(){
 
+      console.log(333)
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 44 - 0
Dom/17_事件委托.html
Ver arquivo 

@@ -0,0 +1,44 @@
 
+<!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>
 
+  <ul id="list1">
 
+    <li>1</li>
 
+    <li>2</li>
 
+    <li>3</li>
 
+  </ul>
 
+  <button id="btn">按钮</button>
 
+  <script>
 
+    var aLi = document.getElementsByTagName('li')
 
+    var list1 = document.getElementById('list1')
 
+    var btn = document.getElementById('btn')
 
+
 
+    // for (var i = 0; i < aLi.length; i++) {
 
+    //   aLi[i].onclick = function(){
 
+    //     console.log(this.innerHTML)
 
+    //   }
 
+    // }
 
+    btn.onclick = function () {
 
+      var xx = document.createElement('li')
 
+      xx.innerHTML = Math.random()
 
+      list1.appendChild(xx)
 
+    }
 
+
 
+    list1.onclick = function (e) {
 
+      // console.log(e.target.tagName)
 
+      if (e.target.tagName == 'LI') {
 
+        console.log(e.target.innerHTML)
 
+      }
 
+      // console.log(this)
 
+    }
 
+  </script>
 
+</body>
 
+
 
+</html>