jQuery逆引きリファレンス
イベントメソッドで提供されないイベントを処理するには？（on）
onメソッドを利用して、jQueryが標準で対応していないJavaScriptイベントにアクセスする方法を説明する。
別稿の表「jQuery標準で利用可能なイベント」を見ても分かるように、jQueryはよく利用するJavaScriptのイベントに広く対応しています。が、もちろん全てのイベントに対応しているわけではありません。jQueryが標準で対応していない（＝イベントメソッドとして提供されない）イベントにアクセスするには、onメソッドを利用しなければなりません。
［構文］onメソッド
$(セレクター式).on('イベント名', function(e) {
……イベントの発生に応じて呼び出される処理……
});
以下は、別稿「イベントに応じて処理を実行するには？」のサンプルをonメソッドで書き換えた例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="btn">時刻表示</button>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// ボタンクリックで時刻を更新
$('#btn').on('click', function(e) {
$(this).text((new Date()).toLocaleString());
});
});
</script>
</body>
</html>
|
このように、標準的なイベントメソッドは全てonメソッドで置き換え可能です。＜イベント名＞メソッドは、onメソッドのショートカットといってもよいでしょう。
複数のイベントリスナーをまとめて設定する
また、onメソッドでは「イベント名: イベントリスナー,……」のハッシュ形式で複数のイベントリスナーをまとめて設定することもできます。例えば以下は、ファイル選択ボックスで指定されたテキストファイルの内容を読み込み、表示する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
<label for="file">ファイル：</label>
<input id="file" name="file" type="file" />
</form>
<div id="result" style="margin-top:10px; padding:10px; width:500px; border-top:double 3px #000"></div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// ファイルを選択したタイミングでその内容を読み込み
$('#file').change(function(e) {
if (window.File) {
// 複数選択された場合も先頭の1つだけを取得
var input = $('#file').get(0).files[0];
var reader = new FileReader();
$(reader).on({
// ファイルをロードしたタイミングで、その内容をページに反映
'load': function(e) {
$('#result').html(this.result.replace(/(\n|\r|\r\n)/g, '<br />'));
},
// 読み込みエラーがあった場合に、エラーメッセージを表示
'error': function(e) {
var errors = [
'',
'ファイルが存在しません。',
'ファイルへのアクセス権限がありません。',
'ファイルの読み込みが中断されました。',
'読み込みエラーが発生しました。',
'ファイルサイズがオーバーしています。'
];
$('#result').html(errors[reader.error.code]);
}
});
// ファイルの読み込みを開始
reader.readAsText(input, 'SJIS');
}
});
});
</script>
</body>
</html>
|
FileReaderはHTML5で追加されたオブジェクトで、テキストファイル／バイナリファイルを問わず、ファイルの内容を読み込む手段を提供します。FileReaderそのものの詳細は、別稿「JavaScriptでファイル操作！？ File APIを使いこなそう」などを参照してください。
上の例では、FileReaderオブジェクトの以下のイベントをonメソッドで設定しています。
（1）loadイベント
readAsTextメソッドで、テキストファイルを読み込んだ後の処理を表します。ここでは、jQueryのhtmlメソッドでテキストファイルの内容をページに反映させています。
（2）errorイベント
ファイルの読み込みに失敗した場合の処理を表します。配列errorsには、エラーコード1～5に対応するエラーメッセージを用意しておくことで、あとはerror.codeプロパティの値に応じてエラーメッセージを表示できます。
［Note］jQueryオブジェクトに変換する
$()関数を利用することで、標準のJavaScriptオブジェクトをjQueryオブジェクトに変換できます。例えば、本文リストの太字部分に注目です。ここでは、HTML5のFileReaderオブジェクトを$()関数でjQueryオブジェクトに変換することで、onメソッドでイベントリスナーを設定できるようになります。
API：.on() カテゴリ：Events（イベント） > Event Handler Attachment
API：jQuery()／$() カテゴリ：Core（コア）
※以下では、本稿の前後を合わせて5回分（第14回～第18回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
14. 配列の内容を検索するには？（$.inArray）
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
16. 【現在、表示中】≫ イベントメソッドで提供されないイベントを処理するには？（on）
onメソッドを利用して、jQueryが標準で対応していないJavaScriptイベントにアクセスする方法を説明する。
17. 文書ツリー上に存在しない要素に対してイベントリスナーを追加するには？（on）
onメソッドを利用して、動的に新規追加された要素にイベントリスナーを設置する方法を解説。またjQuery 1.6以前のbind／live／delegateメソッドをonメソッドに置き換える方法も説明する。
