JavaScript 事件2

鼠标事件

• click、mousedown、mousemove、mouseup、contextmenu、
  mouseover、mouseout、mouseenter、mouseleave  // 都没有驼峰
• 用button来区分鼠标的按键。 // 扫雷 只有可以mouseup mousedown
               // e.button = 0/1/2
• DOM3标准规定：click时间只能监听左键，只能通过mouseup mousedown来判断鼠标键
• 如何解决mousedown和click的冲突。

var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function () {
	firstTime = new Date().getTime();
}
document.onmouseup = function () {
	lastTime = new Date().getTime();
	if(lastTime - firstTime < 300) {
		key = true;
	}
}
document.onclick = function () {
	if(key) {
		console.log('click');
		key = false;
	}
}

事件练习

• 拖拽应用
• 应用mousedown mousemove mouseup
• 随机移动的方块 // 点不到我吧 // 雪花飘落
• mouseover

键盘事件

• keydown keypress keyup
• keydown > keypress > keyup
• keydown 和 keypress的区别
  • keydown 可以响应任何键盘按键，keypress只能响应字符类按键
  • keypress 返回ASCII码，可以转换成响应字符。

---

document.onkeypress = function (e) {
	consolo.log(String.fromCharCode(e.charCode));
}

事件分类

• 文本操作事件
• input 内容有变化触发，focus ，blur，change 聚焦和失去焦点两个状态不一触发
• 窗体操作类（window上的事件）
• scroll(滚动条滚动 事件触发) load(慢，所有结构渲染完毕后 触发)
• 小练习：fixed定位js兼容版