zsydgithub 1 年之前
父节点
当前提交
3a7aa59f87
共有 3 个文件被更改,包括 132 次插入0 次删除
  1. 39 0
      6_Dom/17_事件委托.html
  2. 49 0
      6_Dom/18_this指向.html
  3. 44 0
      6_Dom/19_改变this指向.html

+ 39 - 0
6_Dom/17_事件委托.html

@@ -0,0 +1,39 @@
+<!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="list">
+    <li>1</li>
+    <li>2</li>
+    <li>3</li>
+  </ul>
+  <button id="btn">按钮</button>
+  <script>
+    var aLi = document.getElementsByTagName('li')
+    var list = document.getElementById('list')
+    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()
+      list.appendChild(xx)
+    }
+
+    list.onclick = function(e){
+      // if(e.target.tagName == 'LI'){
+      //   console.log(e.target.innerHTML)
+      // }
+      console.log(e.target.tagName)
+    }
+  </script>
+</body>
+</html>

+ 49 - 0
6_Dom/18_this指向.html

@@ -0,0 +1,49 @@
+<!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: aqua;
+    }
+  </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)
+    // },2000)
+    // div1.onclick = function(){
+    //   var timer = setInterval(function(){
+    //     console.log(this)
+    //   },2000)
+    // }
+    //3.对象下面  this指向对象本身
+    // var person = {
+    //   name:'zs',
+    //   age:18,
+    //   eat:function(){
+    //     console.log(this)
+    //   }
+    // }
+    // person.eat()
+    //4.在函数里面 this指向window
+      function xx(){
+        console.log(this)
+      }
+      xx()
+  </script>
+</body>
+</html>

+ 44 - 0
6_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>
+  <div id="div1"></div>
+  <script>
+    /* 
+    区别:
+    1.调用方式不一样
+    2.call apply直接调用修改后的方法   bind返回的是一个方法   需要重新调用
+    call(修改的this,参数1,参数2)
+    apply(修改的this,【参数1,参数2】)
+    bind(修改this,参数1,参数2)()
+    */
+    // var person = {
+    //   name:'zs',
+    //   age:18,
+    //   eat:function(){
+    //     console.log(this)
+    //   }
+    // }
+    // // person.eat()
+    var person2 = {
+      name:'lisi',
+      age:20
+    }
+    // person.eat.call(person2)
+
+    function xx(x,y){
+      console.log(x,y,this)
+    }
+    xx(1,2)
+    xx.call(person2,1,2)
+    xx.apply(person2,[1,2])
+    //bind不会调用函数  返回的是一个修改this指向之后的方法
+    xx.bind(person2,1,2)()
+  </script>
+</body>
+</html>