JavaScript事件之鼠标、键盘、文本操作事件

鼠标事件

• click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout
• mouseover 鼠标移进区域 mouseout 鼠标移出区域
• 用button来区分鼠标的按键，0/1/2
• DOM3标准规定:click事件只能监听左键,只能通过mousedown 和 mouseup来判断鼠标右键
• 鼠标事件全小写 οnclick=mousedown + mouseup
• 移动端鼠标事件 touchstart tuchmove touchend

深度理解实例1——解决mousedown和click的冲突

• 这段代码显示的效果是：当你正常点击鼠标左键时触发click事件，当你长按鼠标左键时并不会触发click事件

var firstTime = 0;
    var lastTime = 0;
    //相当于一个开关
    var key = false;
    div.onmousedown = function(){
        firstTime = new Date().getTime();
    }
    div.onmouseup = function(){
        lastTime = new Date().getTime();
        //小于一定的时间范围（这里假设为300ms）就说明它触发了onclick事件
        if(lastTime - firstTime < 300){
            key = true;
        }
    }
    div.onclick = function(){
            if(key){
            alert('click');
            key = false;
            }
        }

深度理解2——用mousedown区分鼠标键值

// 能区分鼠标左右键只有mousedown 和 mouseup
var div = document.getElementsByTagName('div')[0];
    div.onmousedown = function(e){
        var event = e || document.event;
        //鼠标左键值为 0
        if(event.button == 0){
            alert(0);
            //鼠标滚轮值为 1
        }else if(event.button == 1){
            alert(1);
            //鼠标右键值为 2
        }else{
            alert(2);
        }
    }

• 当鼠标点击左键时，弹出 0
  
• 当鼠标点击滚轮时，弹出 1
  
• 当鼠标点击右键时，弹出 2
  

键盘事件

• keydown keyup keypress
• 优先级 keydown > keypress > keyup
• keydown和keypress的区别
  • keydown 可以响应任意键盘按键（检测108个键），keypress只可以响应字符类键盘按键
  • keypress 有charCode值区分 keydown 有which值区分
  • keypress没有控制键 如上下左右键并不会触发keypress事件
  • keypress区分大小写 如A，a ；keydown不区分大小写
  • keypress返回ASCII码，可以转换成相应字符

深度理解3——键盘事件触发优先级

var div = document.getElementsByTagName('div')[0];
        document.onkeydown = function(e){
            console.log(e.type);
        }
        document.onkeyup = function(e){
            console.log(e.type);
        }
        document.onkeypress = function(e){
            console.log(e.type);
            // console.log(String.fromCharCode(e.charCode));
        }

当键盘敲击时，触发事件顺序：控制台显示为如下效果

深度理解3——keypress利用charCode转换为相应字符

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

可以看到keypress是区分大小写的

文本操作事件

• input,focus,blur,change

深度理解4——input和change的区别

• input每一次键入都会执行function

var input = document.getElementsByTagName('input')[0];
        input.oninput = function(e){
            console.log(this.value);
        }

• change键入后离开点击其他区域才会执行function

input.onchange = function(e){
            console.log(this.value);
        }

深度理解5——focus,blur文本框设置
文本框默认值为“请输入用户名”，默认字体颜色为灰色。当文本框获取焦距时，清空默认值，并设置字体颜色为黑色。当输入结束后(无焦距时blur)，如果输入为空，设置默认值为“请输入用户名”，默认字体颜色为灰色。这是一个常用实例。

<input type="text" value="请输入用户名" style="color:#999;border: 1px solid #096;" onfocus="if(this.value=='请输入用户名'){this.value=''} this.style.color='#424242'" onblur="if(this.value==''){this.value='请输入用户名'; this.style.color='#999'}">

还等什么，喜欢记得点赞+收藏+关注哦