1.dom事件分类

  1. onclick      //鼠标点击时触发
  2. onkeyup      //鼠标松开的时候发生的事件
  3. onfocus      //获取焦点
  4. onblur       //失去焦点
  5. onmouseover  //鼠标移到某元素之上
  6. onmouseout   //鼠标从某元素移开
  7. onload       //页面加载时触发
  8. onchange     //域的内容改变时发生
  9. onsubmit     //表单中的确认按钮被点击时发生
  10. //有事件一定有对应一个处理结果，用函数表示
  11. onresize     //浏览器的尺寸发生改变
  12. onscroll     //窗口滚动
  13. onchange     //事件支持的标签input,select,textarea

1.1onclick—点击 onmouseover—悬停 onmouseout—移出

  1.  <div id="test">hello world</div>
  2.     <script>
  3.         var test=document.getElementById("test");
  4.         /* 
  5.         事件
  6.         onclick   点击事件
  7.         onmouseover
  8.         onmouseout
  9.          */
  10.         /* 鼠标悬停的事件 */
  11.         test.onmousemove=function(){
  12.             this.style.backgroundColor='#333';
  13.         }
  14.         /* 鼠标移出的事件 */
  15.         test.onmouseout=function(){
  16.             this.style.backgroundColor='#999';
  17.         }
  18.     </script>

1.2onfocus—获取焦点 onblur—失去焦点

  1. <input type="text" id="input" value="good">
  2.     <script>
  3.         /* onfocus  --获取焦点
  4.            onblur   --失去焦点
  5.         */
  6.         var input=document.getElementById("input");
  7.         input.onfocus=function(){
  8.             this.style.backgroundColor="pink";
  9.         }
  10.         input.onblur=function(){
  11.             this.style.backgroundColor="green"
  12.         }
  13.     </script>

1.3onscroll—滚动

 document.onkeydown = function(event){
     alert(event.keyCode)
}

eg:

  <style>
        body{
            height: 2000px;
        }
        .nav{
            height: 60px;
            width: 100%;
            background: transparent;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="nav" id="nav">导航</div>
   <script>
       /* onscroll  滚动事件 */
       var nav=document.getElementById("nav")
       window.onscroll=function(){
           /* 获取滚动条距离顶部的高度 */
            var scrollTop=document.documentElement.scrollTop;
            /* 当滚动条距离顶部的高度达到300的时候完全显示 */
            var opacity=scrollTop/300;
            if(opacity>1){
                opacity=1;
            }
            nav.style.opacity=opacity;
            nav.style.backgroundColor="pink";
       }   
       </script>

1.4onload页面加载时触发

<input type="text" id="input">
    <script>
        /* onload  等DOM树以及图片相关资源加载完毕，再执行函数中的代码 */
        window.onload=function(){
           var input=document.getElementById("input");
           input.onchange=function(event){
               console.log(this.value)
           }
        }
    </script>