聚焦事件，Input事件，节流和防抖

一、FocusEvent

不能事件委托，仅用于input,textArea,select,a

focus 聚焦

blur 失焦

属性：relatedTarget--上一次聚焦的位置

    <form action="#">
        <input type="text" name="user">
        <button type="button">提交</button>
    </form>
    <script>

        //通过选择器获取input元素
        let input = document.querySelector('input');
        //为input添加事件侦听
        input.addEventListener('focus',focusHandler);
        input.addEventListener('blur',focusHandler);
        // relatedTarget--上一次聚焦的位置
        //事件回调函数
        function focusHandler(e) {
            console.log(e);
        }
    </script>

可以事件委托，可以用表单和表单元素

focusin 聚焦

focusout 失焦

    <form action="#">
        <input type="text" name="user">
        <button type="button">提交</button>
    </form>
    <script>

        let form = document.querySelector('form');
        form.addEventListener('focusin',focusHandler);
        form.addEventListener('focusout',focusHandler);
        function focusHandler(e){
            console.log(e);
        }
    </script>

二、InputEvent

input 输入时触发事件，可以委托给父元素

InputEvent的一些重要属性

• data:"a" 每次输入的内容
• isComposing: true 是否输入法输入
• inputType: "insertCompositionText" 输入的类型
  • 以下为输入的类型inputType
  • insertCompositionText 输入插入
  • historyUndo 历史返回
  • insertText  插入文本
  • deleteContentBackward 退格删除（删除前一个）
  • deleteContentForward  delete删除（删除后一个）
  • deleteByCut 剪切删除
  • insertFromPaste 粘贴插入

    <form action="#">
        <input type="text" name="user">
        <button type="button">提交</button>
    </form>
    <script>

        let input = document.querySelector('input');
        input.addEventListener('input', inputHandler);
        function inputHandler(e){
            console.log(e);//每输入一个，都会打印这个事件
        }
    </script>

三、节流和防抖

文本框在输入的时候，如果每输入一次就判断一次，会造成效率太低，我们让它每间隔一段时间，再去验证。如上面输入框里输入时，每输入一次，都会很快打印侦听的事件，我们可以通过定时器节流和时间戳节流

节流：第一次进入执行程序，在一定时间内不能再次进入，等待时间过后再次进入，然后又不能进入

1、定时器setTimeout节流

    <form action="#">
        <input type="text" name="user">
        <button type="button">提交</button>
    </form>
    <script>

        let input = document.querySelector('input');
        input.addEventListener('input', inputHandler);
        let id;
        function inputHandler(e){
            if(id) return;
            id = setTimeout(()=>{
                clearTimeout(id);
                id = undefined;
                console.log(input.value);
            },500)
        }
    </script>

2、时间戳节流

    <form action="#">
        <input type="text" name="user">
        <button type="button">提交</button>
    </form>
    <script>

        let input = document.querySelector('input');
        input.addEventListener('input', inputHandler);
        var lastTime = 0;
        function inputHandler(e){
            let nowTime = new Date().getTime();
            if(nowTime-lastTime>500){
                lastTime = nowTime;
                console.log(this.value);
            }
        }
    </script>

防抖：第一次不能进入，间隔一定时间后可以进入，然后不能进入，间隔一定时间后再次可以进入