From b12303ff65aeff8b54d47fa2d8c6342b72ad6b90 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 11 Aug 2021 23:00:02 +0900 Subject: conflicting/Learn 以下を削除 (#1821) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 正規版の文書で内容が充分であると思われるため、 conflicting 版は削除 --- files/ja/_redirects.txt | 2 +- files/ja/_wikihistory.json | 9 --- .../javascript/building_blocks/events/index.html | 90 ---------------------- 3 files changed, 1 insertion(+), 100 deletions(-) delete mode 100644 files/ja/conflicting/learn/javascript/building_blocks/events/index.html diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 38381590d0..39320f3ebb 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -4068,7 +4068,7 @@ /ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas /ja/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas /ja/docs/Web/Guide/HTML/Canvas_tutorial/Transformations /ja/docs/Web/API/Canvas_API/Tutorial/Transformations /ja/docs/Web/Guide/HTML/Canvas_tutorial/Using_images /ja/docs/Web/API/Canvas_API/Tutorial/Using_images -/ja/docs/Web/Guide/HTML/Event_attributes /ja/docs/conflicting/Learn/JavaScript/Building_blocks/Events +/ja/docs/Web/Guide/HTML/Event_attributes /ja/docs/Learn/JavaScript/Building_blocks/Events /ja/docs/Web/Guide/HTML/Forms /ja/docs/Learn/Forms /ja/docs/Web/Guide/HTML/Forms/Data_form_validation /ja/docs/Learn/Forms/Form_validation /ja/docs/Web/Guide/HTML/Forms/HTML_forms_in_legacy_browsers /ja/docs/Learn/Forms/HTML_forms_in_legacy_browsers diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index f232dca527..e7ec09ede2 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48375,15 +48375,6 @@ "silverskyvicto" ] }, - "conflicting/Learn/JavaScript/Building_blocks/Events": { - "modified": "2019-11-20T21:35:36.010Z", - "contributors": [ - "wbamberg", - "dskmori", - "yamaguchi-takayuki", - "mikamikuh" - ] - }, "conflicting/MDN/Yari": { "modified": "2020-08-13T21:26:07.304Z", "contributors": [ 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 ---- -

すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を onclick 属性の中に書きます。

- -

イベントの応答として JavaScript のコードが実行された場合、this スコープは HTML 要素となり、このスコープ内にある event 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。

- -
-

警告: これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。

-
- -

これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。

- -

この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックするコンテンツ・セキュリティ・ポリシーを使うことよって ブロックされる可能性があります。

- -

Event 属性の使用例

- -

この例は {{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', '', '', '') }}

- -- cgit v1.2.3-54-g00ecf