From 43a5cac2eff22c21071800e13bef12af9d3a37d0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 13:12:08 +0100 Subject: unslug zh-tw: move --- .../web/guide/html/event_attributes/index.html | 85 ---------------------- 1 file changed, 85 deletions(-) delete mode 100644 files/zh-tw/web/guide/html/event_attributes/index.html (limited to 'files/zh-tw/web/guide/html') diff --git a/files/zh-tw/web/guide/html/event_attributes/index.html b/files/zh-tw/web/guide/html/event_attributes/index.html deleted file mode 100644 index 102e9cd314..0000000000 --- a/files/zh-tw/web/guide/html/event_attributes/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Event attributes -slug: Web/Guide/HTML/Event_attributes -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 ---- -

每一個 HTML 元素都可以放置事件屬性，以藉此於事件發生時能執行 JavaScripte 程式。事件屬性的名稱都有一個前綴「on」，例如當使用者點選元素時要執行指定的 JavaScript，可以使用 onclick 屬性並把要執行的 JavaScript 當成屬性值。

- -

In the JavaScript code executed in response to the event, this is bound to the HTML element and the {{domxref("Event")}} object can be reached using the event variable in the scope of the attribute.

- -
-

Warning: These attributes should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the {{domxref("Window")}} object, polluting the global namespace.

-
- -

While these attributes can at times be attractively easy to use, you should avoid using them. Instead, use the {{domxref("EventTarget.addEventListener()")}} function to add a listener for the event.

- -

Event attributes can be blocked by using Content Security Policy which if used, blocks all inline scripts unless the 'unsafe-inline' keyword is used.

- -

Example using event attributes

- -

This example appends text to an element each time time the {{HTMLElement("div")}} is clicked.

- -
-

Note: This is an example of how not to do things, using one of these attributes.

-
- -
<!doctype html>
-<html>
-  <head>
-    <title>Event Attribute Example</title>
-    <script>
-      function doSomething() {
-        document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>";
-      }
-    </script>
-  </head>
-  <body>
-    <div onclick="doSomething();">Click me!</div>
-    <div id="thanks"></div>
-  </body>
-</html>
-
- -

Try this example below:

- -

{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}

- -

Example using event listeners

- -

Instead, you should use {{domxref("EventTarget.addEventListener()")}}, as shown here:

- -
<!doctype html>
-<html>
-  <head>
-    <title>Event Attribute Example</title>
-    <script>
-      function doSomething() {
-        document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>";
-      }
-
-      // Called when the page is done loading; this is where we do any setup we need,
-      // such as creating event listeners for the elements in the page.
-
-      function setup() {
-        document.getElementById("click").addEventListener("click", doSomething, true);
-      }
-
-      // Install an event handler on the window to receive the "load" event, which
-      // indicates that the document has finished loading into the window.
-
-      window.addEventListener("load", setup, true);
-    </script>
-  </head>
-  <body>
-    <div id="click">Click me!</div>
-    <div id="thanks"></div>
-  </body>
-</html>
- -

You can see this in action below:

- -

{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}

- - -- cgit v1.2.3-54-g00ecf