BOM、鼠标事件、键盘事件

BOM

1. 浏览器嗅探：navigator.userAgent()
2. 封装函数是否是移动端

function isPhone(){
var is=false;
var arr=['iOS','iPhone','iPad','Andriod'];
for(var i=0;i<arr.length;i++){
if(navigator.userAgent().indexOf(arr[i])!=-1){
is=true;//移动端
}
else{ is=false;
}
} 
return is;
}

鼠标事件

1. onclick 单击 ondblclick双击
2. onmouseover/onmouseenter移入 onmouseout/onmouseleave 移出（建议使用mouseenter 、mouseleave,因为mouseover和mouseout在鼠标进入元素子级会触发）
3. onmousedown 按下 onmouseup抬起
4. oncontextmenu右键 onmusemove 移动

鼠标拖拽div移动
知识点：闭包-在函数里实现另一个函数-使局部变量数据持久化-造成一定的内存压力

1. `

#move{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			
		}

</style>

<script>
var m=document.getelementById('move');
window.onmousedown=function(e){
var x1=e.clientX;//鼠标指针所在视口的水平坐标
var y1=e.clientY;
var l=m.offsetLeft;
var t=m.offsetTop;
window.onmousemove=function(e){
var x2=e.clientX;
var y2=e.clientY;
m.style.left=x2+l-x1;
m.style.top =y2+t-y1;
}
}
window.onmouseup=function(){
window.onmousemove=null;
}
</script>

`

键盘事件

1. onkeydown 按下 onkeyup抬起 keyCode键码
2. 键盘按键使div移动
3. `

#move{
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			
		}

</style>

<script>
var m=document.getelementById('move');
//计时器加状态
var timer=null;
var isLeft=false;
var isRight=false;
var isTop=false;
var isBottom=false;
timer=setInterval(function(){
if(isLeft){
m.style.left=m.offsetLeft-5+'px';
}
if(isTop){
m.style.top=m.offsetTop-5+'px';
}
if(isRight){
m.style.left=m.offsetLeft+5+'px';
}
if(isBottom){
m.style.top=m.offsetTop+5+'px';
}
},30)
window.onkeydown=function(e){
switch(e.keyCode){
case 37:isLeft=true;//37为左键键码
	break;
case 38:isTop=true;
	break;
case 39:isRight=true;
	break;
case 40:isBottom=true;
default:break;
}
}
window.onkeyup=function(){
switch(e.keyCode){
case 37:isLeft=false;//37为左键键码
	break;
case 38:isTop=false;
	break;
case 39:isRight=false;
	break;
case 40:isBottom=false;
default:break;
}
}
</script>

`