JS 的事件

 什么是事件?
      一个事件的组成:
            => 触发谁的事件: 事件源
            => 触发什么事件: 事件类型
            => 触发后做什么: 事件处理函数
  例如:
      btn.onclick = function(){}
             触发谁的事件 -> btn -> 事件源就是 btn
             触发什么事件 -> onclick -> 事件类型就是click
             触发后做什么事 -> function() {} -> 这个事件的处理函数

鼠标事件

0.获取元素(提前准备一个带有样式的div)

 var oDiv = document.querySelector('div')

1.左键单击

oDiv.onclick = function(){
      console.log('单击元素时触发')
    }

2.双击事件 300ms 内连续点击两次鼠标

oDiv.ondblclick = function(){
      console.log('双击元素时触发')
    }

3.鼠标右键单击

 oDiv.oncontextmenu = function(){
      console.log('右键单击元素时触发')
    }

4.鼠标按下事件 , 鼠标按下的时候触发(哪怕鼠标没有抬起也会触发)

oDiv.onmousedown = function(){
      console.log('鼠标按下元素时触发')
    }

5.鼠标抬起事件 , 鼠标抬起的时候触发

oDiv.onmouseup = function(){
      console.log('鼠标抬起元素时触发')
    }

6.鼠标移入事件, 鼠标移入到元素触发, 注意,移入子级盒子时，也会触发

oDiv.onmouseover = function(){
       console.log('鼠标移入元素时触发')
     }

7.鼠标移出事件 , 注意,移入子级盒子时，也会触发

oDiv.onmouseout = function(){
       console.log('鼠标移出元素时触发')
     }

8.鼠标移入事件2 , 鼠标移入到元素触发 , 注意:移入子级盒子时，不会触发

oDiv.onmouseenter = function(){
      console.log('鼠标移入元素时触发')
    }

9.鼠标移出事件2 , 鼠标移出元素的时候触发, 注意:移出鼠标到子盒子时并不会触发

oDiv.onmouseleave = function(){
      console.log('鼠标移出元素时触发')
    }

10.鼠标移动事件, 鼠标在oDiv 元素内部移动的时候会触发

oDiv.onmousemove = function(){
      console.log('鼠标移动元素时触发')
    }

键盘事件

1.键盘抬起事件

document.onkeyup = function(){
      console.log('任意按下一个按键,抬起触发')
    }

2.键盘按下事件

document.onkeydown = function(){
      console.log('任意按下一个按键,按下触发')
    }

3.键盘按下抬起事件

document.onkeypress = function(){
      console.log('任意按下一个按键,按下抬起触发')
    }

onkeypress 与 onkeyup 有啥区别呢
- 一个抬起的时候触发, 一个按下然后抬起的时候触发
- press, 现在其实在按下的时候, 尤其是长按的时候, 会默认触发一次抬起
- 但是 up 事件, 必须是你手动抬起的时候才会触发
注意:
- 1.document 当前文档
- 2.input 输入框

表单事件

0。获取元素

var inp = document.querySelector('input')

1.获得焦点事件

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

2.失去焦点事件

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

3.文本框内容改变时触发

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

4.文本框输入内容时触发

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

js的事件,鼠标事件,键盘事件,表单事件

JS 的事件

鼠标事件

键盘事件

表单事件