事件--鼠标事件--键盘类事件--文本操作事件---窗体类操作事件---拖拽小方块移动小程序

一，鼠标事件

click--鼠标点击事件
mousedown--mouseup 这两个加起来相当于click事件--三个事件在一起的话触发顺序先down--up--click
mousemove--鼠标移动事件
contextmenu-- 右键产生菜单事件 --唯一有用的是利用阻止默认事件的东西取消右键产生菜单事件
mouseover--mouseout-- 鼠标进入你的区域的时候发生什么//鼠标离开你的区域的时候发生什么
mouseenter --mouseleave html5的新规范跟mouseover mouseout效果一样

怎么区分鼠标左右键--只有两个事件onmousedown跟onmouseup其他事件都不可能
只能通过事件对象里的属性button来判断 ---为0是左键 1是滚动条  2是右键
doucment.onmousedown = function(e){
         if(e.button == 2){
          console.log("right");
         }else if(e.buttom == 0){
           console.log("left");
         }
}



DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

二，键盘类事件    ---按住会一直触发

1.keydown keyup keypress
2.keydown > keypress >keyup 反应顺序
3.keydown 和 keypress的区别
keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
keypress返回ASCLL码，可以转换成相应字符   ----事件对象里面的charCode存放的Ascll
把Ascll转换成字符的是String.fromCharCode

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

三，事件分类 --- 文本操作事件

1.input,focus,blur,change
1.1
<input type="text">
var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){      ---->只要输入框里的内容有变化就会触发这个事件
  console.log(this.value);
}
1.2  change事件 ----聚焦发生改变，失去焦点然后在触发
1.3  focus鼠标聚焦  blur鼠标失去焦点
例子：鼠标聚焦请输入用户名消失，鼠标失去焦点判断里面内容，如果为空赋值请输入用户名
 <input type="text" value="请输入用户名" style="color:#999" >
    <script>
       var input = document.getElementsByTagName('input')[0];
       input.onfocus = function(e){
           if(input.value=="请输入用户名"){
               input.value="";
               input.style.color="#424242";

           }
           input.onblur = function(e){
               if(input.value==""){
                   input.value="请输入用户名";
                   input.style.color="#999";
               }
           }
       }
      
    </script>

四，窗体类操作事件

窗体操作类(window上的事件)
1.scroll load
1.1  scroll滚动条一滚动就会触发
window.onscroll = function(){
  console.log(window.pageXOffset + " " + window.pageYOffset);
}
pageXOffset  pageYOffset  滚动条当前的位置

2.window.onload是没意义的方法，他可以吧html代码写在script下面还能执行
整个页面全部就绪之后window.onload才会执行--效率贼低
window.onload = function(){
  var div=document.getElementsByTagName('div')[0];
  console.log(div);  --可以正常输出

}
<div></div>

五，让小方块移动鼠标拖拽跟着鼠标移动，鼠标松开停止移动，drag方法

    <div style="width:100px;height:100px;background-color:yellow;position: absolute;left:0;top:0;"></div>
function addEvent(elem,type,handle){
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }else if(elem.attachEvent){
            elem.attachEvent('on'+type,function(){
                handle.call(elem);
            })
        }else{
            elem['on'+type] = handle;
        }
    }
    function stopBubble(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
    function cancelHandler(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }
   function getStyle(elem,prop){
       if(window.getComputedStyle){
           return window.getComputedStyle(elem,null)[prop];
       }else{
           return elem.currentStyle[prop];
       }
   }
   function eventListener(elem,type,fn){   -->解除事件处理程序封装方法
      if (elem.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
      elem.removeEventListener(type,fn,false);
      } else if (elem.detachEvent) {                   // IE 8 及更早IE版本
      elem.detachEvent("on"+type,fn);
    }
   }


    var div = document.getElementsByTagName('div')[0];
    function drag(elem){
    var disX,
        disY;
    addEvent(elem, 'mousedown', function(e){
      var event = e || window.event;
      disX = event.pageX - parseInt(getStyle(elem, 'left'));
      disY = event.pageY - parseInt(getStyle(elem, 'top'));
      addEvent(document, 'mousemove', mouseMove);
      addEvent(document, 'mouseup', mouseUp);
      stopBubble(event);
      cancelHandler(event);
    });
    function mouseMove(e){
      var event = e || window.event;
      elem.style.left = event.pageX - disX + "px";
      elem.style.top = event.pageY - disY + "px";
    }
    function mouseUp(e){
      var event = e || window.event;
      eventListener(document,'mousemove',mouseMove);
      eventListener(document,'mouseup',mouseUp);
    
    }
  }
        drag(div);