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