Update formdata and touchstart macros (mdn#7713)

* Update syntax

* add link and refactor classes

* replace macro

* Update macros

* Fix macro and drop seoSummary

* fix touchstart macro

* fix touchstart macro

* update touchstart macro

* fix touchstart macro

* remove seoSummary class

* http to https

* revert linking to same page

files/en-us/learn/javascript/building_blocks/events/index.html

@@ -18,7 +18,7 @@
 
 <p class="summary">Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box. In this article, we discuss some important concepts surrounding events, and look at how they work in browsers. This won't be an exhaustive study; just what you need to know at this stage.</p>
 
-<table class="learn-box standard-table">
+<table class="learn-box">
  <tbody>
   <tr>
    <th scope="row">Prerequisites:</th>
@@ -35,7 +35,7 @@ <h2 id="A_series_of_fortunate_events">A series of fortunate events</h2>
 
 <p>As mentioned above, <strong>events</strong> are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. For example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. As a result, the plane can safely takeoff.</p>
 
-<p><img alt="" src="mdn-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
+<p><img alt="Image displaying signal for plane to take-off" src="mdn-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>
 
 <p>In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur. For example:</p>
 
@@ -64,9 +64,7 @@ <h3 id="A_simple_example">A simple example</h3>
 
 <pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
 
-<div class="hidden">
-<pre class="brush: css">button { margin: 10px };</pre>
-</div>
+<pre class="brush: css hidden">button { margin: 10px };</pre>
 
 <p>The JavaScript looks like so:</p>
 
@@ -95,7 +93,7 @@ <h3 id="Its_not_just_web_pages">It's not just web pages</h3>
 
 <p>For example, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The <a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like <code>on()</code> to register an event listener, and <code>once()</code> to register an event listener that unregisters after it has run once. The <a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> provide a good example.</p>
 
-<p>You can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as <code>onMessage</code> rather than <code>onmessage</code>), and need to be combined with the <code>addListener</code> function. See the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples"><code>runtime.onMessage</code> page</a> for an example.</p>
+<p>You can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as <code>onMessage</code> rather than <code>onmessage</code>), and need to be combined with the <code>addListener</code> function. See the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#examples"><code>runtime.onMessage</code></a> page for an example.</p>
 
 <p>You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.</p>
 
@@ -374,12 +372,10 @@ <h3 id="Preventing_default_behavior">Preventing default behavior</h3>
 &lt;/form&gt;
 &lt;p&gt;&lt;/p&gt;</pre>
 
-<div class="hidden">
-<pre class="brush: css">div {
+<pre class="brush: css hidden">div {
   margin-bottom: 10px;
 }
 </pre>
-</div>
 
 <p>Now some JavaScript — here we implement a very simple check inside an <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:</p>
 

files/en-us/web/api/formdata/formdata/index.html

@@ -20,7 +20,7 @@
 
 <h2 id="Syntax">Syntax</h2>
 
-<pre class="brush: js">var formData = new FormData(form)</pre>
+<pre class="brush: js">new FormData(form)</pre>
 
 <h3 id="Parameters">Parameters</h3>
 
@@ -31,7 +31,7 @@ <h3 id="Parameters">Parameters</h3>
 
 <h2 id="Example">Example</h2>
 
-<p>The following line creates an empty <code>FormData</code> object:</p>
+<p>The following line creates an empty {{domxref("FormData")}} object:</p>
 
 <pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
 

files/en-us/web/api/globaleventhandlers/index.html

@@ -12,7 +12,7 @@
 ---
 <div>{{ApiRef("HTML DOM")}}</div>
 
-<p><span class="seoSummary">The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}.</span> Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p>
+<p>The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p>
 
 <div class="note">
 <p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p>
@@ -43,7 +43,7 @@ <h3 id="Event_handlers">Event handlers</h3>
  <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
  <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("blur")}} event is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
- <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd>
+ <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("error")}} event is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
  <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("focus")}} event is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
