1 năm trước cách đây · 73093f8c82
--- a/DOM/12_节点操作.html
+++ b/DOM/12_节点操作.html
@@ -8,7 +8,7 @@
 
				 </head>
			
 
				 <body>
			
 
				   <div id="div1">
			
 
				-    <p id="p1">123</p>
			
 
				+    <p id="p1">123</p> 
			
 
				     <p>456</p>
			
 
				   </div>
			
 
				   <script>
			
--- a/DOM/15_事件源.html
+++ b/DOM/15_事件源.html
@@ -0,0 +1,41 @@
 
				+<!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>
			
 
				+    #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>
			
--- a/DOM/16_事件流.html
+++ b/DOM/16_事件流.html
@@ -0,0 +1,58 @@
 
				+<!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>
			
 
				+    #div1 {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: red;
			
 
				+    }
			
 
				+
			
 
				+    #div2 {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: green;
			
 
				+    }
			
 
				+
			
 
				+    #div3 {
			
 
				+      width: 100px;
			
 
				+      height: 100px;
			
 
				+      background: pink;
			
 
				+    }
			
 
				+  </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('div1')
			
 
				+    },true)
			
 
				+    div2.addEventListener('click',function(){
			
 
				+      console.log('div2')
			
 
				+    },true)
			
 
				+    // div3.addEventListener('click',function(){
			
 
				+    //   console.log('div3')
			
 
				+    // },true)
			
 
				+
			
 
				+    div3.onclick = function(){
			
 
				+      console.log('div3')
			
 
				+    }
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/DOM/17_事件委托.html
+++ b/DOM/17_事件委托.html
@@ -0,0 +1,47 @@
 
				+<!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 list1 = document.getElementById('list1')
			
 
				+    var btn = document.getElementById('btn')
			
 
				+    var aLi = document.getElementsByTagName('li')
			
 
				+
			
 
				+    // for (var i = 0; i < aLi.length; i++) {
			
 
				+    //   aLi[i].onclick = function(){
			
 
				+    //     console.log(this.innerHTML)
			
 
				+    //   }
			
 
				+    // }
			
 
				+
			
 
				+    btn.onclick = function(){
			
 
				+      var a = document.createElement('li')
			
 
				+      a.innerHTML = Math.random()
			
 
				+      list1.appendChild(a)
			
 
				+      // console.log(this)
			
 
				+    }
			
 
				+    
			
 
				+
			
 
				+    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>
			
--- a/DOM/18_this指向问题.html
+++ b/DOM/18_this指向问题.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>
			
 
				+    #div1 {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <script>
			
 
				+    var div1 = document.getElementById('div1')
			
 
				+
			
 
				+    //1.当前对象引用中，谁的事件  this就是谁
			
 
				+    div1.onclick = function () {
			
 
				+      console.log(this)
			
 
				+    }
			
 
				+
			
 
				+    //2.在定时器里面 this永远指向window
			
 
				+    // var timer = setInterval(function(){
			
 
				+    //   console.log(this)
			
 
				+    // },1000)
			
 
				+
			
 
				+    //3.对象下面 this指向对象本身
			
 
				+    // var person = {
			
 
				+    //   name: 'zs',
			
 
				+    //   age: 20,
			
 
				+    //   eat: function(){
			
 
				+    //     console.log(this)
			
 
				+    //   }
			
 
				+    // }
			
 
				+    // person.eat()
			
 
				+
			
 
				+    
			
 
				+    //4.函数内 this指向window
			
 
				+    function myFun(){
			
 
				+      console.log(this)
			
 
				+    }
			
 
				+    myFun()
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/DOM/19_修改this指向.html
+++ b/DOM/19_修改this指向.html
@@ -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>
			
 
				+  <script>
			
 
				+
			
 
				+    /* 
			
 
				+      1.call(修改的this，参数1，参数2)
			
 
				+      2.apply(修改的this，[参数1，参数2])
			
 
				+      3.bind(修改的this，参数1，参数2)()
			
 
				+    
			
 
				+    */
			
 
				+    // var person = {
			
 
				+    //   name:'zs',
			
 
				+    //   age: 18,
			
 
				+    //   eat: function(){
			
 
				+    //     console.log(this)
			
 
				+    //   }
			
 
				+    // }
			
 
				+    // person.eat()
			
 
				+
			
 
				+    var person2 = {
			
 
				+      name: 'lisi',
			
 
				+      age: 30
			
 
				+    }
			
 
				+    // person.eat.call(person2)
			
 
				+
			
 
				+
			
 
				+    function xx(x,y){
			
 
				+      console.log(this,x,y)
			
 
				+    }
			
 
				+
			
 
				+    xx(1,2)
			
 
				+    xx.call(person2,1,2)
			
 
				+    xx.apply(person2,[1,2])
			
 
				+    xx.bind(person2,1,2)()
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>