diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-08-11 23:00:02 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-11 23:00:02 +0900 |
commit | b12303ff65aeff8b54d47fa2d8c6342b72ad6b90 (patch) | |
tree | 3df7049b57dc687df7b15fd79fb0e9075ea31fb6 /files/ja/conflicting | |
parent | bb34d2a08f28118334cb0d41ce53095db72862e0 (diff) | |
download | translated-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.html | 90 |
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"><!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> |