onfocus，onblur

onfocus 事件在对象获得焦点时发生。 onblur 事件会在对象失去焦点时发生。

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

mouseover，mouseout

mouseover 鼠标悬停在元素上的时候触发 mouseout 鼠标移开的时候触发

  1.     <p id="p">hello world</p>
  2.     <script>
  3.         var p =  document.getElementById("p");
  4.         p.onmouseover = function(){
  5.             this.style.background = "red"
  6.         }
  7.         p.onmouseout =  function(){
  8.             this.style.background = "green"
  9.         }
  10.     </script>

window.onload 页面加载完后触发

  1. <p id="p">hello world</p>
  1. /* 页面加载完毕之后才会触发 */
  2. window.onload = function () {
  3.     var p = document.getElementById("p");
  4.     p.onclick = function () {
  5.         console.log("hello world")
  6.     }
  7. }

onchange，onresize，onscroll

onchange：当输入框的内容发生改变的时候,触发 onresize：窗口大小改变的时候,会触发 onscroll：窗口滚动的时候会触发

  1.     <style>
  2.         body{
  3.             height:2000px;
  4.         }
  5.     </style>
  7. <body>
  8.     <input type="text" id="input">
  9.     <script>
  10.         var input = document.getElementById("input");
  11.         input.onchange =  function(){
  12.             console.log("hello world")
  13.         }
  14.         window.onresize =  function(){
  15.             console.log(1)
  16.         }
  17.         window.onscroll =  function(){
  18.             console.log(2)
  19.         }
  20.     </script>
  21. </body>

onsubmit

onsubmit 事件会在表单中的确认按钮被点击时发生。

  1.    <form id="form"  onsubmit="alert(1)">
  2.         <p>
  3.             用户名: <input type="text" name="user">
  4.         </p>
  5.         <p>
  6.             密码: <input type="password" name="pwd">
  7.         </p>
  8.         <input type="submit" id="input">
  9.     </form>

onkeydown () ,onkeyup(),onkeypress(),key，keyCode

keyCode对照表 key 事件在按下按键时返回按键的标识符。 keyCode（注意大写C） 属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 onkeypress 事件会在键盘按键被按下并释放一个键时发生。 onkeydown 事件会在用户按下一个键盘按键时发生。 onkeyup 事件会在键盘按键被松开时发生。

  1.     <input type="text" id = "input">
  2.     <script>
  3.         /* 
  4.         event.key  获取按下键盘键对应的值
  5.         event.keyCode  13回车
  6.                        82 R
  7.          */
  8.         var input  = document.getElementById("input");
  9.         input.onkeydown = function(event){
  10.             console.log(event.keyCode)
  11.             if(event.keyCode == 82){
  12.                 console.log("放下")
  13.             }
  14.         }
  15.         input.onkeypress =  function(){
  16.             console.log("press")
  17.         }
  18.         input.onkeyup = function(){
  19.             console.log("放开")
  20.         }
  21.     </script>

回车添加值至数组

  1. <input type="" id="input">
  2. <script>
  3.     var arr = [];
  4.     var input = document.getElementById("input");
  5.     input.onkeyup= function(event){
  6.         if(event.keyCode == 13){
  7.             arr.push(this.value)
  8.             console.log(arr)
  9.         }
  10.     }
  11. </script>