事件分类
鼠标事件
- click/ mousedown/ mousemove/ mouseup/ contextmenu/ mouseover/ mouseout/ mouseenter/ mouseleave
- 用button来区别鼠标的按键
- DOM3标准规定: click事件只能监听左键, 只能通过mousedown和mouseup来判断鼠标键
- 鼠标左键button = 0, 右键button = 2, 滑轮 button = 1
eg:
var div = document.getElementsByTagName('div')[0];
div.onmousedown = function (e) {
var event = e || window.event;
if(event.button == 2){
console.log('right');
}else if(event.button == 0){
console.log('left');
}
}
- 如何解决mousedown和click的冲突
应用时间差去区别, click的点击时间快
eg:
var div = document.getElementsByTagName('div')[0];
var key = false;
var firstTime = 0;
var lastTime = 0;
div.onclick = function() {
if(key){
console.log('click');
key = false;
}
}
div.onmousedown = function() {
firstTime = new Date().getTime();
console.log('mouseDown');
}
div.onmouseup = function() {
console.log('mouseUp');
lastTime = new Date().getTime();
if( (lastTime - firstTime) < 200){
key = true;
}
}
键盘事件
- keydown keyup keypress
- keydown > keypress > keyup
- keydown和keypress的区别
- keydown可以响应任意键盘按键, keypress只可以相应字符类键盘按键
- keypress返回ascii码, 可以转换成相应字符串, charCode属性记录ascii, 并且keypress还可以记录大小写, 然而keydown不能, 但是keydown可以读到所有按键, 例如上下左右, keydown只有which
文本操作事件
- input //当文本框输入值时触发事件
- focus//聚焦
- blur//失焦
- change//判断一次聚焦失焦时文本内容是否发生变化, 变化时触发事件
窗口操作类
- scroll//当滚动条滚动时触发
- load//页面加载完毕之后执行
