枯燥的js事件2

鼠标事件
click（鼠标左点击）、mousedown（鼠标左右中点击）、mousemove（鼠标移动）、mouseup（鼠标左右中抬起）、contextmenu（右键取消菜单）、mouseover（移入 区域）、mouseout（移出区域）、mouseenter（与over一样）、mouseleave（与out一样）

用button来区分鼠标的按键，0/1/2

 document.onmousedown =function(e){
    
    
         if(e.button==2){
    
    
             console.log('right');
         }else if(e.button){
    
    
             console.log('mid');
         }else{
    
    
             console.log('left');
         }
     }

DOM3标准规定：click事件只能监听左键，只能通过mousedown,mouseup进行监听鼠标按键。

利用鼠标位置实现物块移动。

 <div style="width: 100px;height: 100px;background-color: red; position: absolute;left: 0;top: 0;"></div>
<script>
     var div = document.getElementsByTagName('div')[0];
    var count =0;
        div.onmousedown = function(e){
    
    
            console.log(count+'a0');
             if(count%2==0){
    
    
                disX = e.pageX 
                disY = e.pageY
                document.onmousemove = function(e){
    
    
                var event = e||window.event;
                div.style.left = e.pageX;
                div.style.top = e.pageY;
                }
             }else{
    
    
                div.style.left = e.pageX;
                div.style.top = e.pageY;
                console.log(count+'b2');
                document.onmousemove = null;
            }
            count++;
        }
        div.onmouseup = function(){
    
    
            console.log('mouseup');
        }


</script>

键盘事件
onkeydown(按下键盘) onkeyup（松开键盘） onkeypress(按下键盘)

keydown > keypress > keyup（出发顺序）

keydown和keypress的区别：
1.keydown能监测所有键盘按键（包括方向键）。keypress只能监测ascall码里面的，并且能转换为字符。

2.keypress能区分大小写，

which是代表108个按键。

文本操作事件

onchange
focus：聚焦
blur：失焦

  <input type="text">
<script>
    var input = document.getElementsByTagName('input')[0];
    input.onchange = function(e){
    
    
        console.log(this.value);
    }
</script>
    

获取文本框内的内容，当失去焦点时才触发。