有趣且重要的JS知识合集（10）输入框的中英文触发

1、常用的input和change事件监听

众所周知，输入框我们最多的使用的两种监听：

let dom = document.querySelector('#input')
dom.addEventListener('input', () => {})
dom.addEventListener('change', () => {})

首先 oninput事件，是在我们每次输入值都会触发，由于太过于频繁，我们一般都会加上防抖函数，对于onchange事件，他其实和onblur 事件很类似，相同的是都必须输入框失去焦点时触发，但不同的是onchange事件必须要有值的改变，也就是如果只失去焦点，但是输入框内值没改变，那也是不会触发onchange事件的。

2、compositionstart、compositionupdate、compositionend事件

在中文输入情况下，你所输入的拼音（还没有敲回车键）等都会触发input事件和change事件，所以即使你加上防抖函数也会重复触发（英文输入你就用input + 防抖即可），那我们应该怎么做呢？那么就来说说几个拼音输入法时会触发的事件：

let dom = document.querySelector('#input')
dom.addEventListener('compositionstart', handleEvent);
dom.addEventListener('compositionupdate', handleEvent);
dom.addEventListener('compositionend', handleEvent);

function handleEvent(e) {
    e.type // 事件类型
    e.data // 拼音值
}

compositionstart： 在输入拼音开始即会触发，拿不到值

compositionupdate：在持续输入拼音时候触发，这个时候可以拿到你所输的拼音的值

compositionend：当你输入完成（敲回车键时）触发，可以拿到最终输入的值

3、中英文输入时如何使用？

let flag = true;
let dom = document.querySelector('#input')
  dom.addEventListener('compositionstart',function(){
      flag = false;
  });
  dom.addEventListener('compositionend',function(){
      flag = true;
  });
	dom.addEventListener('input', debounce(function() {
        if (flag) {
          // 你自己的后续操作
        }
	}, 500, false))

这里设置标志值flag，因为输入英文是不会触发compositionstart和compositionend事件的，直接触发input事件，那刚刚好，那中文状态下，只有你输入完成后，才会让flag为true，才进行触发，所以我们这样做就能完美解决问题（我这里防抖函数写法你可以要也可以不要，想要看看的可以点下方链接看看喔~）

防抖节流函数