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 --- files/zh-tw/web/guide/dom/index.html | 22 ------ .../web/guide/html/event_attributes/index.html | 85 ---------------------- 2 files changed, 107 deletions(-) delete mode 100644 files/zh-tw/web/guide/dom/index.html delete mode 100644 files/zh-tw/web/guide/html/event_attributes/index.html (limited to 'files/zh-tw/web/guide') diff --git a/files/zh-tw/web/guide/dom/index.html b/files/zh-tw/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/zh-tw/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

-

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

-

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.

-

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

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