@@ -87,7 +87,7 @@ <h3 id="Event_handlers">Event handlers</h3>
  <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
  <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("ended")}} event is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.onformdata")}}</dt>
- <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.</dd>
+ <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> for processing {{domxref("HTMLFormElement/formdata_event", "formdata")}} events, fired after the entry list representing the form's data is constructed.</dd>
  <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
  <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("gotpointercapture")}} event type is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
@@ -195,7 +195,7 @@ <h3 id="Event_handlers">Event handlers</h3>
  <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
  <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("touchmove")}} event is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
- <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{event("touchstart")}} event is raised.</dd>
+ <dd>Is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> representing the code to be called when the {{domxref("Element/touchstart_event", "touchstart")}} event is raised.</dd>
  <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
  <dd>An <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd>
  <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>

files/en-us/web/api/globaleventhandlers/onformdata/index.html

@@ -15,7 +15,7 @@
 
 <p>The <code><strong>onformdata</strong></code> property of the
   {{domxref("GlobalEventHandlers")}} mixin is the <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> for
-  processing {{event("formdata")}} events, fired after the entry list representing the
+  processing {{domxref("HTMLFormElement/formdata_event", "formdata")}} events, fired after the entry list representing the
   form's data is constructed. This happens when the form is submitted, but can also be
   triggered by the invocation of a {{domxref("FormData.FormData", "FormData()")}}
   constructor. <code>onformdata</code> is available on {{domxref("HTMLFormElement")}}.</p>

files/en-us/web/api/globaleventhandlers/ontouchstart/index.html

@@ -15,7 +15,7 @@
 
 <p>The <code><strong>ontouchstart</strong></code> property of the
   {{domxref("GlobalEventHandlers")}} mixin is an <a href="/en-US/docs/Web/Events/Event_handlers">event handler</a> that
-  processes {{event("touchstart")}} events.</p>
+  processes {{domxref("Element/touchstart_event", "touchstart")}} events.</p>
 
 <h2 id="Syntax">Syntax</h2>
 
@@ -63,5 +63,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
-  <li>{{ event("touchstart") }}</li>
+  <li>{{domxref("Element/touchstart_event", "touchstart")}}</li>
 </ul>

files/en-us/web/api/touch/radiusx/index.html

@@ -38,7 +38,7 @@ <h2 id="Example">Example</h2>
 
 <p>This example illustrates using the {{domxref("Touch")}} interface's {{domxref("Touch.radiusX")}}, {{domxref("Touch.radiusX")}} and {{domxref("Touch.rotationAngle")}} properties. The {{domxref("Touch.radiusX")}} property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis <strong>indicated</strong> by the touch point's {{domxref("Touch.rotationAngle")}}. Likewise, the {{domxref("Touch.radiusY")}} property is the radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis <strong>perpendicular</strong> to that indicated by {{domxref("Touch.rotationAngle")}}. The {{domxref("Touch.rotationAngle")}} is the angle (in degrees) that the ellipse described by <code>radiusX</code> and <code>radiusY</code> is rotated clockwise about its center.</p>
 
-<p>The following simple code snippet, registers a single handler for the {{event("touchstart")}}, {{event("touchmove")}} and {{event("touchend")}} events. When the <code>src</code> element is touched, the element's width and height will be calculate based on the touch point's <code>radiusX</code> and <code>radiusY</code> values and the element will then be rotated using the touch point's <code>rotationAngle</code>.</p>
+<p>The following simple code snippet, registers a single handler for the {{domxref("Document/touchstart_event", "touchstart")}}, {{event("touchmove")}} and {{event("touchend")}} events. When the <code>src</code> element is touched, the element's width and height will be calculate based on the touch point's <code>radiusX</code> and <code>radiusY</code> values and the element will then be rotated using the touch point's <code>rotationAngle</code>.</p>
 
 <pre class="brush: html">&lt;div id="src"&gt; ... &lt;/div&gt;
 </pre>

files/en-us/web/api/touch_events/index.html

@@ -12,7 +12,7 @@
 ---
 <p>{{DefaultAPISidebar("Touch Events")}}</p>
 
