inputコントロールvalue値の動的変化をリアルタイムで監視するイベント

ディレクトリ[1]input[2]propertychange[3]互換処理
前の話
HTML 5はinputコントロールに多くのtype属性を追加し、inputコントロールの応用シーンを大幅に追加した.1つはtype="range"のinputコントロールで、カーソルをドラッグしてvalue値を変更できますが、IE 10+ブラウザを除いてすべてのブラウザがリアルタイムで表示できるわけではありません.
value値を変更するイベントといえば、まずchangeイベントが考えられるが、changeイベントのトリガ条件はフォーカスを失い、value値が変更されることである.カーソルドラッグはフォーカスを失いませんでした.したがって、changeイベントは目的を達成することはできません.
[注意]IE 10+ブラウザではchangeイベントの扱い方が異なります
 
inputイベント
HTML 5には、入力ボックスの内容が変化するとすぐにトリガーされるinputイベントが追加されましたが、javascriptでvalueを変更するとトリガーされません
[注]このイベントIE 8-およびIE 10+ブラウザはサポートされていません

<input type="range" id="input"><span id="data"></span>
<script>
    input.oninput = function(){
        data.innerHTML = this.value;
    }
</script>

propertychangeイベント
IEにはpropertychangeイベントという固有イベントがあり、disable="true"を設定すると失効する.propertychangeトリガ関数にはデフォルトパラメータが1つしかなく、トリガ可能なすべてのプロパティの集合です.このイベントは、オブジェクトが任意のプロパティを変更するとトリガーされます.
[注意]IE 11ブラウザはサポートされていません

<input type="range" id="input"><span id="data"></span>
<script>
    input.onpropertychange = function(){
        data.innerHTML = this.value;
    }
</script>

互換性のある処理
IE 11はvalue変化値をリアルタイムで表示できるが、value変化後の最終値は表示できない.IE 10+ブラウザはchangeイベントの処理が他のブラウザと一致せず、フォーカスを失うことなくchangeイベントをトリガーできるため、inputコントロールvalue値の動的変化をリアルタイムでモニタする互換書き方は

<input type="range" id="input"><span id="data"></span>
<script>
    input.onpropertychange = input.oninput = input.onchange = function(){
        data.innerHTML = this.value;
    }
</script>