javascript事件, 解决mousedown和click冲突事件, 鼠标事件, 键盘事件, 文本事件用法简介

事件分类

鼠标事件

• 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//页面加载完毕之后执行

---