一乖篷、淺克隆响驴、深克隆
(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);
二撕蔼、事件流內(nèi)聯(lián)事件:
.onclick? ? 事件監(jiān)聽(tīng):
.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)
//事件冒泡:從內(nèi)到外依次觸發(fā)//事件捕獲:從外到內(nèi)依次觸發(fā)(添加true)
四、事件委托
事件委托:可以簡(jiǎn)單第理解為將子集的事件委托給父級(jí)來(lái)處理案例:
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);