3.事件

3.1 onclick 点击事件

<button id="btn">btn</button>
  <script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        console.log("hello world")
    }
    /* 
    element.eventName = function(){
        //执行代码
    }
     */
  </script>

 <button id="btn">btn</button>
    <script>
        /* 更改元素的内容，样式，结构 */
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        /* this指向正在执行事件的当前对象 */
        console.log(this)
        this.innerHTML = "change"
    }
    /* innerHTML  --可以改变元素的内容*/
    </script>

3.2 输入框事件

onfocus 获取焦点 / onblur 遗失焦点

 <input type="text" id="test">
    <script>
        /* 
        获取焦点  onfocus
        遗失焦点  onblur
         */
        var test = document.getElementById("test");
        test.onfocus = function(){
            this.style.backgroundColor = "red"
        }
        test.onblur =  function(){
            this.style.backgroundColor ="#fff"
        }
    </script>

onchange 输入框内容改变时触发

    <input type="text" id="input">
    <script>
        /* 只有输入框的内容发生改变的时候,onchange事件才会触发 */
        var input = document.getElementById("input");
        input.onchange =  function(){
            console.log("hello")
        }
    </script>

3.3 鼠标事件

    <p id="p">hello world</p>
    <script>
        var p = document.getElementById("p");
   /*onmouseover 鼠标悬停在元素上时触发*/
        p.onmouseover = function(){
            this.style.backgroundColor = "red"
        }
   /*onmouseout 鼠标移开时触发*/
        p.onmouseout = function(){
            this.style.backgroundColor = "yellow"
        }
    </script>

3.4 输入框事件

onchange 输入框内容改变时触发

    <input type="text" id="input">
    <script>
        /* 只有输入框的内容发生改变的时候,onchange事件才会触发 */
        var input = document.getElementById("input");
        input.onchange =  function(){
            console.log("hello ")
        }
    </script>

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>

3.5 窗口事件

onresize 窗口发生改变的时候触发

    <script>
        /* 窗口大小发生改变的时候触发 */
        window.onresize = function(){
            console.log("窗口改变了")
        }
    </script>

onscroll 窗口滚动时触发

    <script>
        window.onscroll = function(){
            console.log(1)
        }
    </script>

3.6 键盘事件

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

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("发大招");
  }
}

onkeypress 当键盘按键按下并释放一个键时发生

    <input type="text" id="app">
    <script>
        /* 
        在键盘按键按下并释放一个键时发生
         */
        var app = document.getElementById("app");
        app.onkeypress=function(event){
            console.log(event)
        }
    </script>

onkeyup 在键盘按键松开时发生

    <input type="text" id="app">
    <script>
        // 在键盘按键松开时发生
        var app = document.getElementById("app");
        app.onkeyup = function(event){
            console.log(event)
        }
    </script>