js 事件分类 鼠标/键盘/文本/window 区分鼠标按键 模拟fiexd定位 mouseover/mouseenter区别

鼠标事件

click 左键点击事件
mousedown 鼠标按下事件
mouseup 鼠标松开事件
mousemove 鼠标移动事件
mousewheel 鼠标滚轮滚动事件
mouseover/mouseenter 鼠标移入某元素之上
mouseout/mouseleave 鼠标从某元素移开
contextmenu 右键菜单打开事件

div.addEventListener('click',function(){},false)
div.addEventListener('mousedown',function(){},false)
div.addEventListener('mouseup',function(){},false)

// 鼠标点击div
// mousedown -> mouseup ->click

mousewheel

firefox使用DOMMouseScroll,其他浏览器使用mousewheel

div.addEventListener('musewheel',function(e){
	// firefox使用detail:下3上-3,其他浏览器使用wheelDelta:下-120
	var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
	if(delta > 0){  // 下滚
		console.log("下滚")
	}
	if(delta < 0){  // 上滚
		console.log("上滚")
	}
},false)

mouseover/mouseenter 区别

mouseover 鼠标经过自身盒子会触发，经过子盒子也会触发
mouseenter 鼠标经过自身盒子会触发 mouseenter不会冒泡

区分鼠标按键

dom3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

div.addEventListener('mousedown',function(e){
	//e.button  0:左键 1:滚轮 2:右键
	//e.which   1:左键 2:滚轮 3:右键
	
},false)

解决 mousedown 和 click 冲突

一个a标签 拖拽时不跳转页面 点击时跳转页面

var first,
	last,
	key = false;
document.onmousedown = function(){
	first = new Date().getTime()
	// onmousemove
}
document.onmouseup = function(){
	last = new Date().getTime();
	if(last - first < 300){
		key = true
	}
}
document.onclick = function(){
	if(key){
		console.log('onclick')
		key = false;
	}
}

键盘事件

keydown
keyup
keypress

执行顺序
keydown＞keypress＞keyup

// 随意按下一个键盘按键
document.onkeydown = function(){
	console.log('keydown')
}
document.onkeypress= function(){
	console.log('onkeypress')
}
document.onkeyup = function(){
	console.log('onkeyup')
}
// keydown  onkeypress  onkeyup 

按着按键不动 会连续触发 onkeydown onkeypress

keydown和keypress区别

keydown 可以响应任意键盘按键 不能区分大小写
keypress 只可响应字符类键盘(ASCII表里面有的)按键 可区分大小写

keypress 返回ASCII码，可以转换成相应字符

// 按下 空格键
document.onkeydown = function(e){
	console.log('keydown',e)
}
document.onkeypress= function(e){
	// 打印字符类键盘  字符
	console.log('onkeypress',String.fromCharCode(e.charCode));
}

文本事件

input input值改变触发
change 失去或获取焦点触发
blur 失去焦点触发
focus 获取失去焦点触发

// input值改变触发
input.oninput = function(){
	console.log(this.value)
}

<input type="text" value="请输入关键字" onfocus="if(this.value=='请输入关键字'){this.value=''}" onblur="if(this.value==''){this.value='请输入关键字'}">

窗口操作类（window上的事件）

scroll 滚动条滚动触发

window.onscroll = function(){
	console.log(window.pageXOffset,window.pageYOffset)
}

IE6 没有fiexd定位

模拟fiexd定位

window.onscroll = function(){
	div.style.top = parseInt(div.style.top) + window.pageYOffset + 'px'
}

load 页面解析渲染完执行

最慢的 效率低

window.onload = function(){
	// ....
}