一芒涡、淺克隆、深克隆
(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);
二费尽、事件流內聯(lián)事件:
.onclick? ? 事件監(jiān)聽:
.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)
//事件冒泡:從內到外依次觸發(fā)//事件捕獲:從外到內依次觸發(fā)(添加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);