HTML5で追加になったEventハンドラを一覧にしました
HTML5で新しく定義されたイベント（EventHandler）を調査したついでに、リスト化しました。まずはWindow Eventのみ公開いたします。 その他にもマウスイベント、キーボードイベント、フォームイベント、メディアイベントがあります。その他のイベントは追って公開いたします。
イベントハンドラは 「W3C Candidate Recommendation 29 April 2014」 のリストと、Device APIs Working Groupを参考にしています。
イベントの登録について
イベントはaddEventListenerで登録をするか、
target.addEventListener(type, listener [, useCapture]);
e.g)
window.addEventListener('onerror', function(){
alert('エラー'); }, false);
これまでの通り、下記のように追加することができます。
e.g) <body onerror="alert('エラー')">
e.g)
window.onerror= function(msg, url, line){
alert('('+ line + ')'+ msg);
}
デモページ
JS Eventデモページより実際の動作を確認ください
Window Event Attributes
- onafterprint(印刷された後に実行される)
<body onafterprint="alert('プリントしました')" > - onbeforeprint(印刷する前に実行される)
<body onafterprint="alert('プリントします')" > - onbeforeunload(ブラウザのアンロード前に実行される)
<body onbeforeunload="alert('ブラウザをアンロードします')" > - onerror(何らかのエラーが出たときに実行される)
window.onerror= function(msg, url, line){ alert('('+ line + ')'+ msg); } - onhaschange(ドキュメントが変更されたときに実行される)
<body onhaschange="alert('ドキュメントが変更されました')" > - onmessage(ユーザーがcross-documentメッセージかWorkerからpostMessageを送るときに実行される)
var w; function startWorker(){ if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("./demo_workers.js");} w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; }else{document.getElementById("result").innerHTML="Error";} } //workerの終了 function stopWorker(){ w.terminate();} - onoffline(ネットワークがオフラインになったときに実行される)
<body onoffline="alert('ネットワークがオフラインになりました')" > - ononline(ネットワークがオンラインになったときに実行される)
<body ononline="alert('ネットワークがオンラインになりました')" > - onpageshow(ページが表示されたときに実行される)
<body onpageshow="alert('ページを表示しました')" > - onpagehide(ページが非表示になったときに実行される)
<body onpagehide="alert('ページが非表示になりました')" > - onpopstate(Windowのヒストリーが変更されたとき)
window.onpopstate = function() { alert('onpopstate：historyが変更されました'); }; function change_history(){ history.back(); } <input type="button" onclick="change_history()" value="historyを変更する" /> - onredo(このイベントハンドラは仕様書から削除されました)
- onresize(ブラウザがリサイズしたときにに実行される)
window.onresize = function(event){ //リサイズ後のウィンドウサイズを取得 console.log('Height:' +event.currentTarget.outerHeight); console.log('Width:' +event.currentTarget.outerWidth); } - onstorage(Web Storageエリアに更新があった場合に実行される)
window.onstorage = function(event){ alert('key=' + event.key + 'newValue=' +event.newValue); } - onundo(このイベントハンドラは仕様書から削除されました)
Device APIs
- ondevicelight(環境光を取得し実行される)
window.ondevicelight = function(event){ console.log('lux=' + event.value); } - ondeviceproximity(物体とデバイスとの距離を取得し実行される)
未確認
- ontemperature(周囲温度のレベルを取得し実行される)
未確認（Unofficial Draft）
- chargingchange(Battery Status API)
onlevelchange(Battery Status API)
バッテリーの残量など取得する
navigator.battery.addEventListener('levelchange', function () { console.log(navigator.battery.level); }
ブラウザの対応確認
上記にあげたイベントですが、実際の案件で使用するにはブラウザ側の未対応が多く、まだ難しそうですよね。
ブラウザの対応状況は下記のサイトなどで確認ください。
http://www.quirksmode.org/dom/events/
http://caniuse.com/
http://help.dottoro.com/larrqqck.php
最後に
HTML5からイベントの種類が格段に増え、できることの幅が広がりましたね。
特にDevice APIはまだまだ確認できない項目が多くありましたが、これらが実際に使えるようになるともっとできることの幅が広がりそうで楽しみです。
Facebook comments