DOM点击oContainer时控制台只输出2，后面的会将前面的覆盖。要想即输出二也输出一，可用事件监听的方法点击oC

判断数组和对象

检验xxx是否为数组类型：Array.isArray(xxx) //返回为true或false
检验xxx是否是Xxx的实例化对象： xxx.constructor == Xxx
检验xxx是否为Xxx的实例化对象： xxx instanceof Xxx //返回值为true或false

实例化对象：实例化对象就是由抽象到具体的过程，这个过程就叫实例化。

类

定义（构建函数/构建方法）：具有相同属性和方法的集合
注意：类名首字母需要大写

function Student(name, age, weight) {
    // this 代表的是实例化对象
    this.name = name,
    this.age = age,
    this.weight = weight
    this.eat = function() { //  每次创建实例化对象都会新创建一个方法
      console.log( this.name +' eating....')
        }
    }
//实例化对象
var s1 = new Student(可传入实参)

弊端是：每次创建一个实例化对象都会创建一个方法

解决办法是：

   // prototype 是一个指针，指向原型对象
   // 原型下的属性和方法都可以被所有的实例化对象所共享
   //原型下的属性只能写固定值，所以并不建议使用
   Student.prototype.sleep = function(可传入形参) {
  
   }
   s1.sleep(可传入实参);

事件

事件构造函数

事件源

事件源：谁触发了这个事件即为事件源

 oDiv.onclick = function(e) {
     // e.target 事件源
     console.log(e.target)
}

this ：给谁绑定事件谁就是this
对象分类：
1. 内置对象： Date String Array Math
2. DOM对象
3. 自定义对象

事件监听：

addEventListener

#container{
    width: 200px;
    height: 200px;
    background-color: aqua;
}

<div id="container"></div>

var oContainer = document.getElementById('container');
oContainer.onclick = function(){
   console.log(1);
}
oContainer.onclick = function(){
   console.log(2);
}

点击oContainer时控制台只输出2，后面的会将前面的覆盖。要想即输出二也输出一，可用事件监听的方法

oContainer.addEventListener('click',function(){
   console.log(1)
},false)     
oContainer.addEventListener('click',function(){
   console.log(2)
},false)

点击oContainer时控制台1,2。

第一个参数是事件类型第二个参数事件处理函数第三个参数是一个boolean类型

false 事件冒泡：从里到外指从里到外寻找绑定事件监听的节点以此触发了其他事件

true 事件捕获：从外到里指从外到里寻找绑定事件监听的节点以此触发了其他事件

添加事件监听给同一个元素可以添加多个相同的事件监听

事件流

#wrapper{
  width: 300px;
  height: 300px;
  background: pink;
}

#inner{
  width: 100px;
  height: 100px;
  background: aqua;
}

#content{
  width: 200px;
  height: 200px;
  background: red;
}

<div id="wrapper">
    <div id="content">
      <div id="inner"></div>
    </div>
</div>

 oWrapper.addEventListener('click', function() {
  console.log('捕获：div1')
}, true)
oContent.addEventListener('click', function() {
  console.log('捕获：div2')
}, true)
oInner.addEventListener('click', function() {
  console.log('捕获：div3')
}, true)

oWrapper.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('冒泡：div1')
}, false)
oContent.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('冒泡：div2')
}, false)
oInner.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('冒泡：div3')
}, false)

如果一个节点上的事件监听既有捕获又有冒泡则先执行捕获再执行冒泡

e.stopPropagation() 阻止事件冒泡

e.preventDefault() 阻止浏览器默认行为

return false 阻止浏览器默认行为

onclick 事件绑定相同事件会覆盖????????

事件委任

事件的委托原理：事件冒泡

动态生成的元素不能直接绑定事件

如果需要给动态生成的元素绑定事件需要绑定给一个已存在的父元素上

this指向总结

事件处理函数中 this -> 绑定事件的DOM元素
在自定义函数中 this -> window
定时器中 this -> window
在自定义对象中 this -> 对象
在类中 this -> 实例化的对象

改变this指向的方法的总结

call 参数有多个第一个参数表示要改变成的指针后面的参数是方法的实参能够自动调用方法
apply 参数有两个第一个参数表示要改变成的实参第二个参数是一个数组里面写的是方法的实参能够自动调用方法
bind 改变this指针的方法参数是多个第一个参数是要改变的指针后面的所有的参数都是方法的实参方法会自动触发

闭包

构成闭包的条件：

两个函数函数套函数
里面的函数调用外面的函数的变量

闭包的好处：

变量会一只存在内存中，不会被垃圾回收机制回收
可以在循环列表的时候拿到对应的索引

缺点：造成内存泄漏

function fun(){
    var x =1;
    return function(){
        x++;
        console.log(x);
    }
}
var a = fun();
a();//2
a();//3