1 tahun lalu · d14bee9de9
--- a/day15/html/1.事件委托.html
+++ b/day15/html/1.事件委托.html
@@ -0,0 +1,27 @@
 
				+<!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>
			
 
				+        #list {
			
 
				+            width: 100px;
			
 
				+            height: 300px;
			
 
				+            background: #00f;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        事件委托的主要作用：用来减少内存消耗，不用处理多次循环绑定
			
 
				+     -->
			
 
				+     <ul id="list">
			
 
				+        <li>1111</li>
			
 
				+        <li>2222</li>
			
 
				+        <li>3333</li>
			
 
				+     </ul>
			
 
				+     <button id="btn">添加</button>
			
 
				+    <script src="../js/1.事件委托.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day15/html/2.this指向.html
+++ b/day15/html/2.this指向.html
@@ -0,0 +1,19 @@
 
				+<!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>
			
 
				+        #box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: #f00;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+    <script src="../js/2.this指向.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day15/html/3.改变this指向的方法.html
+++ b/day15/html/3.改变this指向的方法.html
@@ -0,0 +1,11 @@
 
				+<!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>
			
 
				+    <script src="../js/3.改变this指向的方法.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/day15/js/1.事件委托.js
+++ b/day15/js/1.事件委托.js
@@ -0,0 +1,23 @@
 
				+var list = document.getElementById("list");
			
 
				+var btn = document.getElementById("btn");
			
 
				+var lis = document.getElementsByTagName("li");
			
 
				+
			
 
				+// for(var i=0;i<lis.length;i++) {
			
 
				+//     lis[i].onclick = function() {
			
 
				+//         console.log(this.innerHTML)
			
 
				+//     }
			
 
				+// }
			
 
				+
			
 
				+list.onclick = function(event) {
			
 
				+    // console.log(event.target)
			
 
				+    if(event.target.tagName == 'LI') {
			
 
				+        console.log(event.target.innerHTML)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+btn.onclick = function() {
			
 
				+    var newLi = document.createElement("li");
			
 
				+    newLi.innerHTML = Math.round(Math.random()*9 + 1);//随机获取1-10的整数
			
 
				+    list.appendChild(newLi);
			
 
				+}
			
--- a/day15/js/2.this指向.js
+++ b/day15/js/2.this指向.js
@@ -0,0 +1,34 @@
 
				+var box = document.getElementById("box");
			
 
				+
			
 
				+// 点击事件 当前元素中引用谁 this就指向谁
			
 
				+// box.onclick = function() {
			
 
				+//     console.log(this)
			
 
				+// }
			
 
				+
			
 
				+
			
 
				+// 在定时器中 this指向全局变量 window
			
 
				+// box.onclick = function() {
			
 
				+//     setInterval(function(){
			
 
				+//         console.log(this);
			
 
				+//     },1000)
			
 
				+// }
			
 
				+
			
 
				+
			
 
				+// 在对象中 this指向当前对象的本身
			
 
				+// var obj = {
			
 
				+//     name: 'LiLi',
			
 
				+//     sex: '女',
			
 
				+//     age: function() {
			
 
				+//         console.log(this);
			
 
				+//     }
			
 
				+// }
			
 
				+
			
 
				+// obj.age();
			
 
				+
			
 
				+
			
 
				+// 在函数里 this指向window
			
 
				+function fn1() {
			
 
				+    console.log(this);
			
 
				+}
			
 
				+
			
 
				+fn1();
			
--- a/day15/js/3.改变this指向的方法.js
+++ b/day15/js/3.改变this指向的方法.js
@@ -0,0 +1,46 @@
 
				+// function fn1(x,y) {
			
 
				+//     var sum = x + y;
			
 
				+//     console.log(sum,'sum');
			
 
				+//     console.log(this,'1');
			
 
				+//     console.log(this.name,'2');
			
 
				+// }
			
 
				+// var obj = {
			
 
				+//     name: 'LiLi'
			
 
				+// }
			
 
				+// fn1(1,2)
			
 
				+// fn1.call(obj,1,2);
			
 
				+
			
 
				+// 改变this指向的方法
			
 
				+// 1.call(修改的this指向,参数1，参数2)
			
 
				+// 2.apply(修改的this指向,[参数1，参数2])
			
 
				+// 3.bind(修改的this指向，参数1，参数2)（）
			
 
				+
			
 
				+// 区别：
			
 
				+// 1.bind不会直接调用函数方法，apply和call会直接调用函数
			
 
				+// 2.call 第二个参数开始，需要将传入的参数都逐个列出来
			
 
				+// 3.apply第二个参数开始，需要将传入的参数放在数组里
			
 
				+
			
 
				+// function fn2(a,b) {
			
 
				+//     var sum = a*b;
			
 
				+//     console.log(sum);
			
 
				+//     console.log(this);
			
 
				+// }
			
 
				+// var obj1 = {
			
 
				+//     sex: '女'
			
 
				+// }
			
 
				+// fn2(2,3);
			
 
				+// fn2.apply(obj1,[2,3])
			
 
				+
			
 
				+function fn3(y,z) {
			
 
				+    var sum = y - z;
			
 
				+    console.log(sum);
			
 
				+    console.log(this);
			
 
				+    console.log(this.age);
			
 
				+}
			
 
				+
			
 
				+var obj2 = {
			
 
				+    age:'100+'
			
 
				+}
			
 
				+
			
 
				+fn3(10,2);
			
 
				+fn3.bind(obj2,10,2)();