From c21e639b5476db0f15eb563ec61876862c1c01df Mon Sep 17 00:00:00 2001 From: Anil Seervi Date: Sun, 8 Aug 2021 20:37:38 +0530 Subject: [PATCH] Update formdata and touchstart macros (#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 --- .../javascript/building_blocks/events/index.html | 14 +++++--------- files/en-us/web/api/formdata/formdata/index.html | 4 ++-- files/en-us/web/api/globaleventhandlers/index.html | 8 ++++---- .../api/globaleventhandlers/onformdata/index.html | 2 +- .../globaleventhandlers/ontouchstart/index.html | 4 ++-- files/en-us/web/api/touch/radiusx/index.html | 2 +- files/en-us/web/api/touch_events/index.html | 8 ++++---- .../index.html | 6 +++--- .../api/touch_events/using_touch_events/index.html | 8 ++++---- 9 files changed, 26 insertions(+), 30 deletions(-) diff --git a/files/en-us/learn/javascript/building_blocks/events/index.html b/files/en-us/learn/javascript/building_blocks/events/index.html index 63af1c6c1c32643..4a9b15a8c91c256 100644 --- a/files/en-us/learn/javascript/building_blocks/events/index.html +++ b/files/en-us/learn/javascript/building_blocks/events/index.html @@ -18,7 +18,7 @@

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.

- +
@@ -35,7 +35,7 @@

A series of fortunate events

As mentioned above, events 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.

-

+

Image displaying signal for plane to take-off

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:

@@ -64,9 +64,7 @@

A simple example

<button>Change color</button>
- +

The JavaScript looks like so:

@@ -95,7 +93,7 @@

It's not just web pages

For example, Node.js is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The Node.js event model 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 on() to register an event listener, and once() to register an event listener that unregisters after it has run once. The HTTP connect event docs provide a good example.

-

You can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called WebExtensions. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as onMessage rather than onmessage), and need to be combined with the addListener function. See the runtime.onMessage page for an example.

+

You can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called WebExtensions. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as onMessage rather than onmessage), and need to be combined with the addListener function. See the runtime.onMessage page for an example.

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.

@@ -374,12 +372,10 @@

Preventing default behavior

</form> <p></p> -

Now some JavaScript — here we implement a very simple check inside an onsubmit 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 preventDefault() 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:

diff --git a/files/en-us/web/api/formdata/formdata/index.html b/files/en-us/web/api/formdata/formdata/index.html index d65dd9376529d78..92d03dcc3b9edb1 100644 --- a/files/en-us/web/api/formdata/formdata/index.html +++ b/files/en-us/web/api/formdata/formdata/index.html @@ -20,7 +20,7 @@

Syntax

-
var formData = new FormData(form)
+
new FormData(form)

Parameters

@@ -31,7 +31,7 @@

Parameters

Example

-

The following line creates an empty FormData object:

+

The following line creates an empty {{domxref("FormData")}} object:

var formData = new FormData(); // Currently empty
diff --git a/files/en-us/web/api/globaleventhandlers/index.html b/files/en-us/web/api/globaleventhandlers/index.html index 36763a33630ace7..564b1dd91655d45 100644 --- a/files/en-us/web/api/globaleventhandlers/index.html +++ b/files/en-us/web/api/globaleventhandlers/index.html @@ -12,7 +12,7 @@ ---
{{ApiRef("HTML DOM")}}
-

The GlobalEventHandlers 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.

+

The GlobalEventHandlers 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.

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

@@ -43,7 +43,7 @@

Event handlers

{{domxref("GlobalEventHandlers.onblur")}}
Is an event handler representing the code to be called when the {{event("blur")}} event is raised.
{{domxref("GlobalEventHandlers.onerror")}}
-
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
Is an event handler representing the code to be called when the {{event("error")}} event is raised.
{{domxref("GlobalEventHandlers.onfocus")}}
Is an event handler representing the code to be called when the {{event("focus")}} event is raised.
{{domxref("GlobalEventHandlers.oncancel")}}
@@ -87,7 +87,7 @@

Event handlers

{{domxref("GlobalEventHandlers.onended")}}
Is an event handler representing the code to be called when the {{event("ended")}} event is raised.
{{domxref("GlobalEventHandlers.onformdata")}}
-
Is an event handler for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.
+
Is an event handler for processing {{domxref("HTMLFormElement/formdata_event", "formdata")}} events, fired after the entry list representing the form's data is constructed.
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
Is an event handler representing the code to be called when the {{event("gotpointercapture")}} event type is raised.
{{domxref("GlobalEventHandlers.oninput")}}
@@ -195,7 +195,7 @@

Event handlers

