JavaScript23

一、计时器

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

})