input イベントで入力前の値を取得するAPIはありますか

Question

input イベントは右クリックメニューからの貼り付けにも対応した優秀なイベントですが、<input type="text"> で検証してみると value プロパティには入力後の値が入っています。
input イベントハンドラ関数内において入力する一つ手前の値を取得する方法は用意されていないでしょうか。

下記コードで data-* 独自属性に入力前の値を保存しておく事で期待通りの結果を得られますが、同様の機能を標準APIを使う事でよりスマートに実装出来ないか、を探しています。

• input イベントで入力前の値を取得する - JSFiddle

<input id="sample" type="text" name="sample" data-input-before="" value="" />

<script>
'use strict';
document.getElementById('sample').addEventListener('input', function handleInput (event) {
  var input = event.target,
      value = input.value;

  console.log('input-before', input.getAttribute('data-input-before'));
  console.log('input-end', value);
  input.setAttribute('data-input-before', value);

  console.log(event);
  console.log('data' in event, event.data); // false undefined
}, false);
</script>

「UI Events」によれば InputEvent#data が存在すると読めるのですが、Google Chrome ver.54.0.2840.87 m, Firefox ver.49.0.2 共に当該プロパティは存在しませんでした。

• 4.5.1. インタフェース InputEvent - UI Events （日本語訳）
• InputEvent - Web API インターフェイス | MDN

Answer 1

IEを除けばおそらくtargetに対してdatasetプロパティを利用すればいけます
しかしIEを捨てきれないならget/set Attributeでもそれほど違和感ないような気がします

<script>
document.addEventListener('focus', function(e) {
  var t = e.target;
  if(t.id!=="sample") return false;
  t.setAttribute("data-insert-before",t.value);
},true);
document.addEventListener('input', function(e) {
  var t = e.target;
  if(t.id!=="sample") return false;
  var preval=t.getAttribute("data-insert-before");
  console.log(preval);
  t.setAttribute("data-insert-before",t.value);
},false);
</script>
<input id="sample" type="text" name="sample" value="test" />

ちなみにdatasetを利用する場合はハイフンで区切られたdataには
ラクダでアクセスします。

t.dataset.insertBefore=t.value

Comments

[think49]

回答ありがとうございます。
dataset プロパティの存在は認識しています。
yambejp さんが既に指摘したように dataset プロパティ は IE11+ を要求するので、後方互換性の観点から `setAttribute`, `getAttribute` を採用しました。
http://caniuse.com/#feat=dataset
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

質問の本題は「inputイベントハンドラ関数内で入力前の値を取得するAPI」になります。
「入力前の値を対比する標準API」についてはdataset以外にも複数の手段がある事は認識しています(WeakMap、クロージャ、handleEventを利用したthis値のプロパティ等)。