基础课第二十天到第二十一天，事件委托、定时、Sprite

一、事件委托

事件冒泡

DOM0

DOM2

addEventListener

attachEvent

把事件添加在父元素上，减少交互次数

palette.onclick=function(e){
		var e=e||window.event;
		var target=e.target||e.srcElement;
		if(target.nodeName.toLowerCase() == 'li'){
			colorpicker.innerHTML=target.style.backgroundColor;
			colorpicker.style.color=target.style.backgroundColor;

		}
	}

如果有多个，可用target.id配合switch来选择使用

觉得这个写的https://www.cnblogs.com/liugang-vip/p/5616484.html

 

二、定时器

setTimeout单次

setInterval每隔一段时间

clearInterval删除 要带参数

fadebtn.onclick=function(){
			if(fadebtn.innerHTML=="淡出"){
				var interval = setInterval(function(){
					a(0.1);
					setTimeout(clearInterval,2000,interval);
				}, 200);
				this.disabled="disabled";
				var str="淡入";
				setTimeout(b,2000,str);//b(str)这里str是放后面
			}
			else{
				var interval = setInterval(function(){
					a(-0.1);
					setTimeout(clearInterval,2000,interval);
				}, 200);
				this.disabled="disabled";
				var str="淡出";
				setTimeout(b,2000,str);
			}
	}

 

三、Sprite

减少HTTP请求，减少图片内存大小

重点在于position定位在什么地方

var ss = setInterval(function(){
		if(flag==0){
			smile.style.backgroundPosition="0px "+tim*(-480)+"px";
			tim++;
			if(tim==16){
				flag=1;			
			}
		}
		else{
			smile.style.backgroundPosition="0px "+tim*(-480)+"px";
			tim--;
			if(tim==0){
				flag=0;
				
			}
		}		
	}, 100);

position定位在什么地方，就从这个地方开始取所要的部分

就是截取一长长图的某一个部分