input輸入框的事件監聽

主要涉及到的事件有：change， input，propertychange

• 針對IE瀏覽器（IE11測試）：

1. change事件：
   輸入框內容變化且失去焦點，觸發change事件。

    <input type="text" value="4545">

    var input = document.querySelector('input')
    input.addEventListener('change', function(params) {
        console.log('params', params)
    })

值得一提的是從IE9開始，IE已經摒棄了attachEvent用來監聽事件的方法。
通過js代碼修改的input輸入框的value值不會觸發change事件。

    input.setAttribute('value', 1212)

2. propertychange事件
   輸入框內容變化，實時觸發propertychange事件
   在IE9之前使用propertychange事件名，但是IE9以後便統一使用input事件名來實時監聽，所以這裏我們也不做過多研究。

• 針對除IE外的其他瀏覽器（chrome:68.0.3440.106測試）

1. change事件
   跟IE11瀏覽器的測試結果一樣，都是輸入框內容變化且失去焦點的時候會觸發change事件，通過js代碼來改變輸入框的value值不會觸發change事件。
2. input事件

   input.addEventListener('input', function(params) {
       console.log('params', params)
   })

但是如果是通過js代碼來改變input輸入框的value值也不會觸發input事件。

如果想要對js代碼改變輸入框的值進行監聽，可以使用MutationObserver

 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 var input = document.querySelector('input');
  var observer = new MutationObserver(function(mutations) {
      // console.log('mutations',mutations)
      mutations.forEach(function(record) {
          if(record.attributeName == "value"){
              // console.log('record.target',record.target)
              console.log('record.oldValue',record.oldValue)
          }
      });
  });
  observer.observe(input, {
      attributes: true,
      childList: true,
      characterData: true,
      attributeOldValue :true,
      attributeFilter:["value"]//只監聽value屬性,提高性能
  });
  input.setAttribute('value', 1212)
  input.setAttribute('value', 1212)

輸出結果爲：

以上方法對IE11和chrome68.0.3440.106效果相同。可以看到的是，只要設置了input的value值，不管該值是不是和原值相同，即是不是發生了變化，都可以通過MutationObserver的observe方法監聽到，並調用回調函數進行響應處理。
參考：https://www.cnblogs.com/rubylouvre/archive/2012/05/28/2520721.html