复习

11.复习/2.事件委托.html

@@ -0,0 +1,41 @@
+<!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>
+    <ul>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+    </ul>
+    <script>
+        /**
+         * 事件委托:
+         * 利用冒泡的特性
+         * 把原来要绑定在子元素上的事件 绑定到他的父元素上
+         * 触发子元素的时候 事件会冒泡到对应的父元素上
+         * 父元素通过判断事件源来执行对应的逻辑
+         */
+        const ul = document.querySelector("ul");
+        const lis = document.querySelectorAll("li");
+        ul.onclick = function (ev) {
+            if (ev.target) {
+                console.log(ev.target.innerHTML);
+            }
+        }
+        // for (let i = 0; i < lis.length; i++) {
+        //     // console.log(lis[i]);
+        //     lis[i].onclick = function () {
+        //         console.log(lis[i].innerHTML);
+        //     }
+        // }
+    </script>
+</body>
+
+</html>

11.复习/3.this指向.html

@@ -0,0 +1,47 @@
+<!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: 300px;
+            height: 300px;
+            background-color: #f00;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="box"></div>
+    <script>
+        const box = document.getElementById("box");
+        // 1.点击事件 指向当前对象
+        // box.onclick = function () {
+        //     console.log(this);
+        // }
+        // // 2.定时器 指向window
+        // setInterval(() => {
+        //     console.log(this);
+        // }, 2000);
+        // 3.对象中 普通函数方法 this指向当前对象
+        // 3.对象中 箭头函数方法 this指向window
+        // let obj = {
+        //     name: "张三",
+        //     age: 18,
+        //     say: () => {
+        //         console.log(this);
+        //     }
+        // }
+        // obj.say();
+        // 4.普通函数 this指向window
+        function fn() {
+            console.log(this);
+        }
+        fn()
+    </script>
+</body>
+
+</html>

11.复习/4.修改this指向的方法.html

@@ -0,0 +1,28 @@
+<!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>
+        let obj = {
+            name: "张三",
+        }
+
+        function fn(x, y) {
+            const sum = x + y;
+            console.log(sum);
+            console.log(this.name);
+            console.log(this);
+        }
+        fn.bind(obj, 2, 3)()
+        // fn.apply(obj, [2, 3])
+        // fn.call(obj, 2, 3)
+    </script>
+</body>
+
+</html>