すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を onclick 属性の中に書きます。
イベントの応答として JavaScript のコードが実行された場合、this スコープは HTML 要素となり、このスコープ内にある event 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。
警告: これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。
これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。
この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックするコンテンツ・セキュリティ・ポリシーを使うことよって ブロックされる可能性があります。
この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。
注意: これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。
<!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>
この例を実行してみてください:
{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}
代わりに、以下に示すように {{domxref("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>
この動作を以下の例から確認できます:
{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}