aboutsummaryrefslogtreecommitdiff
path: root/files/ja/conflicting
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-08-11 23:00:02 +0900
committerGitHub <noreply@github.com>2021-08-11 23:00:02 +0900
commitb12303ff65aeff8b54d47fa2d8c6342b72ad6b90 (patch)
tree3df7049b57dc687df7b15fd79fb0e9075ea31fb6 /files/ja/conflicting
parentbb34d2a08f28118334cb0d41ce53095db72862e0 (diff)
downloadtranslated-content-b12303ff65aeff8b54d47fa2d8c6342b72ad6b90.tar.gz
translated-content-b12303ff65aeff8b54d47fa2d8c6342b72ad6b90.tar.bz2
translated-content-b12303ff65aeff8b54d47fa2d8c6342b72ad6b90.zip
conflicting/Learn 以下を削除 (#1821)
正規版の文書で内容が充分であると思われるため、 conflicting 版は削除
Diffstat (limited to 'files/ja/conflicting')
-rw-r--r--files/ja/conflicting/learn/javascript/building_blocks/events/index.html90
1 files changed, 0 insertions, 90 deletions
diff --git a/files/ja/conflicting/learn/javascript/building_blocks/events/index.html b/files/ja/conflicting/learn/javascript/building_blocks/events/index.html
deleted file mode 100644
index da44d92638..0000000000
--- a/files/ja/conflicting/learn/javascript/building_blocks/events/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Event 属性
-slug: conflicting/Learn/JavaScript/Building_blocks/Events
-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
-original_slug: 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">&lt;!doctype html&gt;
-&lt;html&gt;
- &lt;head&gt;
- &lt;title&gt;Event 属性の例&lt;/title&gt;
- &lt;script&gt;
- function doSomething() {
- document.getElementById("thanks").innerHTML += "&lt;p&gt;クリックしてくれてありがとう!&lt;/p&gt;";
- }
- &lt;/script&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;div onclick="doSomething();"&gt;クリック!&lt;/div&gt;
- &lt;div id="thanks"&gt;&lt;/div&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</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">&lt;!doctype html&gt;
-&lt;html&gt;
- &lt;head&gt;
- &lt;title&gt;Event 属性の例&lt;/title&gt;
- &lt;script&gt;
- function doSomething() {
- document.getElementById("thanks").innerHTML += "&lt;p&gt;クリックしてくれてありがとう!&lt;/p&gt;";
- }
-
- // ページのロードが完了した時に呼ばれる;
- // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。
-
- function setup() {
- document.getElementById("click").addEventListener("click", doSomething, true);
- }
- // ウィンドウ内のドキュメントのロードが完了したことを知る為の、
- // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する
-
- window.addEventListener("load", setup, true);
- &lt;/script&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;div id="click"&gt;クリック!&lt;/div&gt;
- &lt;div id="thanks"&gt;&lt;/div&gt;
- &lt;/body&gt;
-&lt;/html&gt;</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>