文字事件指的是當文字發生變化時所觸發的事件

change

change事件常用於<input>、<textarea>、<select>等元素，在它們失去焦點且value值改變時觸發

<input type="text" id="t">
<script>
  t.onchange = function() {
    console.log(this.value)
  }
</script>

input

input事件表示輸入框內容發生變化時觸發，但通過javascript改變value時不會觸發。input與change事件的區別就是不需要移除焦點就可以觸發

<input id="test">
<script>
test.oninput = function(e){
  console.log(this.value)
}
</script>

textInput

textInput是DOM3級引入的新事件，目的是為了替代keypress。當可編輯區域中的文字發生變化時會觸發該事件

注意： 該事件只有chrome和safari瀏覽器支援

<input type="text" id="t">
<script>
  t.addEventListener('textInput', function(e){
    console.log(this.value, e.data)
  }, false)
</script>
 

textInput事件的event物件有一個data屬性，屬性的值就是使用者輸入的字元

textInput與keypress事件有兩點不同

1. textInput事件只會在使用者按下能夠輸入實際字元的鍵時才會被觸發，而keypress事件則在按下那些能夠影響文字顯示的鍵時也會觸發(如回車鍵)

2. 只有可編輯區域會觸發textInput事件，而任何可以獲得焦點的元素都可以觸發keypress事件（如checkbox）

總結一句話，