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.
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.
Window/unhandledrejection_event
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 JavaScript specification defines Jobs to be scheduled and run later by the host, as well as JobCallback Records which encapsulate JavaScript functions that are called as part of jobs. The JavaScript specification contains a number of implementation-defined abstract operations that lets the host define how jobs are scheduled and how JobCallbacks are handled. This section defines them for user agent hosts.
JavaScript contains an implementation-defined HostCallJobCallback(callback, V, argumentsList) abstract operation to let hosts restore state when invoking JavaScript callbacks from inside tasks. HTML restores the incumbent settings object and the active script. User agents must use the following implementation: [JAVASCRIPT]
Let incumbent settings be callback.[[HostDefined]].[[IncumbentSettings]].
Let script execution context be callback.[[HostDefined]].[[ActiveScriptContext]].
Prepare to run a callback with incumbent settings.
This affects the incumbent concept while the callback runs.
If script execution context is not null, then push script execution context onto the JavaScript execution context stack.
This affects the active script while the callback runs.
Let result be Call(callback.[[Callback]], V, argumentsList).
If script execution context is not null, then pop script execution context from the JavaScript execution context stack.
Clean up after running a callback with incumbent settings.
Return result.
JavaScript contains an implementation-defined HostEnqueuePromiseJob(job, realm) abstract operation to schedule Promise-related operations. HTML schedules these operations in the microtask queue. User agents must use the following implementation: [JAVASCRIPT]
If realm is not null, then let job settings be the settings object for realm. Otherwise, let job settings be null.
If realm is not null, it is the Realm of
the author code that will run. When job is returned by
NewPromiseReactionJob, it is the realm of the promise's handler function. When
job is returned by NewPromiseResolveThenableJob, it is the realm of
the then
function.
If realm is null, either no author code will run or author code is guaranteed to
throw. For the former, the author may not have passed in code to run, such as in promise.then(null, null)
. For the latter, it is because a revoked Proxy was
passed. In both cases, all the steps below that would otherwise use job settings
get skipped.
Queue a microtask on the surrounding agent's event loop to perform the following steps:
If job settings is not null, then check if we can run script with job settings. If this returns "do not run" then return.
If job settings is not null, then prepare to run script with job settings.
This affects the entry concept while the job runs.
Let result be job().
job is an abstract closure returned by
NewPromiseReactionJob or NewPromiseResolveThenableJob. The promise's
handler function when job is returned by NewPromiseReactionJob, and
the then
function when job is returned by
NewPromiseResolveThenableJob, are wrapped in JobCallback Records. HTML saves the incumbent settings object and
a JavaScript execution context for to the active script in
HostMakeJobCallback and restores them in HostCallJobCallback.
If job settings is not null, then clean up after running script with job settings.
If result is an abrupt completion, then report the exception given by result.[[Value]].
Reference/Global_Objects/Promise#Incumbent_settings_object_tracking
Support in one engine only.
JavaScript contains an implementation-defined HostMakeJobCallback(callable) abstract operation to let hosts attach state to JavaScript callbacks that are called from inside tasks. HTML tracks the incumbent settings object in promises by saving the incumbent settings object and a JavaScript execution context for the active script. User agents must use the following implementation: [JAVASCRIPT]
Let incumbent settings be the incumbent settings object.
Let active script be the active script.
Let script execution context be null.
If active script is not null, set script execution context to a new JavaScript execution context, with its Function field set to null, its Realm field set to active script's settings object's Realm, and its ScriptOrModule set to active script's record.
As seen below, this is used in order to propagate the current active script forward to the time when the job callback is invoked.
A case where active script is non-null, and saving it in this way is useful, is the following:
Promise. resolve( 'import(`./example.mjs`)' ). then( eval);
Without this step (and the steps that use it in HostCallJobCallback), there
would be no active script when the import()
expression is evaluated,
since eval()
is a built-in function that does not originate from any particular
script.
With this step in place, the active script is propagated from the above code into the job,
allowing import()
to use the original script's base URL appropriately.
active script can be null if the user clicks on the following button:
< button onclick = "Promise.resolve('import(`./example.mjs`)').then(eval)" > Click me</ button >
In this case, the JavaScript function for the event handler will be created by the get the current value of the event handler algorithm, which creates a function with null [[ScriptOrModule]] value. Thus, when the promise machinery calls HostMakeJobCallback, there will be no active script to pass along.
As a consequence, this means that when the import()
expression is evaluated,
there will still be no active script. Fortunately that is handled by our
implementations of HostResolveImportedModule and
HostImportModuleDynamically, by falling back to using the current settings
object's API base URL.
Return the JobCallback Record { [[Callback]]: callable, [[HostDefined]]: { [[IncumbentSettings]]: incumbent settings, [[ActiveScriptContext]]: script execution context } }.
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.
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's base URL.
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.
import . meta
. url
Returns the active module script's base URL.
This syntax can only be used inside module scripts.
Module maps are used to ensure
that imported JavaScript modules are only fetched, parsed, and evaluated once per
Document
or worker.
Since module maps are keyed by URL, the following code will create three separate entries in the module map, since it results in three different URLs:
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.
The following are valid module specifiers:
https://example.com/apples.mjs
http:example.com\pears.js
(becomes http://example.com/pears.js
)//example.com/bananas
./strawberries.mjs.cgi
../lychees
/limes.jsx
data:text/javascript,export default 'grapes';
blob:https://whatwg.org/d0360e2f-caee-469f-9a2f-87d5b0456f6f
The following are valid module specifiers according to the above algorithm, but will invariably cause failures when they are fetched:
javascript:export default 'artichokes';
data:text/plain,export default 'kale';
about:legumes
wss://example.com/celery
The following are not valid module specifiers according to the above algorithm:
https://eggplant:b/c
pumpkins.js
.tomato
..zucchini.mjs
.\yam.es
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+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | abort
|
onauxclick | auxclick
|
oncancel Support in one engine only. FirefoxNoSafariNoChrome32+ Opera19+Edge79+ Edge (Legacy)NoInternet ExplorerNo Firefox AndroidNoSafari iOSNoChrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | cancel
|
oncanplay Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | canplay
|
oncanplaythrough GlobalEventHandlers/oncanplaythrough Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | canplaythrough
|
onchange Support in all current engines. Firefox1+Safari3+Chrome1+ Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+ | change
|
onclick Support in all current engines. Firefox1+Safari3+Chrome1+ Opera9+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+ | click
|
onclose Firefox53+SafariNoChrome32+ Opera19+Edge79+ Edge (Legacy)NoInternet ExplorerNo Firefox Android53+Safari iOSNoChrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | close
|
oncontextmenu GlobalEventHandlers/oncontextmenu Support in all current engines. Firefox9+Safari4+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer5+ Firefox Android9+Safari iOS3.2+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | contextmenu
|
oncuechange GlobalEventHandlers/oncuechange Support in all current engines. Firefox68+Safari10.1+Chrome32+ Opera19+Edge79+ Edge (Legacy)18Internet ExplorerNo Firefox Android68+Safari iOS10.3+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | cuechange
|
ondblclick GlobalEventHandlers/ondblclick Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | dblclick
|
ondrag | drag
|
ondragend | dragend
|
ondragenter | dragenter
|
ondragleave | dragleave
|
ondragover | dragover
|
ondragstart | dragstart
|
ondrop | drop
|
ondurationchange GlobalEventHandlers/ondurationchange Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | durationchange
|
onemptied Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | emptied
|
onended Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | ended
|
onformdata GlobalEventHandlers/onformdata Firefox72+SafariNoChrome77+ Opera64+Edge79+ Edge (Legacy)NoInternet ExplorerNo Firefox Android79+Safari iOSNoChrome Android77+WebView Android77+Samsung Internet12.0+Opera Android55+ | formdata
|
oninput | input
|
oninvalid Support in all current engines. Firefox9+Safari5+Chrome4+ Opera12.1+Edge79+ Edge (Legacy)13+Internet ExplorerNo Firefox Android9+Safari iOS4+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12.1+ | invalid
|
onkeydown Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | keydown
|
onkeypress GlobalEventHandlers/onkeypress Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | keypress
|
onkeyup Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | keyup
|
onloadeddata GlobalEventHandlers/onloadeddata Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | loadeddata
|
onloadedmetadata GlobalEventHandlers/onloadedmetadata Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | loadedmetadata
|
onloadstart GlobalEventHandlers/onloadstart Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | loadstart
|
onmousedown GlobalEventHandlers/onmousedown Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | mousedown
|
onmouseenter GlobalEventHandlers/onmouseenter Support in all current engines. Firefox10+Safari6.1+Chrome30+ Opera17+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android10+Safari iOS7+Chrome Android30+WebView Android4.4+Samsung Internet2.0+Opera Android18+ | mouseenter
|
onmouseleave GlobalEventHandlers/onmouseleave Support in all current engines. Firefox10+Safari6.1+Chrome30+ Opera17+Edge79+ Edge (Legacy)12+Internet Explorer5.5+ Firefox Android10+Safari iOS7+Chrome Android30+WebView Android4.4+Samsung Internet2.0+Opera Android18+ | mouseleave
|
onmousemove GlobalEventHandlers/onmousemove Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | mousemove
|
onmouseout GlobalEventHandlers/onmouseout Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | mouseout
|
onmouseover GlobalEventHandlers/onmouseover Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | mouseover
|
onmouseup Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | mouseup
|
onpause Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | pause
|
onplay Support in all current engines. Firefox9+Safari9+Chrome32+ Opera19+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS9+Chrome Android32+WebView Android4.4.3+Samsung Internet2.0+Opera Android19+ | play
|
onplaying | playing
|
onprogress | progress
|
onratechange | ratechange
|
onreset Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | reset
|
onsecuritypolicyviolation | securitypolicyviolation
|
onseeked | seeked
|
onseeking | seeking
|
onselect Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | select
|
onslotchange | slotchange
|
onstalled | stalled
|
onsubmit Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | submit
|
onsuspend | suspend
|
ontimeupdate | timeupdate
|
ontoggle | toggle
|
onvolumechange | volumechange
|
onwaiting | waiting
|
onwebkitanimationend | webkitAnimationEnd
|
onwebkitanimationiteration | webkitAnimationIteration
|
onwebkitanimationstart | webkitAnimationStart
|
onwebkittransitionend | webkitTransitionEnd
|
onwheel Support in all current engines. Firefox17+Safari7+Chrome31+ Opera18+Edge79+ Edge (Legacy)12+Internet ExplorerNo Firefox Android17+Safari iOS7+Chrome Android31+WebView Android4.4.3+Samsung Internet2.0+Opera Android18+ | 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. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | blur
|
onerror Support in all current engines. Firefox1+Safari6+Chrome10+ Opera11.6+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android4+Safari iOS6+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12+ Support in all current engines. Firefox3.5+Safari1.3+ChromeYes OperaYesEdgeYes Edge (Legacy)12+Internet Explorer9+ Firefox Android4+Safari iOS1+Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes | error
|
onfocus Support in all current engines. Firefox9+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | focus
|
onload Support in all current engines. Firefox1+Safari3+Chrome1+ Opera9+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+ | load
|
onresize Support in all current engines. Firefox38+Safari10.1+Chrome34+ Opera21+Edge79+ Edge (Legacy)NoInternet Explorer🔰 4+ Firefox Android38+Safari iOS10.3+Chrome Android34+WebView Android37+Samsung Internet2.0+Opera Android21+ | resize
|
onscroll Support in all current engines. Firefox9+Safari1.3+Chrome1+ Opera12.1+Edge79+ Edge (Legacy)12+Internet Explorer9+ Firefox Android9+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+ | scroll
|
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 WindowEventHandlers/onafterprint Support in all current engines. Firefox6+Safari13+Chrome63+ Opera50+Edge79+ Edge (Legacy)12+Internet ExplorerYes Firefox Android?Safari iOS13+Chrome Android63+WebView Android63+Samsung Internet8.0+Opera Android46+ | afterprint
|
onbeforeprint WindowEventHandlers/onbeforeprint Support in all current engines. Firefox6+Safari13+Chrome63+ Opera50+Edge79+ Edge (Legacy)12+Internet ExplorerYes Firefox Android?Safari iOS13+Chrome Android63+WebView Android63+Samsung Internet8.0+Opera Android46+ | beforeprint
|
onbeforeunload WindowEventHandlers/onbeforeunload Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12+Edge79+ Edge (Legacy)12+Internet Explorer4+ Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12+ | beforeunload
|
onhashchange WindowEventHandlers/onhashchange Support in all current engines. Firefox3.6+Safari5+Chrome5+ Opera10+Edge79+ Edge (Legacy)12+Internet Explorer8+ Firefox Android4+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android10.1+ | hashchange
|
onlanguagechange WindowEventHandlers/onlanguagechange Firefox32+Safari?Chrome37+ Opera24+Edge79+ Edge (Legacy)NoInternet ExplorerNo Firefox Android4+Safari iOS?Chrome Android37+WebView Android37+Samsung Internet4.0+Opera Android24+ | languagechange
|
onmessage Support in one engine only. Firefox?Safari?Chrome60+ Opera47+Edge79+ Edge (Legacy)NoInternet Explorer? Firefox Android?Safari iOS?Chrome Android60+WebView Android60+Samsung Internet8.0+Opera Android44+ | message
|
onmessageerror WindowEventHandlers/onmessageerror Firefox57+Safari?Chrome60+ Opera47+Edge79+ Edge (Legacy)NoInternet Explorer? Firefox Android57+Safari iOS?Chrome Android60+WebView Android60+Samsung Internet8.0+Opera Android44+ | messageerror
|
onoffline | offline
|
ononline | online
|
onpagehide | pagehide
|
onpageshow | pageshow
|
onpopstate WindowEventHandlers/onpopstate Support in all current engines. Firefox4+Safari6+Chrome5+ Opera11.5+Edge79+ Edge (Legacy)12+Internet Explorer10+ Firefox Android4+Safari iOS5.1+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android11.5+ | popstate
|
onrejectionhandled WindowEventHandlers/onrejectionhandled Support in all current engines. Firefox69+Safari11+Chrome49+ Opera36+Edge79+ Edge (Legacy)NoInternet ExplorerNo Firefox Android🔰 68+Safari iOS11.3+Chrome Android49+WebView Android49+Samsung Internet5.0+Opera AndroidNo | rejectionhandled
|
onstorage Firefox45+Safari?Chrome1+ Opera15+Edge79+ Edge (Legacy)18Internet Explorer? Firefox Android45+Safari iOS?Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android14+ | storage
|
onunhandledrejection WindowEventHandlers/onunhandledrejection Support in all current engines. Firefox69+Safari11+Chrome49+ Opera36+Edge79+ Edge (Legacy)NoInternet ExplorerNo Firefox Android🔰 68+Safari iOS11.3+Chrome Android49+WebView Android49+Samsung Internet5.0+Opera AndroidNo | unhandledrejection
|
onunload Support in all current engines. FirefoxYesSafariYesChromeYes OperaYesEdgeYes Edge (Legacy)12+Internet ExplorerYes Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes | unload
|
The 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
objects, as event handler IDL attributes:
Event handler | Event handler event type |
---|---|
oncut | cut
|
oncopy | copy
|
onpaste | paste
|
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
|
WindowOrWorkerGlobalScope
mixinSupport in all current engines.
The 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.
isSecureContext
WindowOrWorkerGlobalScope/isSecureContext
Returns whether or not this global object represents a secure context. [SECURE-CONTEXTS]
origin
WindowOrWorkerGlobalScope/origin
Support in all current engines.
Returns the global object's origin, serialized as string.
crossOriginIsolated
WindowOrWorkerGlobalScope/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.
WindowOrWorkerGlobalScope/atob
Support in all current engines.
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.
btoa
( data )WindowOrWorkerGlobalScope/btoa
Support in all current engines.
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.
atob
( data )WindowOrWorkerGlobalScope/atob
Support in all current engines.
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.