2-1 焦点事件

2-1-1 onfocus 获取焦点

2-1-2 onblur 失去焦点

<input id="app" type="text">
    <script>
        var app = document.getElementById("app")
        app.onfocus = function(){
            this.style.backgroundColor="red"
        }
        app.onblur = function(){
            this.style.backgroundColor = "yellow"
        }
    </script>

2-2 鼠标事件

2-2-1onmouseover 鼠标悬停在元素上时触发

2-2-2onmouseout 鼠标移开时触发

<p id="p">hello world</p>
<script>
  var p = document.getElementById("p")
  p.onmouseover = function(){
    p.style.background = "red"
  }
  p.onmouseout = function(){
    p.style.background = "green"
  }
</script>

2- 3 输入框有关

2-3-1 onchange 输入框内容改变时触发

var input = document.getElementById("input")
input.onchange = function(){
  console.log("hello world");
}

2-3-2 onsubmit 事件在表单提交时触发

<form id="form" onsubmit="alert(1)">
  <p>
  用户名：<input type="text" name="user">
  </p>
    <p>
    密码：<input type="password" name="pwd">
  </p>
    <input type="submit" id="input">
</form>

获取输入框的值 element.value

<input type="text" id="input" >
  <!-- element.value -->
<script>
  var input =document.getElementById("input")
  input.onkeyup = function(event){
    if(event.keyCode == 13){
      console.log(this.value)
    }
  }
</script>

实例demo

<p>还可以输入<em id="em" style="color:red">0</em>/30</p>
<textarea id="txt" cols="30" rows="10"></textarea>
<script>
  var txt = document.getElementById("txt")
var em = document.getElementById("em")
txt.onkeydown = function(){
  var length = this.value.length;
  if(length<=30){
    em.innerHTML = this.value.length;
  }else{
    alert("最多只能输入30个字符")
  }
}
</script>

2-4 窗口有关的

2-4-1 onresize 窗口大小改变的时候触发

window.onresize = function(){
  console.log("窗口大小改变了");
}

2-4-2 onscroll 窗口滚动时触发

window.onscroll = function(){
  console.log(2);
}

2-4-3 onload 页面在加载完毕之后才会触发

<p id="p">hello world</p>
window.onload = function(){
  var p = document.getElementById("p")
  p.onclick = function(){
    console.log("hello world");
  }
}

2-5 键盘事件与KeyCode属性

event.key 获取键盘按下对应的键
event.keyCode 获取按下的键的状态码

2-5-1 onkeydown 用户按下一个键盘按键时发生

<input type="text" id="input">
var input = document.getElementById("input")
input.onkeydown = function(event){
  console.log(event.key)
  console.log(event.keyCode);
  if(event.keyCode == 85){
    console.log("发大招");
  }
}

2-5-2 onkeypress 在键盘按键按下并释放一个键时发生

input.onkeypress = function(){
  console.log("press");
}

2-5-3 onkeyup 在键盘按键松开时发生

input.onkeyup = function(){
  console.log("up");
}