JS 常用事件 ~

what is 事件？

omg,我也不太懂 我来TELL你~
就是人和浏览器间的互动嘛~

• 所谓的事件，是浏览器监听用户行为的一种机制。

• 比如，当用户使用鼠标 “点击” 一个按钮，会触发该按钮的“点击”事件
  如果此时我们想要执行代码 就可以通过JS脚本设置“点击”事件 同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件 类似的事件还有很多

  事件的分类

  鼠标事件：
  click 点击事件 （很常见的）
  dblclick 双击事件
  mousedown 鼠标按下事件
  mouseup 鼠标抬起事件(一次click包含一次mousedown和一次mouseup)
  mouseover 鼠标进入事件
  mouseenter 鼠标进入事件
  mouseout 鼠标离开事件
  mouseleave 鼠标离开事件
  mousemove 鼠标移动事件(实时监测鼠标位置也是用这个奥)

  键盘事件
  keydown 键盘键被按下
  keyup 键盘键被松开
  keypress 输入

  浏览器的事件
  load 页面中所有资源都被加载完毕的时候
  scroll 页面的卷动

  焦点事件
  focus 当一个元素获取到焦点时
  blur 当一个元素失去焦点时

  移动端事件
  touchstart 触摸开始事件 会在手指按下的时候触发
  touchmove 触摸并移动 会在手指按下并移动的时候触发
  touchend 触摸结束事件 会在手指离开的时候触发

  其它事件
  animationstart 动画开始时触发
  animationend 动画结束时触发
  transitionend 过渡结束时触发

大兄弟这玩意儿咋用嘞？

绑定事件的第一步 获取元素

    // HTML代码
    <button id="btn">点我试试看</button>/*在Html中创建想互动的元素*/
    ```
    // JS代码
    function diy() {
        console.log("你好");
    }
    btn.onclick = diy;

难一丢的还可以这么用

        // 获取元素
        var div = document.querySelector(".box");

        // 绑定事件 
        div.onclick = function(e) {
            console.log(e); 
            }

你想让哪个元素有事件就给哪个元素绑定就好咯，当然格式都是函数
键盘事件用法：

        diy.onkeyup = function(e) {
                    // 重要属性 e.key e.keyCode 
                    // e.key 是字符
                    // e.keyCode 是ASCII码 常见的ASCII码 
                    // 13    回车
                    // 32    空格
                    // 37    ←
                    // 38    ↑
                    // 39    →
                    // 40    ↓
                if (e.key === "a") {
                // 让用户输入的内容取消
                // 假设inp.value是 abcdefg 
                // inp.value.slice(0, -1); 从0 截取到f 
                inp.value = inp.value.slice(0, -1);
            }

鼠标事件用法：

// btn是HTML元素#btn在JS中的表示对象,在html中写一个button加id="btn"
 function click() {
            console.log("你好");
        }
        btn.onclick = click;//调用函数
//下面这几种更常用 推荐
        // btn.onclick = function() { 
        //     console.log("你好");
        // }

        // btn.onmouseover = function() {
        //     console.log("嘻嘻嘻");
        // }

        // btn.onmousedown = function() {
        //     console.log("鼠标按下了");
        // }

        // btn.onmouseup = function() {
        //     console.log("鼠标抬起")
        // }