イベント: change, input, cut, copy, paste

データ更新に伴うさまざまなイベントについて説明しましょう。

イベント: change

change イベントは要素の変更が終わったときにトリガされます。

テキストインプットの場合、それはフォーカスを失った時にイベントが発生することを意味します。

例えば、以下のテキストフィールドでタイプしている間 – イベントは起こりません。しかし、例えばボタンのクリックなど、他のなにかにフォーカスを移動させたとき、 – change イベントが発生します:

<input type="text" onchange="alert(this.value)">
<input type="button" value="Button">

他の要素 select, input type=checkbox/radio の場合、選択が変わった直後にトリガされます。

イベント: input

input イベント値が変更されるたびにトリガされます。

例:

<input type="text" id="input"> oninput: <span id="result"></span>
<script>
  input.oninput = function() {
    result.innerHTML = input.value;
  };
</script>

<input> 上でのすべての変更を処理したい場合、このイベントがベストな選択になります。

キーボードイベントとは違い、キーボード操作を伴わないものであっても(マウスを使用してペーストするか、テキストを指示するために音声認識を使用する)、あらゆる値の変更にも対応します。

イベント: cut, copy, paste

これらのイベントは値の カット/コピー/ペースト 時に起こります。

これらは ClipboardEvent クラスに属しており、コピー/ペーストされるデータへのアクセスを提供します。

event.preventDefault（）を使ってアクションを中止することもできます。

例えば、下のコードはこのようなすべてのイベントを防ぎ、我々が何をカット/コピー/ペーストしようとしているかを表示します。:

<input type="text" id="input">
<script>
  input.oncut = input.oncopy = input.onpaste = function(event) {
    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
    return false;
  };
</script>

技術的には、なんでもコピー/ペーストすることが出来ます。例えば、OSのファイルマネージャでコピーや保管ができ、それを貼り付けることができます。

仕様に、さまざまなデータ型で動作し、クリップボードへの読み書きを行うためのメソッドの一覧があります。

しかし、クリップボードは OS レベルの “グローバル” なものです。ほとんどのブラウザでは、安全のために特定のユーザ操作の範囲でのみクリップボードへの読み書きをすることができます。また、Firefoxを除いてすべてのブラウザで “カスタム” のクリップボードイベントを作成することは禁じられています。

サマリ

データ変更のイベント: