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—滚动

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

eg:

  1.   <style>
  2.         body{
  3.             height: 2000px;
  4.         }
  5.         .nav{
  6.             height: 60px;
  7.             width: 100%;
  8.             background: transparent;
  9.             position: fixed;
  10.             top: 0;
  11.             left: 0;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="nav" id="nav">导航</div>
  17.    <script>
  18.        /* onscroll  滚动事件 */
  19.        var nav=document.getElementById("nav")
  20.        window.onscroll=function(){
  21.            /* 获取滚动条距离顶部的高度 */
  22.             var scrollTop=document.documentElement.scrollTop;
  23.             /* 当滚动条距离顶部的高度达到300的时候完全显示 */
  24.             var opacity=scrollTop/300;
  25.             if(opacity>1){
  26.                 opacity=1;
  27.             }
  28.             nav.style.opacity=opacity;
  29.             nav.style.backgroundColor="pink";
  30.        }   
  31.        </script>

1.4onload页面加载时触发

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