焦点事件 focus/blur

    <input type="text" />

<script>
        const input = document.querySelector("input")

        // 绑定焦点事件
        input.addEventListener("focus" ,function(){
            console.log("有焦点触发")

        })

        // 失去焦点事件
        input.addEventListener("blur",function(){
            console.log("失去焦点事件")
        })
</script>

键盘事件 keyup / keydown

当dom绑定了keyup点击任何一个键盘上面的按键抬起的时候就会触发

当dom绑定了keydown点击任何一个键盘上面的按键按下的时候就会触发

<input type="text">
    <script>
        const input = document.querySelector("input")
        // 1.键盘事件
        // input.addEventListener("keydown",function(){
        //     console.log("键盘按下");
        // })
        // input.addEventListener("keyup",function(){
        //     console.log("键盘弹起");
        // })
        // 2.文本输入事件input
        input.addEventListener("input",function(){
            console.log(input.value);
        })
    </script>

还有个点击事件click