25 JS中的事件

1.事件的组成

• 触发谁的事件: 事件源
• 触发什么事件:事件类型
• 触发后做什么:事件处理函数 例如:

  btn.onclick = function(){}
  触发谁的事件 -> btn -> 事件源就是 btn
  触发什么事件 -> onclick -> 事件类型就是click
  触发后做什么 -> function(){} -> 这个时间的事件处理函数

1.1 常见的事件

1.1.1 浏览器事件:

    onload:页面全部资源加载完毕
    onscroll:浏览器页面滚动的时候

1.1.2 鼠标事件:

<style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 400px;
      height: 400px;
      background-color: pink;
    }
    .box{
      width: 100px;
      height: 100px;
      background-color: green;
    }
</style>

<div>
    <div class="box"></div>
</div>

• 单机事件(左右)

  //0.获取元素
  var div = document.querySelector('div')

  //1.左键单击
  div.onclick = function(){
    console.log('单机元素时触发')
  }

  //2.双击事件    300ms 内连续点击两次鼠标
  div.ondblclick = function(){
    console.log('双机元素时触发')
  }

  //3.右键事件
  div.oncontextmenu = function(){
    console.log('右键单击元素时触发')
  }

• 按下抬起事件

  //4.鼠标按下事件      鼠标左键按下时触发(哪怕鼠标没有抬起也会触发)
  div.onmousedown = function(){
    console.log('鼠标按下触发')
  }

  //5.鼠标抬起事件    鼠标左键抬起的时候触发
  div.onmouseup = function(){
    console.log('鼠标抬起时触发')
  }

• 移入移出事件

  //6.鼠标移入事件1    鼠标移入元素的时候触发    注意:移入子级盒子时也会触发
  // div.onmouseover = function(){
  //   console.log('onmouseover  移入事件触发:')
  // }

  //7.鼠标移出事件1    鼠标移出元素的时候触发    注意:移入子级盒子时也会触发
  // div.onmouseout = function(){
  //   console.log('onmouseout  移出事件触发:')
  // }

  //8.鼠标移入事件2    鼠标移入元素的时候触发    注意:移入子级盒子时并不会触发
  div.onmouseenter = function(){
    console.log('onmouseenter  移入事件触发:')
  }

  //9.鼠标移出事件2    鼠标移出元素的时候触发    注意:移出子级盒子时并不会触发
  div.onmouseleave = function(){
    console.log('onmouseleave  移出事件触发:')
  }

• 移动事件

  //10.鼠标移动事件    鼠标在div元素内部移动的时候触发
  div.onmousemove = function(){
    console.log('鼠标移动事件触发:')
  }

1.1.3 键盘事件

1. document 当前文档
2. input 输入框

    //1.键盘抬起事件 
    document.onkeyup = function(){
      console.log('任意按下一个按键然后抬起时会触发')
    }

    //2.键盘按下事件 
    document.onkeydown = function(){
      console.log('任意按下一个按键时会触发')
    }

    //3.键盘按下抬起事件
    document.onkeypress = function(){
      console.log('键盘任意按键按下抬起时触发')
    }

1.1.4 表单事件

<input type="text">

    //0.获取元素
    var inp = document.querySelector('input')

• 获得焦点事件

    inp.onfocus = function(){
      console.log('当前文本框获得焦点')
    }

• 失去焦点事件

    inp.onblur = function(){
      console.log('当前文本框失去焦点')
    }

• 文本框内容改变时触发

    inp.onchange = function(){
      console.log('当前文本框内容发生改变')
    }

• 文本框输入内容时触发

    inp.oninput = function(){
      console.log('当前文本框正在输入内容')
    }