blob: 0c2047bce59b8a8d31adf996d5cba01b1e5ec6dc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
---
title: Event 属性
slug: Web/Guide/HTML/Event_attributes
tags:
- Beginner
- Guide
- HTML
- Intermediate
- JavaScript
translation_of: >-
Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these
translation_of_original: Web/Guide/HTML/Event_attributes
---
<p><span class="seoSummary">すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。</span>例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を <code>onclick</code> 属性の中に書きます。</p>
<p>イベントの応答として JavaScript のコードが実行された場合、<code>this</code> スコープは HTML 要素となり、このスコープ内にある <code>event</code> 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。</p>
<div class="warning">
<p><strong>警告:</strong> これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。</p>
</div>
<p>これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。</p>
<p>この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックする<a href="/docs/Security/CSP/Introducing_Content_Security_Policy">コンテンツ・セキュリティ・ポリシー</a>を使うことよって ブロックされる可能性があります。</p>
<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Event 属性の使用例</h2>
<p>この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。</p>
<div class="note">
<p><strong>注意:</strong> これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。</p>
</div>
<pre class="brush: html"><!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>
</pre>
<p>この例を実行してみてください:</p>
<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p>
<h2 id="Example_using_event_listeners" name="Example_using_event_listeners">イベントリスナーの使用例</h2>
<p>代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。</p>
<pre class="brush: html"><!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></pre>
<p>この動作を以下の例から確認できます:</p>
<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p>
<section id="Quick_Links"><ol><li><a href="/ja/docs/Web/API/Event" title="Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。">Event</a></li><li><a href="/ja/docs/Web/API/EventTarget" title="EventTarget は、イベントを受け取り、そのためのリスナーを持つ可能性があるオブジェクトにより実装されたインターフェースです。">EventTarget</a></li><li><a href="/ja/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section>
|
