浅克隆、深克隆、事件流、事件冒泡和事件捕获、事件委托

一、浅克隆、深克隆

（1）浅克隆：

案例：

Js部分：function clone(){  var student1={};

      for(var key in student){

          student1[key]=student[key]

        }

      return student1;

  }

      var student1=clone();

  console.log(student1);

  student.name='rose';

  console.log(student1);

（2）深克隆:

案例：

Js部分：function clone(obj){

var student1=obj instanceof Array?[]:{};

        for(var key in obj){

if(obj[key] instanceof Object){                student1[key]=clone(obj[key]);

          }else{

              student1[key]=obj[key];

}

        }        return student1;

}

  var student1=clone(student);

  console.log(student1);

    student.friend[0]='Tom';console.log(student1);

二、事件流内联事件：

.onclick    事件监听:

.addEventListener('事件',function(){})

三、事件冒泡和事件捕获案例：

Body部分：

<div class="box">

        <div class="list">

            <div class="li"><div>

            </div>

  </div>

Js部分：

var box=document.querySelector('.box'); 

  var list=document.querySelector('.list');

    var li=document.querySelector('.li'); 

  box.addEventListener('click',function(){            alert('我是box');        },true)   

        list.addEventListener('click',function(){            alert('我是list');        },true)         

  li.addEventListener('click',function(){            alert('我是li');        },true)

//事件冒泡：从内到外依次触发//事件捕获：从外到内依次触发（添加true）

四、事件委托

事件委托：可以简单第理解为将子集的事件委托给父级来处理案例：

Body部分

<div class="boxs">

<button class="btn1">按钮1</button>

<button class="btn2">按钮2</button>

</div>

js部分

var box=document.querySelector('.boxs');             

  box.addEventListener('click',function(event){               

  var target=event.target;               

  console.log(target.innerHTML);               

  })                                     

var btn=document.createElement('button');

btn.innerHTML='按钮3';btn.className='btn3';

document.querySelector('div').appendChild(btn);