js day 23

一、计时器

css样式

<button class='btn1'>停止一次性定时器</button>
<button class='btn2'>停止永久性定时器</button>

script 一次性定时器

var btn1=document.querySelector('.btn1');
var btn2=document.querySelector('.btn2');
function show(){
    console.log('这是一次性定时器');
}//一次性定时器

script 永久性定时器

var timer=setTimeout(show,3000);
btn1.onclick=function(){
    clearTimeout(timer);
}

function print(){
    console.log('这是永久性定时器');
}
var times=setInterval(print,1000);
btn2.onclick=function(){
   clearTimeout(times);
}

二、instanceof

var arr=[1,2,3,4,5];
var obj={name:'jack'};
console.log(arr instanceof Array);
console.log(obj instanceof Array);

三、深度克隆

var student={
    name:'jack',
    age:18,
    friend:['lily','lucy']
}
function clone(obj){
    var newObj=obj instanceof Array?[]:{};
    for(var key in obj){
        if(obj[key] instanceof Object){
             newObj[key]=clone(obj[key]);
        }else{
            newObj[key]=obj[key];
        }
    }
    return newObj;
}
           
var newObj=clone(student);
student.friend[0]='rose';
console.log(student.friend[0]);
console.log(newObj.friend[0]);

四、事件委托

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

<div class='boxs'>
    <button class='btn1'>按钮1</button>
    <button class='btn2'>按钮2</button>
</div>

script 第一种写法

var btn1 = document.querySelector(".btn1");
var btn2 = document.querySelector(".btn2");
btn1.addEventListener("click",function(){
    console.log(this.innerHTML)
})
btn2.addEventListener("click",function(){
    console.log(this.innerHTML)
})

script 第二种写法

var btnArray = document.querySelectorAll("button");
for(var i = 0;i<btnArray.length;i++){
    btnArray[i].addEventListener("click",function(){
        console.log(this.innerHTML)
    })
}

第三种:使用事件委托的方式实现

var box=document.querySelector('.boxs');
box.addEventListener('click',function(event){
    var target=event.target;
    console.log(target.innerHTML);
})