この記事は編集レビューを必要としています。ぜひご協力ください。
全てのHTML要素は、特定のイベントが発生したときのJavaScriptの実行が許可された属性の集合から成り立ちます。これらはEvent属性と呼ばれ、その属性名には"on"の接頭辞が付きます。例えば、ユーザーが要素をクリックしたときにJavaScriptを実行するために、JavaScriptをonclick属性の中に書きます。
イベントの応答としてJavaScriptのコードが実行された場合、thisスコープはHTML要素となり、このスコープ内にあるevent変数を通してEvent オブジェクトにアクセスすることができます。
注意: これらの属性を使うことは避けるべきです。これはHTMLを巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event属性の使い方はほとんどの場合、Windowオブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。
これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為にはEventTarget.addEventListener()関数を使ってください。
このEvent属性は、'unsafe-inline'キーワードを使わない限り全てのインラインスクリプトをブロックするコンテンツ・セキュリティ・ポリシーを使うことよって ブロックされる可能性があります。
Event属性の使用例
この例は<div>がクリックされる度にテキストを要素に追加します。
注意: これは、こうするなという例ではなく、これらの属性の使い方の例です。
<!doctype html>
<html>
<head>
<title>Event属性の例</title>
<script>
function doSomething() {
document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>";
}
</script>
</head>
<body>
<div onclick="doSomething();">クリック!</div>
<div id="thanks"></div>
</body>
</html>
この例を実行してみてください:
イベントリスナーの使用例
代わりに、以下に示すようにEventTarget.addEventListener()を使うべきです。
<!doctype html>
<html>
<head>
<title>Event属性の例</title>
<script>
function doSomething() {
document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>";
}
// ページのロードが完了した時に呼ばれる;
// ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です
function setup() {
document.getElementById("click").addEventListener("click", doSomething, true);
}
// ウィンドウ内のドキュメントのロードが完了したことを知る為の、
// "load"イベントを受け取る為にイベントリスナをwindowオブジェクトに追加する
window.addEventListener("load", setup, true);
</script>
</head>
<body>
<div id="click">クリック!</div>
<div id="thanks"></div>
</body>
</html>
この動作を以下の例から確認できます: