事件分类

另一种事件捕获：（仅对IE 有用）
div.setCapture(); div.releaseCapture();将页面中所有的事件揽在自己身上

鼠标事件：

click，mousedown，mousemove，mouseup
（移动端：touchstart，touchmove，touchend）
click=mousedown+mouseup

<div style="background-color: red;width: 50px;height: 50px;"></div>
     <script type="text/javascript">
        var div=document.getElementsByTagName('div')[0];

            div.onclick=function(){
                console.log("click");
            }
             div.onmousedown=function(){
                console.log("mousedown");
            }
             div.onmouseup=function(){
                console.log("mouseup");
            }
     </script>

我们点击方框 在控制台上依次的显示如下

contextmenu （右键产生菜单）
mouseover / mouseenter（鼠标盖住 闯进你的区域）
mouseout / mouseleave（鼠标离开你的区域）

区分左右键：
mouseup mousedown判断鼠标键 click只能监听左键
event.button（左键0 右键2 滚动轮1）

这段代码可以监听 div 的左右键及滚动轮的点击事件并显示：

div.onmouseup=function(e){
               if(e.button==0)
                console.log("left");
               else if(e.button==2)
                console.log("right");
               else if(e.button==1)
                console.log("middle");
            }

---

键盘事件：

keydown，keyup，keypress
keydown > keypress > keyup
keydown 和 keypress 的区别

• keydown 可以响应任意键盘的按键（每一个witch 对应一个键，不是按ASCⅡ码对应的），keypress只可响应字符类键盘的按键
• keypress 返回ASCⅡ码，可以转换成相应字符 （大小写转换） keydown（不可区分字符类大小写）
  

  ---

文本操作事件：

input，focus，blur，change
input 但凡内部文本有变化都会触发

<input type="text">

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

        </script>

每 输入/删除 一个字符在控制台上都会有显示
change （对比鼠标聚焦和失去焦点状态的改变）状态改变才会在控制台上有显示
focus 会在对象获得焦点时发生
blur 会在对象失去焦点的时候发生

//实现了一个输入框，输入内容框中文本改变
 <input type="text" value="输入" style="color:#999;">

        <script type="text/javascript">
             var input=document.getElementsByTagName('input')[0];
             input.onfocus=function(){
                if(this.value=="输入"){
                this.value="";
                this.style.color="#424242";
                }
             }

             input.onblur=function(){
                if(this.value==""){
                this.value="输入";
                this.style.color="#999"
                }
             }
        </script>

---

窗体类：

（window 上的事件）
scroll 滚动条滚动触发事件
load （ js 读取时阻断页面 < html >一般放在下面）

要想放在前面可以写上：

//（这个文档解析完毕后才会执行 效率较低）
<script>
window.onload=function(){
    js代码
}
</script>

浏览器解析过程：
（html css一起解析的，先解析再下载）