Prerequisites: |
@@ -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.
-
+
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>
-
-
button { margin: 10px };
-
+button { margin: 10px };
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>
-
-
div {
+div {
margin-bottom: 10px;
}
-
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
- - {{ event("touchstart") }}
+ - {{domxref("Element/touchstart_event", "touchstart")}}
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
-
+
Specification |
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:
touchstart
@@ -62,5 +62,5 @@
diff --git a/files/en-us/web/api/touch_events/using_touch_events/index.html b/files/en-us/web/api/touch_events/using_touch_events/index.html
index afd6b925e78ad42..f40e2575a207767 100644
--- a/files/en-us/web/api/touch_events/using_touch_events/index.html
+++ b/files/en-us/web/api/touch_events/using_touch_events/index.html
@@ -17,7 +17,7 @@ Interfaces
Touch events consist of three interfaces ({{domxref("Touch")}}, {{domxref("TouchEvent")}} and {{domxref("TouchList")}}) and the following event types:
- - {{event("touchstart")}} - fired when a touch point is placed on the touch surface.
+ - {{domxref("Document/touchstart_event", "touchstart")}} - fired when a touch point is placed on the touch surface.
- {{event("touchmove")}} - fired when a touch point is moved along the touch surface.
- {{event("touchend")}} - fired when a touch point is removed from the touch surface.
- {{event("touchcancel")}} - fired when a touch point has been disrupted in an implementation-specific manner (for example, too many touch points are created).
@@ -34,7 +34,7 @@ Interfaces
- {{domxref("TouchEvent.targetTouches","targetTouches")}} - a list of the touch points on the target DOM element.
- {{domxref("TouchEvent.changedTouches","changedTouches")}} - a list of the touch points whose items depend on the associated event type:
- - For the {{event("touchstart")}} event, it is a list of the touch points that became active with the current event.
+ - For the {{domxref("Document/touchstart_event", "touchstart")}} event, it is a list of the touch points that became active with the current event.
- For the {{event("touchmove")}} event, it is a list of the touch points that have changed since the last event.
- For the {{event("touchend")}} event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface).
@@ -47,7 +47,7 @@ From interfaces to gestures
An application may consider different factors when defining the semantics of a gesture. For instance, the distance a touch point traveled from its starting location to its location when the touch ended. Another potential factor is time; for example, the time elapsed between the touch's start and the touch's end, or the time lapse between two consecutive taps intended to create a double-tap gesture. The directionality of a swipe (for example left to right, right to left, etc.) is another factor to consider.
-The touch list(s) an application uses depends on the semantics of the application's gestures. For example, if an application supports a single touch (tap) on one element, it would use the {{domxref("TouchEvent.targetTouches","targetTouches")}} list in the {{event("touchstart")}} event handler to process the touch point in an application-specific manner. If an application supports two-finger swipe for any two touch points, it will use the {{domxref("TouchEvent.changedTouches","changedTouches")}} list in the {{event("touchmove")}} event handler to determine if two touch points had moved and then implement the semantics of that gesture in an application-specific manner.
+The touch list(s) an application uses depends on the semantics of the application's gestures. For example, if an application supports a single touch (tap) on one element, it would use the {{domxref("TouchEvent.targetTouches","targetTouches")}} list in the {{domxref("Document/touchstart_event", "touchstart")}} event handler to process the touch point in an application-specific manner. If an application supports two-finger swipe for any two touch points, it will use the {{domxref("TouchEvent.changedTouches","changedTouches")}} list in the {{event("touchmove")}} event handler to determine if two touch points had moved and then implement the semantics of that gesture in an application-specific manner.
Browsers typically dispatch emulated mouse and click events when there is only a single active touch point. Multi-touch interactions involving two or more active touch points will usually only generate touch events. To prevent the emulated mouse events from being sent, use the {{domxref("Event.preventDefault()","preventDefault()")}} method in the touch event handlers. For more information about the interaction between mouse and touch events, see {{domxref("Touch_events.Supporting_both_TouchEvent_and_MouseEvent", "Supporting both TouchEvent and MouseEvent")}}.
@@ -106,7 +106,7 @@ Best practices
- Minimize the amount of work that is done in the touch handlers.
- Add the touch point handlers to the specific target element (rather than the entire document or nodes higher up in the document tree).
- - Add {{event("touchmove")}}, {{event("touchend")}} and {{event("touchcancel")}} event handlers within the {{event("touchstart")}}.
+ - Add {{event("touchmove")}}, {{event("touchend")}} and {{event("touchcancel")}} event handlers within the {{domxref("Document/touchstart_event", "touchstart")}}.
- The target touch element or node should be large enough to accommodate a finger touch. If the target area is too small, touching it could result in firing other events for adjacent elements.