5月29号克隆、事件流内联事件、

一、浅克隆、深克隆

（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>

按钮1

按钮2

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);