-<p><span class="seoSummary">To provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.</span></p>
+<p>To provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.</p>
 
 <p>The touch events interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture. A multi-touch interaction starts when a finger (or stylus) first touches the contact surface. Other fingers may subsequently touch the surface and optionally move across the touch surface. The interaction ends when the fingers are removed from the surface. During this interaction, an application receives touch events during the start, move, and end phases.</p>
 
@@ -76,7 +76,7 @@ <h4 id="Tracking_new_touches">Tracking new touches</h4>
 <pre class="brush: js">var ongoingTouches = [];
 </pre>
 
-<p>When a {{Event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p>
+<p>When a {{domxref("Element/touchstart_event", "touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p>
 
 <pre class="brush: js">function handleStart(evt) {
   evt.preventDefault();
@@ -256,7 +256,7 @@ <h2 id="Additional_tips">Additional tips</h2>
 
 <h3 id="Handling_clicks">Handling clicks</h3>
 
-<p>Since calling <code>preventDefault()</code> on a {{event("touchstart")}} or the first {{domxref("Element/touchmove_event", "touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on <code>touchmove</code> rather than <code>touchstart</code>. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p>
+<p>Since calling <code>preventDefault()</code> on a {{domxref("Element/touchstart_event", "touchstart")}} or the first {{domxref("Element/touchmove_event", "touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on <code>touchmove</code> rather than <code>touchstart</code>. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p>
 
 <pre class="brush: js">function onTouch(evt) {
   evt.preventDefault();
@@ -295,7 +295,7 @@ <h3 id="Calling_preventDefault_only_on_a_second_touch">Calling preventDefault()
 
 <h2 id="Specifications">Specifications</h2>
 
-<table class="standard-table">
+<table>
  <tbody>
   <tr>
    <th scope="col">Specification</th>

files/en-us/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html

@@ -16,7 +16,7 @@ <h2 id="Event_firing">Event firing</h2>
 
 <p>The touch events standard defines a few browser requirements regarding touch and mouse interaction (see the <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> section for details), noting <em>the browser may fire both touch events and mouse events in response to the same user input</em>. This section describes the requirement that may affect an application.</p>
 
-<p>If the browser fires both touch and mouse events because of a single user input, the browser <em>must</em> fire a {{event("touchstart")}} before any mouse events. Consequently, if an application does not want mouse events fired on a specific touch {{domxref("Touch.target","target")}} element, the element's touch event handlers should call {{domxref("Event.preventDefault()","preventDefault()")}} and no additional mouse events will be dispatched.</p>
+<p>If the browser fires both touch and mouse events because of a single user input, the browser <em>must</em> fire a {{domxref("Element/touchstart_event", "touchstart")}} before any mouse events. Consequently, if an application does not want mouse events fired on a specific touch {{domxref("Touch.target","target")}} element, the element's touch event handlers should call {{domxref("Event.preventDefault()","preventDefault()")}} and no additional mouse events will be dispatched.</p>
 
 <p>Here is a code snippet of the {{event("touchmove")}} event handler calling <code>preventDefault()</code>.</p>
 
@@ -41,7 +41,7 @@ <h2 id="Event_order">Event order</h2>
  <li><code>click</code></li>
 </ul>
 
-<p>If the {{event("touchstart")}}, {{event("touchmove")}} or {{event("touchend")}} event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be:</p>
+<p>If the {{domxref("Element/touchstart_event", "touchstart")}}, {{event("touchmove")}} or {{event("touchend")}} event is canceled during an interaction, no mouse or click events will be fired, and the resulting sequence of events would just be:</p>
 
 <ul>
  <li><code>touchstart</code></li>
@@ -62,5 +62,5 @@ <h2 id="Related_topics_and_resources">Related topics and resources</h2>
 <ul>
  <li><a href="/en-US/docs/Web/API/Touch_events">Touch Events Overview</a></li>
  <li><a href="/en-US/docs/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
- <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+ <li><a href="https://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
 </ul>