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部分:

        

               

                      

            


            



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部分

                   

                   

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

你可能感兴趣的:(5月29号克隆、事件流内联事件、)