Edition for Web Developers — Last Updated 16 January 2024
Various mechanisms can cause author-provided executable code to run in the context of a document. These mechanisms include, but are probably not limited to:
script
elements.javascript:
URLs.addEventListener()
, by explicit event handler content attributes, by
event handler IDL attributes, or otherwise.JavaScript defines the concept of an agent. This section gives the mapping of that language-level concept on to the web platform.
Conceptually, the agent concept is an architecture-independent, idealized "thread" in which JavaScript code runs. Such code can involve multiple globals/realms that can synchronously access each other, and thus needs to run in a single execution thread.
The following types of agents exist on the web platform:
Contains various Window
objects which can potentially reach each other, either
directly or by using document.domain
.
If the encompassing agent cluster's is origin-keyed is true, then
all the Window
objects will be same origin, can reach each other
directly, and document.domain
will no-op.
Two Window
objects that are same origin can be in
different similar-origin window agents, for
instance if they are each in their own browsing context group.
Contains a single DedicatedWorkerGlobalScope
.
Contains a single SharedWorkerGlobalScope
.
Contains a single ServiceWorkerGlobalScope
.
Contains a single WorkletGlobalScope
object.
Although a given worklet can have multiple realms, each such realm needs its own agent, as each realm can be executing code independently and at the same time as the others.
Only shared and dedicated worker agents allow the use of JavaScript Atomics
APIs to
potentially block.
JavaScript also defines the concept of an agent cluster, which this standard maps to the web platform by placing agents appropriately when they are created.
The agent cluster concept is crucial for defining the JavaScript memory model, and
in particular among which agents the backing data of
SharedArrayBuffer
objects can be shared.
Conceptually, the agent cluster concept is an architecture-independent, idealized "process boundary" that groups together multiple "threads" (agents). The agent clusters defined by the specification are generally more restrictive than the actual process boundaries implemented in user agents. By enforcing these idealized divisions at the specification level, we ensure that web developers see interoperable behavior with regard to shared memory, even in the face of varying and changing user agent process models.
Support in all current engines.
self.reportError(e)
Dispatches an error
event at the global object for the
given value e, in the same fashion as an unhandled exception.
In various scenarios, the user agent can report an exception by firing an error
event at the Window
. If this event is not canceled,
then the error is considered not handled, and can be reported to the developer console.
Support in all current engines.
In addition to synchronous runtime script errors, scripts
may experience asynchronous promise rejections, tracked via the unhandledrejection
and rejectionhandled
events.
The resolve a module specifier algorithm is the primary entry point for converting module specifier strings into URLs. When no import maps are involved, it is relatively straightforward, and reduces to resolving a URL-like module specifier.
When there is a non-empty import map present, the behavior is more complex. It checks candidate entries from all applicable module specifier maps, from most-specific to least-specific scopes (falling back to the top-level unscoped imports), and from most-specific to least-specific prefixes.
In the end, if no successful resolution is found via any of the candidate module specifier maps, resolve a module specifier will throw an exception. Thus the result is always either a URL or a thrown exception.
An import map allows control over module specifier resolution. Import maps
are delivered via inline script
elements with their type
attribute set to "importmap
", and
with their child text content containing a JSON representation of the import
map.
Only one import map is processed per Document
. After the first import map is
seen, others will be ignored, with their corresponding script
elements generating
error
events. Similarly, once any modules have been imported,
e.g., via import()
expressions or script
elements with their type
attribute set to "module
", further
import maps will be ignored.
These restrictions, as well as the lack of support for external import maps, are in place to keep the initial version of the feature simple. They might be lifted over time as implementer bandwidth allows.
The simplest use of import maps is to globally remap a bare module specifier:
{
"imports" : {
"moment" : "/node_modules/moment/src/moment.js"
}
}
This enables statements like import moment from "moment";
to work, fetching and evaluating the JavaScript module at the /node_modules/moment/src/moment.js
URL.
An import map can remap a class of module specifiers into a class of URLs by using trailing slashes, like so:
{
"imports" : {
"moment/" : "/node_modules/moment/src/"
}
}
This enables statements like import localeData from
"moment/locale/zh-cn.js";
to work, fetching and evaluating the JavaScript module at the
/node_modules/moment/src/locale/zh-cn.js
URL. Such trailing-slash
mappings are often combined with bare-specifier mappings, e.g.
{
"imports" : {
"moment" : "/node_modules/moment/src/moment.js" ,
"moment/" : "/node_modules/moment/src/"
}
}
so that both the "main module" specified by "moment
" and the
"submodules" specified by paths such as "moment/locale/zh-cn.js
" are
available.
Bare specifiers are not the only type of module specifiers which import maps can remap.
"URL-like" specifiers, i.e., those that are either parseable as absolute URLs or start with
"/
", "./
", or "../
", can be
remapped as well:
{
"imports" : {
"https://cdn.example.com/vue/dist/vue.runtime.esm.js" : "/node_modules/vue/dist/vue.runtime.esm.js" ,
"/js/app.mjs" : "/js/app-8e0d62a03.mjs" ,
"../helpers/" : "https://cdn.example/helpers/"
}
}
Note how the URL to be remapped, as well as the URL being mapped to, can be specified either
as absolute URLs, or as relative URLs starting with "/
", "./
", or "../
". (They cannot be specified as relative
URLs without those starting sigils, as those help distinguish from bare module specifiers.) Also
note how the trailing slash mapping works in
this context as well.
Such remappings operate on the post-canonicalization URL, and do not require a match between
the literal strings supplied in the import map key and the imported module specifier. So for
example, if this import map was included on https://example.com/app.html
,
then not only would import "/js/app.mjs"
be remapped, but so
would import "./js/app.mjs"
and import "./foo/../js/app.mjs"
.
All previous examples have globally remapped module specifiers, by using the top-level "imports
" key in the import map. The top-level "scopes
"
key can be used to provide localized remappings, which only apply when the referring module
matches a specific URL prefix. For example:
{
"scopes" : {
"/a/" : {
"moment" : "/node_modules/moment/src/moment.js"
},
"/b/" : {
"moment" : "https://cdn.example.com/moment/src/moment.js"
}
}
}
With this import map, the statement import "moment"
will have
different meanings depending on which referrer script contains the statement:
Inside scripts located under /a/
, this will import /node_modules/moment/src/moment.js
.
Inside scripts located under /b/
, this will import https://cdn.example.com/moment/src/moment.js
.
Inside scripts located under /c/
, this will fail to resolve and
thus throw an exception.
A typical usage of scopes is to allow multiple versions of the "same" module to exist in a web application, with some parts of the module graph importing one version, and other parts importing another version.
Scopes can overlap each other, and overlap the global "imports
"
specifier map. At resolution time, scopes are consulted in order of most- to least-specific,
where specificity is measured by sorting the scopes using the code unit less than
operation. So, for example, "/scope2/scope3/
" is treated as more specific
than "/scope2/
", which is treated as more specific than the top-level
(unscoped) mappings.
The following import map illustrates this:
{
"imports" : {
"a" : "/a-1.mjs" ,
"b" : "/b-1.mjs" ,
"c" : "/c-1.mjs"
},
"scopes" : {
"/scope2/" : {
"a" : "/a-2.mjs"
},
"/scope2/scope3/" : {
"b" : "/b-3.mjs"
}
}
}
This results in the following resolutions (using relative URLs for brevity):
Specifier | ||||
---|---|---|---|---|
"a "
| "b "
| "c "
| ||
Referrer | /scope1/r.mjs
| /a-1.mjs
| /b-1.mjs
| /c-1.mjs
|
/scope2/r.mjs
| /a-2.mjs
| /b-1.mjs
| /c-1.mjs
| |
/scope2/scope3/r.mjs
| /a-2.mjs
| /b-3.mjs
| /c-1.mjs
|
The child text content of a script
element representing an
import map must match the following import map authoring
requirements:
It must be valid JSON. [JSON]
The JSON must represent a JSON object, with at most the two keys "imports
" and "scopes
".
The values corresponding to the "imports
" and "scopes
" keys, if present, must themselves be JSON objects.
The value corresponding to the "imports
" key, if present, must be
a valid module specifier map.
The value corresponding to the "scopes
" key, if present, must be a
JSON object, whose keys are valid URL strings and whose
values are valid module specifier
maps.
A valid module specifier map is a JSON object that meets the following requirements:
All of its keys must be nonempty.
All of its values must be strings.
Each value must be either a valid absolute URL or a
valid URL string that starts with "/
", "./
", or "../
".
If a given key ends with "/
", then the corresponding
value must also.
The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts
of their processing model. This specification defines the rest of their processing model: how the
module system is bootstrapped, via the script
element with type
attribute set to "module
", and how
modules are fetched, resolved, and executed. [JAVASCRIPT]
Although the JavaScript specification speaks in terms of "scripts" versus
"modules", in general this specification speaks in terms of classic
scripts versus module scripts, since both of them use
the script
element.
modulePromise = import(specifier)
Returns a promise for the module namespace object for the module script
identified by specifier. This allows dynamic importing of module scripts at runtime,
instead of statically using the import
statement form. The specifier will
be resolved relative to the active
script.
The returned promise will be rejected if an invalid specifier is given, or if a failure is encountered while fetching or evaluating the resulting module graph.
This syntax can be used inside both classic and module scripts. It thus provides a bridge into the module-script world, from the classic-script world.
url = import.meta.url
Returns the active module script's base URL.
This syntax can only be used inside module scripts.
url = import.meta.resolve(specifier)
Returns specifier, resolved
relative to the active script. That is, this returns the URL that would be imported
by using import(specifier)
.
Throws a TypeError
exception if an invalid specifier is given.
This syntax can only be used inside module scripts.
Module maps are used to ensure
that imported module scripts are only fetched, parsed, and evaluated once per
Document
or worker.
Since module maps are keyed by (URL, module type), the
following code will create three separate entries in the module map, since it
results in three different (URL, module type) tuples (all with "javascript
" type):
import "https://example.com/module.mjs" ;
import "https://example.com/module.mjs#map-buster" ;
import "https://example.com/module.mjs?debug=true" ;
That is, URL queries and fragments can be varied to create distinct entries in the module map; they are not ignored. Thus, three separate fetches and three separate module evaluations will be performed.
In contrast, the following code would only create a single entry in the module map, since after applying the URL parser to these inputs, the resulting URL records are equal:
import "https://example.com/module2.mjs" ;
import "https:example.com/module2.mjs" ;
import "https://///example.com\\module2.mjs" ;
import "https://example.com/foo/../module2.mjs" ;
So in this second example, only one fetch and one module evaluation will occur.
Note that this behavior is the same as how shared workers are keyed by their parsed constructor url.
Since module type is also part of the module map key, the following code will
create two separate entries in the module map (the type is "javascript
" for the first, and "css
" for the second):
< script type = module >
import "https://example.com/module" ;
</ script >
< script type = module >
import "https://example.com/module" with { type: "css" };
</ script >
This can result in two separate fetches and two separate module evaluations being performed.
In practice, due to the as-yet-unspecified memory cache (see issue #6110) the resource may only be fetched once in WebKit and Blink-based browsers. Additionally, as long as all module types are mutually exclusive, the module type check in fetch a single module script will fail for at least one of the imports, so at most one module evaluation will occur.
The purpose of including the type in the module map key is so that an import with the wrong type attribute does not prevent a different import of the same specifier but with the correct type from succeeding.
JavaScript module scripts are the default import type when importing from another JavaScript
module; that is, when an import
statement lacks a type
import attribute the imported module script's type will be JavaScript.
Attempting to import a JavaScript resource using an import
statement with
a type
import attribute will fail:
< script type = "module" >
// All of the following will fail, assuming that the imported .mjs files are served with a
// JavaScript MIME type. JavaScript module scripts are the default and cannot be imported with
// any import type attribute.
import foo from "./foo.mjs" with { type: "javascript" };
import foo2 from "./foo2.mjs" with { type: "js" };
import foo3 from "./foo3.mjs" with { type: "" };
await import ( "./foo4.mjs" , { with : { type: null } });
await import ( "./foo5.mjs" , { with : { type: undefined } });
</ script >
To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. Each agent has an associated event loop, which is unique to that agent.
The event loop of a similar-origin window agent is known as a window event loop. The event loop of a dedicated worker agent, shared worker agent, or service worker agent is known as a worker event loop. And the event loop of a worklet agent is known as a worklet event loop.
Event loops do not necessarily correspond to implementation threads. For example, multiple window event loops could be cooperatively scheduled in a single thread.
However, for the various worker agents that are allocated with [[CanBlock]] set to true, the JavaScript specification does place requirements on them regarding forward progress, which effectively amount to requiring dedicated per-agent threads in those cases.
Many objects can have event handlers specified. These act as non-capture event listeners for the object on which they are specified. [DOM]
Event handlers are exposed in two ways.
The first way, common to all event handlers, is as an event handler IDL attribute.
The second way is as an event handler content
attribute. Event handlers on HTML elements and some of the event handlers on
Window
objects are exposed in this way.
For both of these two ways, the event handler is exposed
through a name, which is a string that always starts with
"on
" and is followed by the name of the event for which the handler is
intended.
Most of the time, the object that exposes an event handler
is the same as the object on which the corresponding event listener is added.
However, the body
and frameset
elements expose several event
handlers that act upon the element's Window
object, if one exists. In either
case, we call the object an event handler acts upon the target of that event
handler.
An event handler IDL attribute is an IDL attribute for a specific event handler. The name of the IDL attribute is the same as the name of the event handler.
An event handler content attribute is a content attribute for a specific event handler. The name of the content attribute is the same as the name of the event handler.
Event handler content attributes, when specified, must contain valid JavaScript code which, when parsed, would match the FunctionBody production after automatic semicolon insertion.
This example demonstrates the order in which event listeners are invoked. If the button in this example is clicked by the user, the page will show four alerts, with the text "ONE", "TWO", "THREE", and "FOUR" respectively.
< button id = "test" > Start Demo</ button >
< script >
var button = document. getElementById( 'test' );
button. addEventListener( 'click' , function () { alert( 'ONE' ) }, false );
button. setAttribute( 'onclick' , "alert('NOT CALLED')" ); // event handler listener is registered here
button. addEventListener( 'click' , function () { alert( 'THREE' ) }, false );
button. onclick = function () { alert( 'TWO' ); };
button. addEventListener( 'click' , function () { alert( 'FOUR' ) }, false );
</ script >
However, in the following example, the event handler is deactivated after its initial activation (and its event listener is removed), before being reactivated at a later time. The page will show five alerts with "ONE", "TWO", "THREE", "FOUR", and "FIVE" respectively, in order.
< button id = "test" > Start Demo</ button >
< script >
var button = document. getElementById( 'test' );
button. addEventListener( 'click' , function () { alert( 'ONE' ) }, false );
button. setAttribute( 'onclick' , "alert('NOT CALLED')" ); // event handler is activated here
button. addEventListener( 'click' , function () { alert( 'TWO' ) }, false );
button. onclick = null ; // but deactivated here
button. addEventListener( 'click' , function () { alert( 'THREE' ) }, false );
button. onclick = function () { alert( 'FOUR' ); }; // and re-activated here
button. addEventListener( 'click' , function () { alert( 'FIVE' ) }, false );
</ script >
The EventHandler
callback function type represents a callback used for event
handlers.
In JavaScript, any Function
object implements
this interface.
For example, the following document fragment:
< body onload = "alert(this)" onclick = "alert(this)" >
...leads to an alert saying "[object Window]
" when the document is
loaded, and an alert saying "[object HTMLBodyElement]
" whenever the
user clicks something in the page.
The return value of the function affects whether the event is canceled or not: if the return value is false, the event is canceled.
There are two exceptions in the platform, for historical reasons:
The onerror
handlers on global objects, where
returning true cancels the event.
The onbeforeunload
handler, where
returning any non-null and non-undefined value will cancel the event.
For historical reasons, the onerror
handler has different
arguments:
window. onerror = ( message, source, lineno, colno, error) => { … };
Similarly, the onbeforeunload
handler has a
different return value: it will be cast to a string.
Document
objects, and Window
objectsThe following are the event handlers (and their corresponding event handler event types)
supported by all HTML elements, as both event handler content attributes
and event handler IDL attributes; and
supported by all Document
and Window
objects, as event handler IDL
attributes:
Event handler | Event handler event type |
---|---|
onabort Support in all current engines. Firefox9+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | abort
|
onauxclick Firefox53+SafariNoChrome55+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android53+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | auxclick
|
onbeforeinput | beforeinput
|
onbeforematch | beforematch
|
onbeforetoggle | beforetoggle
|
oncancel HTMLDialogElement/cancel_event Support in all current engines. Firefox98+Safari15.4+Chrome37+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android? | cancel
|
oncanplay HTMLMediaElement/canplay_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | canplay
|
oncanplaythrough HTMLMediaElement/canplaythrough_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | canplaythrough
|
onchange Support in all current engines. Firefox1+Safari3+Chrome1+ Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | change
|
onclick Support in all current engines. Firefox6+Safari3+Chrome1+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android6+Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | click
|
onclose | close
|
oncontextlost | contextlost
|
oncontextmenu | contextmenu
|
oncontextrestored | contextrestored
|
oncopy Support in all current engines. Firefox22+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | copy
|
oncuechange HTMLTrackElement/cuechange_event Support in all current engines. Firefox68+Safari10+Chrome32+ Opera19+Edge79+ Edge (Legacy)14+Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+ | cuechange
|
oncut Support in all current engines. Firefox22+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | cut
|
ondblclick Support in all current engines. Firefox6+Safari3+Chrome1+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android6+Safari iOS1+Chrome AndroidNoWebView Android?Samsung Internet?Opera Android12.1+ | dblclick
|
ondrag | drag
|
ondragend | dragend
|
ondragenter | dragenter
|
ondragleave | dragleave
|
ondragover | dragover
|
ondragstart | dragstart
|
ondrop | drop
|
ondurationchange HTMLMediaElement/durationchange_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | durationchange
|
onemptied HTMLMediaElement/emptied_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | emptied
|
onended Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | ended
|
onformdata | formdata
|
oninput Support in all current engines. Firefox6+Safari3.1+Chrome1+ Opera11.6+Edge79+ Edge (Legacy)NoInternet Explorer🔰 9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | input
|
oninvalid | invalid
|
onkeydown Support in all current engines. Firefox6+Safari1.2+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | keydown
|
onkeypress | keypress
|
onkeyup Support in all current engines. Firefox6+Safari1.2+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | keyup
|
onloadeddata HTMLMediaElement/loadeddata_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | loadeddata
|
onloadedmetadata HTMLMediaElement/loadedmetadata_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | loadedmetadata
|
onloadstart HTMLMediaElement/loadstart_event Support in all current engines. Firefox6+Safari4+Chrome3+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | loadstart
|
onmousedown Support in all current engines. Firefox6+Safari4+Chrome2+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mousedown
|
onmouseenter Support in all current engines. Firefox10+Safari7+Chrome30+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | mouseenter
|
onmouseleave Support in all current engines. Firefox10+Safari7+Chrome30+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | mouseleave
|
onmousemove Support in all current engines. Firefox6+Safari4+Chrome2+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mousemove
|
onmouseout Support in all current engines. Firefox6+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mouseout
|
onmouseover Support in all current engines. Firefox6+Safari4+Chrome2+ Opera9.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+ | mouseover
|
onmouseup Support in all current engines. Firefox6+Safari4+Chrome2+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | mouseup
|
onpaste Support in all current engines. Firefox22+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | paste
|
onpause Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | pause
|
onplay Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | play
|
onplaying HTMLMediaElement/playing_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | playing
|
onprogress HTMLMediaElement/progress_event Support in all current engines. Firefox6+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | progress
|
onratechange HTMLMediaElement/ratechange_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | ratechange
|
onreset | reset
|
onsecuritypolicyviolation Element/securitypolicyviolation_event Support in all current engines. Firefox63+Safari10+Chrome41+ Opera?Edge79+ Edge (Legacy)15+Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | securitypolicyviolation
|
onseeked Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | seeked
|
onseeking HTMLMediaElement/seeking_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | seeking
|
onselect Support in all current engines. Firefox6+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLTextAreaElement/select_event Support in all current engines. Firefox6+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | select
|
onslotchange HTMLSlotElement/slotchange_event Support in all current engines. Firefox63+Safari10.1+Chrome53+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | slotchange
|
onstalled HTMLMediaElement/stalled_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | stalled
|
onsubmit Support in all current engines. Firefox1+Safari3+Chrome1+ Opera8+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | submit
|
onsuspend HTMLMediaElement/suspend_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | suspend
|
ontimeupdate HTMLMediaElement/timeupdate_event Support in all current engines. Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | timeupdate
|
ontoggle | toggle
|
onvolumechange HTMLMediaElement/volumechange_event Support in all current engines. Firefox6+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | volumechange
|
onwaiting HTMLMediaElement/waiting_event Support in all current engines. Firefox6+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | waiting
|
onwebkitanimationend | webkitAnimationEnd
|
onwebkitanimationiteration | webkitAnimationIteration
|
onwebkitanimationstart | webkitAnimationStart
|
onwebkittransitionend | webkitTransitionEnd
|
onwheel Support in all current engines. Firefox17+Safari7+Chrome31+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOSNoChrome Android?WebView Android?Samsung Internet?Opera Android? | wheel
|
The following are the event handlers (and their corresponding event handler event types)
supported by all HTML elements other than body
and frameset
elements, as both event handler content attributes and event handler IDL
attributes; supported by all Document
objects, as event handler IDL attributes; and
supported by all Window
objects, as event handler IDL attributes on the
Window
objects themselves, and with corresponding event handler content
attributes and event handler IDL attributes exposed on all body
and frameset
elements that are owned by that Window
object's associated Document
:
Event handler | Event handler event type |
---|---|
onblur Support in all current engines. Firefox24+Safari3.1+Chrome1+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ Support in all current engines. Firefox6+Safari5.1+Chrome5+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | blur
|
onerror Support in all current engines. Firefox6+Safari5.1+Chrome10+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android? | error
|
onfocus Support in all current engines. Firefox24+Safari3.1+Chrome1+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ Support in all current engines. Firefox6+Safari5.1+Chrome5+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ | focus
|
onload | load
|
onresize | resize
|
onscroll Support in all current engines. Firefox6+Safari2+Chrome1+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+ Support in all current engines. Firefox6+Safari1.3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ | scroll
|
onscrollend Firefox109+SafariNoChrome114+ Opera?Edge114+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? Firefox109+SafariNoChrome114+ Opera?Edge114+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | scrollend
|
We call the set of the names of the
event handlers listed in the first column of this table the
Window
-reflecting body element event handler set.
The following are the event handlers (and their corresponding event handler event types)
supported by Window
objects, as event handler IDL attributes on the
Window
objects themselves, and with corresponding event handler content
attributes and event handler IDL attributes exposed on all body
and frameset
elements that are owned by that Window
object's associated Document
:
Event handler | Event handler event type |
---|---|
onafterprint Support in all current engines. Firefox6+Safari13+Chrome63+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | afterprint
|
onbeforeprint Support in all current engines. Firefox6+Safari13+Chrome63+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? | beforeprint
|
onbeforeunload Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ | beforeunload
|
onhashchange Support in all current engines. Firefox3.6+Safari5+Chrome8+ Opera10.6+Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android?Safari iOS5+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ | hashchange
|
onlanguagechange Support in all current engines. Firefox32+Safari10.1+Chrome37+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android? | languagechange
|
onmessage Support in all current engines. Firefox9+Safari4+Chrome60+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | message
|
onmessageerror Support in all current engines. Firefox6+Safari3.1+Chrome3+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ Support in all current engines. Firefox57+Safari16.4+Chrome60+ Opera?Edge79+ Edge (Legacy)18Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+ | messageerror
|
onoffline Support in all current engines. Firefox9+Safari4+Chrome3+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | offline
|
ononline Support in all current engines. Firefox9+Safari4+Chrome3+ Opera?Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | online
|
onpagehide | pagehide
|
onpagereveal | pagereveal
|
onpageshow | pageshow
|
onpopstate Support in all current engines. Firefox4+Safari5+Chrome5+ Opera11.5+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android11.5+ | popstate
|
onrejectionhandled Support in all current engines. Firefox69+Safari11+Chrome49+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android? | rejectionhandled
|
onstorage Support in all current engines. Firefox45+Safari4+Chrome1+ Opera?Edge79+ Edge (Legacy)15+Internet Explorer9+ Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android? | storage
|
onunhandledrejection Window/unhandledrejection_event Support in all current engines. Firefox69+Safari11+Chrome49+ Opera?Edge79+ Edge (Legacy)?Internet ExplorerNo Firefox Android?Safari iOS11.3+Chrome Android?WebView Android?Samsung Internet?Opera Android? | unhandledrejection
|
onunload Support in all current engines. Firefox1+Safari3+Chrome1+ Opera4+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+ | unload
|
The following are the event handlers (and their corresponding event handler event types)
supported on Document
objects as event handler IDL attributes:
Event handler | Event handler event type |
---|---|
onreadystatechange | readystatechange
|
onvisibilitychange Document/visibilitychange_event Support in all current engines. Firefox56+Safari14.1+Chrome62+ Opera49+Edge79+ Edge (Legacy)18Internet Explorer🔰 10+ Firefox Android?Safari iOS?Chrome Android?WebView Android62+Samsung Internet?Opera Android46+ | visibilitychange
|
WindowOrWorkerGlobalScope
mixinThe WindowOrWorkerGlobalScope
mixin is for use of APIs that are to be exposed on
Window
and WorkerGlobalScope
objects.
Other standards are encouraged to further extend it using partial
interface mixin WindowOrWorkerGlobalScope { … };
along with an
appropriate reference.
self.isSecureContext
Returns whether or not this global object represents a secure context. [SECURE-CONTEXTS]
self.origin
Returns the global object's origin, serialized as string.
self.crossOriginIsolated
Returns whether scripts running in this global are allowed to use APIs that require
cross-origin isolation. This depends on the `Cross-Origin-Opener-Policy
` and
`Cross-Origin-Embedder-Policy
` HTTP response headers and the "cross-origin-isolated
" feature.
Developers are strongly encouraged to use self.origin
over location.origin
. The former returns the origin of the environment,
the latter of the URL of the environment. Imagine the following script executing in a document on
https://stargate.example/
:
var frame = document. createElement( "iframe" )
frame. onload = function () {
var frameWin = frame. contentWindow
console. log( frameWin. location. origin) // "null"
console. log( frameWin. origin) // "https://stargate.example"
}
document. body. appendChild( frame)
self.origin
is a more reliable security indicator.
The atob()
and btoa()
methods
allow developers to transform content to and from the base64 encoding.
In these APIs, for mnemonic purposes, the "b" can be considered to stand for "binary", and the "a" for "ASCII". In practice, though, for primarily historical reasons, both the input and output of these functions are Unicode strings.
result = self.btoa(data)
Takes the input data, in the form of a Unicode string containing only characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, and converts it to its base64 representation, which it returns.
Throws an "InvalidCharacterError
" DOMException
exception if the input string contains any out-of-range characters.
result = self.atob(data)
Takes the input data, in the form of a Unicode string containing base64-encoded binary data, decodes it, and returns a string consisting of characters in the range U+0000 to U+00FF, each representing a binary byte with values 0x00 to 0xFF respectively, corresponding to that binary data.
Throws an "InvalidCharacterError
" DOMException
if the
input string is not valid base64 data.