{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
Is an event handler representing the code to be called when the {{event("touchmove")}} event is raised.
{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
-
Is an event handler representing the code to be called when the {{event("touchstart")}} event is raised.
+
Is an event handler representing the code to be called when the {{domxref("Element/touchstart_event", "touchstart")}} event is raised.
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
An event handler called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
{{domxref("GlobalEventHandlers.ontransitionend")}}
diff --git a/files/en-us/web/api/globaleventhandlers/onformdata/index.html b/files/en-us/web/api/globaleventhandlers/onformdata/index.html index bf98ccfec3b7027..7932fc543ad41da 100644 --- a/files/en-us/web/api/globaleventhandlers/onformdata/index.html +++ b/files/en-us/web/api/globaleventhandlers/onformdata/index.html @@ -15,7 +15,7 @@

The onformdata property of the {{domxref("GlobalEventHandlers")}} mixin is the event handler 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. onformdata is available on {{domxref("HTMLFormElement")}}.

diff --git a/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html b/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html index 678f6860ab0ee48..fe393e4eea91ff6 100644 --- a/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html @@ -15,7 +15,7 @@

The ontouchstart property of the {{domxref("GlobalEventHandlers")}} mixin is an event handler that - processes {{event("touchstart")}} events.

+ processes {{domxref("Element/touchstart_event", "touchstart")}} events.

Syntax

@@ -63,5 +63,5 @@

Browser compatibility

See also

diff --git a/files/en-us/web/api/touch/radiusx/index.html b/files/en-us/web/api/touch/radiusx/index.html index 0ca34df27854207..bb8e5650c340852 100644 --- a/files/en-us/web/api/touch/radiusx/index.html +++ b/files/en-us/web/api/touch/radiusx/index.html @@ -38,7 +38,7 @@

Example

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 indicated 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 perpendicular to that indicated by {{domxref("Touch.rotationAngle")}}. The {{domxref("Touch.rotationAngle")}} is the angle (in degrees) that the ellipse described by radiusX and radiusY is rotated clockwise about its center.

-

The following simple code snippet, registers a single handler for the {{event("touchstart")}}, {{event("touchmove")}} and {{event("touchend")}} events. When the src element is touched, the element's width and height will be calculate based on the touch point's radiusX and radiusY values and the element will then be rotated using the touch point's rotationAngle.

+

The following simple code snippet, registers a single handler for the {{domxref("Document/touchstart_event", "touchstart")}}, {{event("touchmove")}} and {{event("touchend")}} events. When the src element is touched, the element's width and height will be calculate based on the touch point's radiusX and radiusY values and the element will then be rotated using the touch point's rotationAngle.

<div id="src"> ... </div>
diff --git a/files/en-us/web/api/touch_events/index.html b/files/en-us/web/api/touch_events/index.html index 8a05b77c93f0e42..1663efb2cf868ae 100644 --- a/files/en-us/web/api/touch_events/index.html +++ b/files/en-us/web/api/touch_events/index.html @@ -12,7 +12,7 @@ ---

{{DefaultAPISidebar("Touch Events")}}

-

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.

+

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.

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.

@@ -76,7 +76,7 @@

Tracking new touches

var ongoingTouches = [];
-

When a {{Event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the handleStart() function below is called.

+

When a {{domxref("Element/touchstart_event", "touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the handleStart() function below is called.

function handleStart(evt) {
   evt.preventDefault();
@@ -256,7 +256,7 @@ 
Additional tips

 
 
Handling clicks

 
-
Since calling preventDefault() 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 preventDefault() on touchmove rather than touchstart. 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.)

+
Since calling preventDefault() 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 preventDefault() on touchmove rather than touchstart. 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.)

 
 
function onTouch(evt) {
   evt.preventDefault();
@@ -295,7 +295,7 @@ 
Calling preventDefault()
 
 
Specifications

 
-
Prerequisites:
+
diff --git a/files/en-us/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/en-us/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html index 3f15d324a3a72c9..5a923930b3d0798 100644 --- a/files/en-us/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html +++ b/files/en-us/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html @@ -16,7 +16,7 @@

Event firing

The touch events standard defines a few browser requirements regarding touch and mouse interaction (see the Interaction with Mouse Events and click section for details), noting the browser may fire both touch events and mouse events in response to the same user input. This section describes the requirement that may affect an application.

-

If the browser fires both touch and mouse events because of a single user input, the browser must 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.

+

If the browser fires both touch and mouse events because of a single user input, the browser must 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.

Here is a code snippet of the {{event("touchmove")}} event handler calling preventDefault().

@@ -41,7 +41,7 @@

Event order

  • click
    • -

    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:

    +

    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:

    Specification