Search completed in 0.87 seconds.
2001 results for "events":
Your results are loading. Please wait...
Pointer events - Web APIs
pointer events address that need.
... pointer events are dom events that are fired for a pointing device.
...however, for scenarios when device-specific handling is desired, pointer events defines a pointertype property to inspect the device type which produced the event.
...And 32 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 21 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 19 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 19 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 18 more matches
Adding Events and Commands - Archive of obsolete content
there's a long list of events you can listen to, and which you use depend on the situation.
... elements only implement the events that are relevant to them, but there are several events that are implemented for most elements.
... these are some notable events you should keep in mind: oncommand.
...And 13 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 13 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 s...
... values auto the element behaves as it would if the pointer-events property were not specified.
...And 13 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 13 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 11 more matches
XUL Events - Archive of obsolete content
the events listeners can be attached using addeventlistener and removed using removeeventlistener.
... some of the events can be attached using attributes as well.
... inherited dom events event description blur the opposite of the focus event, the blur event is passed after an element loses the focus.
...And 9 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
objective: to learn about handling forms in vue, and by association, events, models, and methods.
...equivalent to event.stoppropagation() in regular javascript events.
... .prevent: prevents the event's default behavior.
...And 9 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
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 7 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 7 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 6 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 6 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 6 more matches
Working with Events - Archive of obsolete content
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.
... additionally, if you're using content scripts to interact with web content, you can define your own events and use them to communicate between the main add-on code and the content scripts.
...And 5 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 5 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.
... to change the color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never catch a mouse event.
...And 5 more matches
PopupEvents - Archive of obsolete content
popup events there are several events related to popups and menus.
...for more information about how to use this event, see context menu events.
...this is because the popup events bubble so the parent menu will receieve a popupshowing event whenever it opens, or any submenus open.
...And 4 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 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
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
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 3 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 2 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 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
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.
... specifications specification status comment pointer events – level 3the definition of 'getcoalescedevents()' in that specification.
...And 2 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 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
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.
...you can see an example of these events in action here: view source view example see also ^: drag and drop html 5 working draft: drag and drop nsidragservice ...
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.
... 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 ...
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.
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.
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.
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 propert...
...ies 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.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 propert...
...ies 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.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 propert...
...ies console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of 'unloadeventstart' in that specification.
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.
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.
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.
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.
...event.value < 50) { body.classlist.add('darklight'); body.classlist.remove('brightlight'); } else { body.classlist.add('brightlight'); body.classlist.remove('darklight'); } }); } else { console.log('devicelight event not supported'); } specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
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.
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: 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.
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.
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.
... syntax time = performancetiming.loadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.loadeventstart' in that specification.
Events and the DOM - Web APIs
there is an excellent diagram that clearly explains the three phases of event flow through the dom in the dom level 3 events draft.
... also see example 5: event propagation in the examples chapter for a more detailed example of how events move through the dom.
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.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.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.
... 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.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.
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.
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.
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.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.
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.
... you can easily watch for these events, using code such as the following: var v = document.getelementsbytagname("video")[0]; v.addeventlistener("seeked", function() { v.play(); }, true); v.currenttime = 10.0; this example fetches the first video element in the document and attaches an event listener to it, watching for the seeked event, which is sent whenever a seek operation completes.
allowEvents - Archive of obsolete content
« xul reference allowevents type: boolean gets and sets the value of the allowevents attribute.
Chrome-only Events reference
this page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
Gecko events
« at apis support page this page offers a list of accessibility-related events supported by gecko.
nsIChannelEventSink
netwerk/base/public/nsichanneleventsink.idlscriptable implement this interface to gain control over various channel events, such as redirects.
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.
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.
nsITransportEventSink
netwerk/base/public/nsitransport.idlscriptable implemented by clients that wish to receive transport events.
Index - Web APIs
WebAPIIndex
13 abortsignal: abort event abort, events the abort event of the fetch api is fired when a fetch request is aborted, i.e.
... 46 ambient light events ambient light the ambient light events are a handy way to make a web page or an application aware of any change in the light intensity.
... 70 animation.oncancel api, animation, event handler, property, reference, web animations, events, oncancel, web animations api the oncancel property of the web animations api's animation interface is the event handler for the cancel event.
...And 486 more matches
Event reference
dom events are sent to notify code of interesting things that have taken place.
...events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.
... this article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, mozilla-specific events are listed so that add-ons can use them to interact with the browser.
...And 44 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 40 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 29 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.
... 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.
... android widget still does not use texteventdispatcher to dispatch widgetcompositionevents, see bug 1137567.
...And 28 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 24 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.
... window.captureevents() registers the window to capture all events of the specified type.
... window.releaseevents() releases the window from trapping events of a specific type.
...And 22 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 19 more matches
NPEvent - Archive of obsolete content
event 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 documentation.
...both windowed and windowless plug-ins receive the same events.
... values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os developer documentation.
...And 17 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.
...then the select event handler is replaced with the function realselecthandler(), which will be used for handling all future select events.
...on.inputsources[0]; xrsession.onselect = function(event) { primaryinputsource = event.inputsource; xrsession.onselect = realselecthandler; return realselecthandler(event); }; the effect is that we set the primary input source the first time a select event is received, regardless of which input source it comes from, handle the event as normal from there, and from then on simply handle the events as usual without any further worries about which input source is primary.
...And 17 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 dis...
...ablenontestmouseevents(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(); a...
...if this is set, the synthesized wheel event emulates wheel events come from some devices without the line scroll amount by the event.
...And 16 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 15 more matches
EventTarget.addEventListener() - Web APIs
common targets are element, document, and window, but the target may be any object that supports events (such as xmlhttprequest).
...the available options are: capture a boolean indicating that events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree.
... usecapture optional a boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree.
...And 15 more matches
KeyboardEvent - Web APIs
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.
...keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet.
..."#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor keyboardevent() creates a new keyboardevent object.
...And 15 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.
... 387 nsichanneleventsink channels, interfaces, interfaces:scriptable, xpcom, xpcom interface reference channels will try to get this interface from a channel's notificationcallbacks or, if not available there, from the loadgroup's notificationcallbacks.
...this provides a mechanism for working with events from touch screens.
...And 14 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 14 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
14 allowevents xul attributes, xul reference no summary!
... 117 events xul attributes, xul reference no summary!
... 312 reserved dom, deprecated, events no summary!
...And 13 more matches
Componentizing our Svelte app - Learn web development
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.
...a different approach is the "props-down, events-up" communication pattern.
... basically, this pattern relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components.
...And 13 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 13 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 13 more matches
Document - Web APIs
WebAPIDocument
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.
... documentorshadowroot.pointerlockelement read only returns the element set as the target for mouse events while the pointer is locked.
... globaleventhandlers.onformdata is an eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed.
...And 13 more matches
Adding a new event
all messages are defined by macro in "messages" section of basicevents.h.
... basicevents.h this header file should be used only for defining generic purpose event class such as a common super class of various event classes.
... contentevents.h this header file should be used for defining internal event classes which are dispatched in content and do not represent user action.
...And 12 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 11 more matches
Adding Event Handlers - Archive of obsolete content
responding to events the script will contain code which responds to various events triggered by the user or other situations.
... there are about thirty or so different events that may be handled in several different ways.
...each xul element has the ability to trigger certain events in different situations.
...And 11 more matches
source-editor.jsm
ceeditor.defaults.showannotationruler false sourceeditor.defaults.showlinenumbers false sourceeditor.defaults.showoverviewruler false sourceeditor.defaults.tabsize 4 sourceeditor.defaults.theme sourceeditor.themes.mozilla sourceeditor.defaults.undolimit 200 event name constants these constants provide the names of the editor events for which you can listen.
... constant value description sourceeditor.events.blur "blur" fired when the editor loses focus.
... sourceeditor.events.breakpoint_change "breakpointchange" fired when a new breakpoint is added, or when an existing breakpoint is removed.
...And 11 more matches
Mozilla accessibility architecture
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.
...the assistive technology can choose to get the entire tree by using a depth- or breadth- first search, it can choose to get accessibles only based on events like focus, or it can get the accessible at a given point on the screen.
...And 10 more matches
Element - Web APIs
WebAPIElement
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.
... element.setcapture() sets up mouse event capture, redirecting all mouse events to this element.
... element.setpointercapture() designates a specific element as the capture target of future pointer events.
...And 10 more matches
Drag Operations - Web APIs
however, you could listen to a higher ancestor as drag events bubble up as most other events do.
...(the default image and drag effects are suitable in most situations.) drag data all drag events have a property called datatransfer which holds the drag data (datatransfer is a datatransfer object).
...during the drag, in an event listener for the dragenter and dragover events, you use the data types of the data being dragged to check whether a drop is allowed.
...And 10 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 and...
... 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 10 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 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
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 9 more matches
KeyboardEvent.key - Web APIs
WebAPIKeyboardEventkey
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.
... these events get mapped to dom keyboard events, and are listed among the "virtual key codes" for windows, even though they aren't actually key codes.
...for a given key press, the sequence of keyboardevents fired is as follows assuming that event.preventdefault is not called: a keydown event is first fired.
...And 9 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.
... pointer events have many similarities to mouse events but they support multiple simultaneous pointers such as multiple fingers on a touch screen.
...this document demonstrates via example code, using pointer events with different multi-touch interactions.
...And 9 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 8 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
event differences mozilla and internet explorer are almost completely different in the area of events.
... fromelement relatedtarget for mouse events, this is the element from which the mouse moved away.
... keycode keycode for keyboard events, this is a number representing the key that was pressed.
...And 8 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 8 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 8 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.
...this value prevents the instance from drawing further until it is pasted back on the page and npp_setwindow is called again with a new value.
...And 8 more matches
Signaling and video calling - Web APIs
here's the expected sequence of events: we'll see this detailed more over the course of this article.
... after creating the rtcpeerconnection, we set up handlers for the events that matter to us.
...there are a few other events available that we're not using in this example, as well.
...And 8 more matches
remote/parent - Archive of obsolete content
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.
... this is a shortcut for enumerating existing processes and then listening for attach events.
... events attach event emitted when a new process is started.
...And 7 more matches
jspage - Archive of obsolete content
},implements:function(a){$splat(a).each(function(b){if(b instanceof function){b=class.instantiate(b);}this.implement(b); },this);}};var chain=new class({$chain:[],chain:function(){this.$chain.extend(array.flatten(arguments));return this;},callchain:function(){return(this.$chain.length)?this.$chain.shift().apply(this,arguments):false; },clearchain:function(){this.$chain.empty();return this;}});var events=new class({$events:{},addevent:function(c,b,a){c=events.removeon(c);if(b!=$empty){this.$events[c]=this.$events[c]||[]; this.$events[c].include(b);if(a){b.internal=true;}}return this;},addevents:function(a){for(var b in a){this.addevent(b,a[b]);}return this;},fireevent:function(c,b,a){c=events.removeon(c); if(!this.$events||!this.$events[c]){return this;}this.$events[c].each(function(d){d.create({...
...bind:this,delay:a,"arguments":b})();},this);return this;},removeevent:function(b,a){b=events.removeon(b); if(!this.$events[b]){return this;}if(!a.internal){this.$events[b].erase(a);}return this;},removeevents:function(c){var d;if($type(c)=="object"){for(d in c){this.removeevent(d,c[d]); }return this;}if(c){c=events.removeon(c);}for(d in this.$events){if(c&&c!=d){continue;}var b=this.$events[d];for(var a=b.length;a--;a){this.removeevent(d,b[a]); }}return this;}});events.removeon=function(a){return a.replace(/^on([a-z])/,function(b,c){return c.tolowercase();});};var options=new class({setoptions:function(){this.options=$merge.run([this.options].extend(arguments)); if(!this.addevent){return this;}for(var a in this.options){if($type(this.options[a])!="function"||!(/^on[a-z]/).test(a)){continue;}this...
...b,cash:!d});}});(function(){var h={},f={};var i={input:"checked",option:"selected",textarea:(browser.engine.webkit&&browser.engine.version<420)?"innerhtml":"value"}; var c=function(l){return(f[l]||(f[l]={}));};var g=function(n,l){if(!n){return;}var m=n.uid;if(browser.engine.trident){if(n.clearattributes){var q=l&&n.clonenode(false); n.clearattributes();if(q){n.mergeattributes(q);}}else{if(n.removeevents){n.removeevents();}}if((/object/i).test(n.tagname)){for(var o in n){if(typeof n[o]=="function"){n[o]=$empty; }}element.dispose(n);}}if(!m){return;}h[m]=f[m]=null;};var d=function(){hash.each(h,g);if(browser.engine.trident){$a(document.getelementsbytagname("object")).each(g); }if(window.collectgarbage){collectgarbage();}h=f=null;};var j=function(n,l,s,m,p,r){var o=n[s||l];var q=[];while(o){if(o.no...
...And 7 more matches
More Event Handlers - Archive of obsolete content
« previousnext » in this section, the event object is examined and additional events are described.
...if a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events.
...the following sections list some of the events that may be used.
...And 7 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 7 more matches
nsIWebProgress
they limit the set of events that are delivered to an nsiwebprogresslistener instance.
... notify_state_all 0x0000000f receive all nsiwebprogresslistener.onstatechange() events.
... these flags indicate the other events to observe, corresponding to the other four methods defined on nsiwebprogresslistener.
...And 7 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.
... several more specific events are based on mouseevent, including wheelevent and dragevent.
...And 7 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 7 more matches
TouchEvent - Web APIs
troke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" 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">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
... note: the rate at which touchmove events is sent is browser-specific, and may also vary depending on the capability of the user's hardware.
... you must not rely on a specific granularity of these events.
...And 7 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.onclic...
...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 scr...
... port object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on function see the guide to communicating using port for details.
...And 6 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.
... 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.
...frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ url: "./city-info.html", onmessage: function(e) { // message only the frame that pinged us e.source.postmessage("pong", e.origin); } }); var toolbar = toolbar({ name: "ping-pong", title: "ping pong", items: [frame] }); this does not have to be the message event: the other events frame can emit: attach, load and ready, also provide access to source and origin.
...And 6 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.
...to trigger the alert() in the listener and pass the data from the web page, write code such as this in the web page: var element = document.createelement("myextensiondataelement"); element.setattribute("attribute1", "foobar"); element.setattribute("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); this code creates an arbitrary element -- <myextensiondataelement/> -- and inserts it into the web page's dom.
...re others do not also implement the same event with a different meaning, one might either attach a namespace to <myextensiondataelement/> and check on the event handler for the correct namespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as shown below (also see: accessing the elements of the top-level document from a child window).
...And 6 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> on...
... 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 6 more matches
nsIDBChangeListener
this can be used to filter out events that you yourself started.
...this can be used to filter out events that you yourself started.
...this can be used to filter out events that you yourself started.
...And 6 more matches
Basic concepts - Web APIs
requests are objects that receive the success or failure dom events that were mentioned previously.
... indexeddb uses dom events to notify you when results are available.
... dom events always have a type property (in indexeddb, it is most commonly set to "success" or "error").
...And 6 more matches
Using IndexedDB - Web APIs
the indexeddb api is designed to minimize the need for error handling, so you're not likely to see many error events (at least, not once you're used to the api!).
... in the case of opening a database, however, there are some common conditions that generate error events.
...your code might look something like this: var db; var request = indexeddb.open("mytestdatabase"); request.onerror = function(event) { console.log("why didn't you allow my web app to use indexeddb?!"); }; request.onsuccess = function(event) { db = event.target.result; }; handling errors as mentioned above, error events bubble.
...And 6 more matches
PointerEvent - Web APIs
methods pointerevent.getcoalescedevents() returns a sequence of all pointerevent instances that were coalesced into the dispatched pointermove event.
... pointerevent.getpredictedevents() returns a sequence of pointerevent instances that the browser predicts will follow the dispatched pointermove event's coalesced events.
... note: it's important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user).
...And 6 more matches
Multi-touch interaction - Web APIs
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.
... example this example demonstrates using the touchstart, touchmove, touchcancel, and touchend) touch events for the following gestures: single touch, two (simultaneous) touches, more than two simultaneous touches, 1-finger swipe, and 2-finger move/pinch/swipe.
...And 6 more matches
Using XMLHttpRequest - Web APIs
*/ } 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.
... the actual events you can monitor to determine the state of an ongoing transfer are: progress the amount of data that has been retrieved has changed.
...And 6 more matches
Communicating using "postMessage" - Archive of obsolete content
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.
... handling message events in the content script to send a message from a content script, you use the postmessage function of the global self object: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value.
...And 5 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 === book...
...mark); // 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 5 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); } p...
...toolbar supports the following events: attach, detach, show, and hide.
...And 5 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.
...if you use the sdk's event framework for your event targets, users of your module can listen for events using the sdk's standard event api.
...it will emit events when the user adds and visits bookmarks, enabling users of the module to listen for these events using the sdk's standard event api.
...And 5 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 5 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 5 more matches
Vue conditional rendering: editing existing todos - Learn web development
add this method below the previous one: editcancelled() { this.isediting = false; } last for this section, we'll add event handlers for the events emitted by the todoitemeditform component, and attach the appropriate methods to each event.
...below the existing methods inside the methods property: deletetodo(todoid) { const itemindex = this.todoitems.findindex(item => item.id === todoid); this.todoitems.splice(itemindex, 1); }, edittodo(todoid, newlabel) { const todotoedit = this.todoitems.find(item => item.id === todoid); todotoedit.label = newlabel; } next, we'll add the event listeners for the item-deleted and item-edited events: for item-deleted, you'll need to pass the item.id to the method.
...when using native html events (like click), this will pass the native event object to your method.
...And 5 more matches
PerfMeasurement.jsm
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.
... variable type description eventsmeasured eventmask a bit mask of the event types recorded; this can differ from the events requested if the platform doesn't support all of the event types you specified when creating the perfmeasurement object.
...And 5 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 5 more matches
Event.cancelable - Web APIs
WebAPIEventcancelable
event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods.
... most browser-native events that can be canceled are the ones that result from the user interacting with the page.
... canceling the click, scroll, or beforeunload events would prevent the user from clicking on something, scrolling the page, or navigating away from the page, respectively.
...And 5 more matches
Event - Web APIs
WebAPIEvent
there are many types of events, some of which use other interfaces based on the main event interface.
... event itself contains the properties and methods which are common to all events.
... many dom elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them.
...And 5 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.
... querying the gamepad object as you can see, the gamepad events discussed above include a gamepad property on the event object, which returns a gamepad object.
...And 5 more matches
GlobalEventHandlers.onpointerdown - Web APIs
if the pointerdown event isn't canceled through a call to preventdefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work.
... you can also use addeventlistener() to add a listener for pointerdown events.
... example this example demonstrates how to watch for and act upon pointerdown events using onpointerdown.
...And 5 more matches
MutationEvent - Web APIs
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).
... mutation observers are the proposed replacement for mutation events in dom4.
...And 5 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.
... // global vars to cache event state var evcache = new array(); var prevdiff = -1; register event handlers event handlers are registered for the following pointer events: pointerdown, pointermove and pointerup.
...And 5 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.
... unloadeventstart when the unload> event has been thrown, indicating the time at which the previous document in the window began to unload.
...And 5 more matches
Communicating With Other Scripts - Archive of obsolete content
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.
...so the content scripts in the above examples need to be rewritten like this: // content-script.js document.defaultview.postmessage("message from content script", "http://my-domain.org/"); // content-script.js document.defaultview.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using custom dom events as an alternative to using postmessage() you can use custom dom events to communicate between page scripts and content scripts.
...And 4 more matches
tabs - Archive of obsolete content
open, manipulate, and access tabs, and receive tab events.
... tabs hosted by private browser windows won't be seen if you enumerate the tabs module itself, and you won't receive any events for them.
... events open this event is emitted when a new tab is opened.
...And 4 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.
... responding to click events you can respond to click events by assigning a listener to the button's click or change events.
... you can generate click and change events programmatically with the button's click() method.
...And 4 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.
..., amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <browser> or a <tabbrowser> element using addprogresslistener, for example for firefox put the following code in a load listener of a main window: gbrowser.addprogresslistener(mylistener); when used with a browser, the second argument is a mask which determines the type of events that will be received.
...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
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
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.
...this could be useful when trapping the focus and blur events.
...And 4 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.
...not for text widgets): nseditorshellmouselistener (as a nsidommouselistener) note: starting in gecko 12, the editor refuses any events sent by unprivileged content.
...And 4 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
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.
...let's create a component that will be in charge of displaying the buttons and emitting the corresponding events.
...And 4 more matches
Accessible Toolkit Checklist
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.
... msaa server mnemonics ability to define in xml for any widget with a text label (via attribute or a preceding char in label) automatically define mnemonics for all standard common dialogs (like yes/no confirmations and retry/exit error dialogs) support mnemonics in dialogs created via method calls layout engine - drawing underline under correct letter events - making keystrokes do the right thing msaa support, via iaccessible's get_acckeyboardshortcut support for ms windows settings when high contrast checkbox is set (in accessibility control panel, spi_gethighcontrast), or when user selects a "native" skin option in your software, then get all look and feel from current os skin.
...And 4 more matches
Web Replay
for example, incremental gcs (a non-deterministic component) work by posting events to the main thread (a deterministic component), so for now incremental gcs are disabled.
... these spawn a number of threads which do not participate in the recording: any events they execute are live.
... to make it easier to ensure that the non-deterministic components do not have an effect on recorded behavior, certain code regions can be marked as disallowing events — while executing them no thread, lock, or atomic events should be recorded.
...And 4 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 4 more matches
HTMLElement - Web APIs
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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 4 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 4 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.
...dom focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus.
... use onfocus to track the current focus don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element.
...And 4 more matches
WAI ARIA Live Regions/API Support - Developer guides
events fired for web page mutations what changed in document?
...rted 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.
...see [#events_fired_for_web_page_mutations the mutation events list] to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.
...And 4 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
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.
... to allow precise control over your video (and audio) content, htmlmediaelements fire many different events.
...And 4 more matches
Interacting with page scripts - Archive of obsolete content
communicating with page scripts there are two different ways a content script can communicate with a page script: 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.
...so the content scripts in the above examples need to be rewritten like this: // talk.js document.defaultview.postmessage("message from content script", "http://my-domain.org/"); // listen.js document.defaultview.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using custom dom events as an alternative to using postmessage() you can use custom dom events to communicate between page scripts and content scripts.
...this affects the use of custom events to send messages from content scripts to page scripts.
...And 3 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.
...if set, you will receive dommousescroll events.
...if set, you will not receive dommousescroll events.
...And 3 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.
...there were only a handful of events that seemed relevant (load, change, dominsertnode, dominsertnodeintodocument, domactivate) and i tried them all in many different ways.
... some of the events only apply to certain types of elements so i included trying to modify the result of the ajax request to be of the appropriate element type (img, which supports "onload," rather than span, which doesn't, for example).
...And 3 more matches
Intercepting Page Loads - Archive of obsolete content
the easy way: load events this comes from the tabbrowser code snippets page.
...attaching the load event handler to gbrowser allows us to listen to these events for all tabs, without having to worry how many tabs are open.
... you won't be able to make dom modifications like with the load events, since these notifications are triggered before the response arrives and is parsed into dom tree, so this is not the best approach for the typical greasemonkey-style extensions.
...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
Focus and Selection - Archive of obsolete content
focused elements the focused element refers to the element which currently receives input events.
...typically, you will use focus and blur events to update parts of the interface as the user selects elements.
... for instance, you might update a total as the user enters values in other fields, or use focus events to validate certain values.
...And 3 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 3 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.
... events type: comma-separated list a comma-separated list of event names that the command updater will update upon.
...And 3 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.
... the element will, however, still respond to mouse events.
... 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()...
...And 3 more matches
CSS and JavaScript accessibility best practices - Learn web development
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.
... some events can have accessibility issues.
... the main example you'll come across is mouse-specific events like mouseover, mouseout, dblclick, etc.
...And 3 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 3 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 3 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.
...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.
... as of bug 1353206, you can also schedule idle events in non-dom contexts by using services.tm.idledispatchtomainthread.
...And 3 more matches
nsIAppShell
resumenative() resumes the use of additional platform-specific methods to run() gecko events on the main application thread.
... spindown() obsolete since gecko 1.9 (firefox 3) prepare to stop processing events.
... spinup() obsolete since gecko 1.9 (firefox 3) prepare to process events.
...And 3 more matches
nsIDOMMozTouchEvent
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.
... dom/interfaces/events/nsidommoztouchevent.idlscriptable please add a summary to this article.
...And 3 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 3 more matches
nsIThreadInternal
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.
...when an event queue is popped, any events remaining in the queue are appended to the elder queue.
... pusheventqueue() causes any events currently enqueued on the thread to be suppressed until popeventqueue() is called.
...And 3 more matches
nsITransport
the event sink receives transport-specific events as the transfer is occurring.
... for a socket transport, these events can include status about the connection.
...method overview void close(in nsresult areason); nsiinputstream openinputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); nsioutputstream openoutputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsieventtarget aeventtarget); constants open flags.
...And 3 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 3 more matches
Set event listener breakpoints - Firefox Developer Tools
to break when event listeners are hit, check the boxes next the events you are interested in.
... all of the standard events supported in your version of firefox are listed, arranged by which api or api area they're part of.
... logging on events in firefox 71 onwards, the “log” checkbox is available in the event listener breakpoints list.
...And 3 more matches
Document.ononline - Web APIs
WebAPIDocumentononline
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).
...the online and offline events are fired when the value of this attribute changes.
...And 3 more matches
Element: DOMMouseScroll event - Web APIs
bubbles yes cancelable yes interface mousescrollevent if you want to prevent the default action of mouse wheel events, it's not enough to handle only this event on gecko because if scroll amount by a native mouse wheel event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel events may be fired without this event.
... on gecko 17 (firefox 17) or later, you need to call preventdefault() of wheel events which must be fired for every native event.
... properties the event has only one additional property beyond standard events.
...And 3 more matches
Element: click event - Web APIs
click fires after both the mousedown and mouseup events have fired, in that order.
... internet explorer internet explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events.
... any click events will be fired at the underlying element(s) instead.
...And 3 more matches
Element: keydown event - Web APIs
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.
...an uppercase "a" is reported as 65 by all events.
... keyboard events are only generated by <inputs>, <textarea> and anything with the contenteditable attribute or with tabindex="-1".
...And 3 more matches
Element: mouseenter event - Web APIs
here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text.
... with deep hierarchies, the number of mouseenter events sent can be quite huge and cause significant performance problems.
... in such cases, it is better to listen for mouseover events.
...And 3 more matches
Using the Frame Timing API - Web APIs
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.
...) { if (window.performanceobserver === undefined) return; // register the performance observer var observe_frame = new performanceobserver(function(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #1: [" + i + "] = " + perfentries[i].name); } }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); } function init () { create_frame_observer(); var obs = new performanceobserver(frame_observer_2); obs.observe({entrytypes: ['frame']}); } function frame_observer_2(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " ...
... registering for notifications after an observer is created, the next step is to use the performanceobserver.observe() method to specify the set of performance events to observe.
...And 3 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 3 more matches
MouseEvent.button - Web APIs
WebAPIMouseEventbutton
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.
... note: do not confuse this property with the mouseevent.buttons property, which indicates which buttons are pressed for all mouse events types.
...And 3 more matches
MouseEvent.initMouseEvent() - Web APIs
events initialized in this way must have been created with the document.createevent() method.
...the page on creating and triggering events gives more information about the way to use these.
...possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout.
...And 3 more matches
MouseEvent.relatedTarget - Web APIs
he 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 secondary target, relatedtarget returns null.
... focusevent.relatedtarget is a similar property for focus events.
...event.relatedtarget.id : "unknown"; log.innertext = `\ninto ${event.target.id} from ${related} ${mouseoutlog.innertext}`; } result specifications specification status comment ui eventsthe definition of 'mouseevent.relatedtarget' in that specification.
...And 3 more matches
SVGSVGElement - Web APIs
#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.
...each candidate graphics element is to be considered a match only if the same graphics element can be a target of pointer events as defined in pointer-events processing.
...And 3 more matches
UIEvent.initUIEvent() - Web APIs
events initialized in this way must have been created with the document.createevent() method.
...the page on creating and triggering events gives more information about the way to use these.
...for mouse events, it indicates how many times the mouse has been clicked on a given screen location.
...And 3 more matches
WebRTC API - Web APIs
rtcdatachannelevent represents events that occur while attaching a rtcdatachannel to a rtcpeerconnection.
... rtcpeerconnectioniceevent represents events that occur in relation to ice candidates with the target, usually an rtcpeerconnection.
... events bufferedamountlow the amount of data currently buffered by the data channel—as indicated by its bufferedamount property—has decreased to be at or below the channel's minimum buffered data size, as specified by bufferedamountlowthreshold.
...And 3 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%; heig...
... an event handler is established (by calling our old friend addeventlistener() to handle change events on the master gain control.
...it creates the elements that comprise the key and its label, adds some data attributes to the element for later use, and assigns event handlers for the events we care about.
...And 3 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.
... .slidein { animation-duration: 3s; animation-name: slidein; animation-iteration-count: 3; animation-direction: alternate; } @keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } adding the animation event listeners we’ll use javascript code to listen for all three possible animation events.
...And 3 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 3 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 3 more matches
Audio and Video Delivery - Developer guides
you may detect click, touch and/or keyboard events to trigger actions such as play, pause and scrubbing.
... a quick example — first set up your audio and custom controls in html: <audio id="my-audio" src="http://jplayer.org/audio/mp3/miaow-01-tempered-song.mp3"></audio> <button id="my-control">play</button> add a bit of javascript to detect events to play and pause the audio: window.onload = function() { var myaudio = document.getelementbyid('my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); mycontrol.innerhtml = "pause"; } else { myaudio.pause(); mycontrol.innerhtml = "play"; } } function checkkey(e) { if (e.keycode == 32 ) { //spacebar switchstate(); ...
...mp4a.40.2"'> </source> <source id="3gp_src" src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'> </source> <source id="ogg_src" src="video.ogv" type='video/ogv; codecs="theora, vorbis"'> </source> </video> since firefox doesn't support mp4 and 3gp on some platforms due to their patent-encumbered nature, the <source> elements with the ids "mp4_src" and "3gp_src" will receive error events before the ogg resource is loaded.
...And 3 more matches
DOM onevent handlers - Developer guides
the web platform provides several ways to be notified of dom events.
... registering onevent handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events.
...events are actions like: being clicked detecting pressed keys getting focus the onevent handler is usually named with the event it reacts to, like onclick, onkeypress, onfocus, etc.
...And 3 more matches
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
a valid event-value consists of an element id followed by a dot and one of the supported events for that element.
... all valid events (not necessarily supported by all elements) are defined by the dom and html specifications.
...attributename="width" from="0" to="100" begin="startbutton.click" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <rect id="startbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">click me.</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2=...
...And 3 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.
... methods postmessage(data) asynchronously emits "message" events in the enclosed worker, where content script was loaded.
...And 2 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 2 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 password...
...hr 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 ...
...ckbars.jsm sound.jsm tab addons developer guide code snippets creating a user interface firefox hub walkthrough initialization and cleanup prerequisites walkthrough webextensions for firefox for android listening to events in firefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about ...
...And 2 more matches
Event Handlers - Archive of obsolete content
(note that there is a possibility that this may change in the future.) handlers are attached to the bound element, and they are registered by default for bubbling events.
...since xbl handlers usually constitute the default actions for a widget, this allows authors in the bound document to write events that potentially suppress the default actions taken by the xbl handlers.
... for both mouse and key events, modifier keys can be specified using the modifiers attribute.
...And 2 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 2 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.
... style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") 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, sortdirecti...
...And 2 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 2 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.
... building a main loop in javascript javascript works best with events and callback functions.
...you may have multiple components driven by multiple different types of events.
...And 2 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
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.
... 135 event codingscripting, glossary events are assets generated by dom elements, which can be manipulated by a javascript code.
...And 2 more matches
Introduction to web APIs - Learn web development
they use events to handle changes in state we already discussed events earlier on in the course in our introduction to events article, which looks in detail at what client-side web events are and how they are used in your code.
... if you are not already familiar with how client-side web api events work, you should go and read this article first before continuing.
... some web apis contain no events, but most contain at least a few.
...And 2 more matches
Experimental features in Firefox
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.
...this api is used to customize the handling of media-related notifications, to manage events and data useful for presenting a user interface for managing media playback, and to obtain media file metadata.
...And 2 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 2 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 2 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 2 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.
...the current implementation of pr_poll (the primary user of the poll method) requires that the events in *out_flags reflect the caller's view.
...those are the events that the caller should poll the underlying network transport for.
...And 2 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.
...pollable events are implemented using a pipe or a pair of tcp sockets connected via the loopback address, therefore setting and/or waiting for pollable events are expensive operating system calls.
...And 2 more matches
Observer Notifications
xpcom-shutdown-threads shuts down the thread manager, causing all nsthreads to finish processing any events already queued and stop accepting new events.
... user-interaction-active nsidomwindow null sent once every 5000ms while this chrome document sees some kind of user activity (for example, keyboard or mouse events), and at the exact moment of the state transition from idle to active.
... download manager these topics indicate that events related to the download manager have occurred.
...And 2 more matches
nsIDOMEvent
dom/interfaces/events/nsidomevent.idlscriptable this interface is the primary data type for all events in the document object model.
...for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node.
...due to the fact that some systems may not provide this information the value of timestamp may be not available for all events.
...And 2 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.
... obsolete since gecko 7.0 methods geteventtargetchainfor() returns an array of event targets indicating all the targets that will receive the same events that are delivered to the specified target.
...note: some events, especially 'load', may actually have a shorter event target chain than what this methods returns.
...And 2 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.
... inhibit_persistent_caching 1 << 8 this flag prevents caching on disk (or other persistent media), which may be needed to preserve privacy.
...And 2 more matches
Debugger.Object - Firefox Developer Tools
setobjectwatchpoint(handler)(future plan) set a watchpoint on all the referent's own properties, reporting events by callinghandler's methods.
...(however, return resumption values are not supported.) if a given method is absent fromhandler, then events of that sort are ignored.
... the watchpoint consultshandler's properties each time an event occurs, so adding methods to or removing methods fromhandler after setting the watchpoint enables or disables reporting of the corresponding events.
...And 2 more matches
DevTools API - Firefox Developer Tools
events following events are emitted by the gdevtools object via the eventemitter interface.
... events the toolbox object emits following events via the eventemitter interface.
...gdevtools.showtoolbox() or toolbox.selecttool()) and events (e.g.
...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
Document: keydown event - Web APIs
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.
...an uppercase "a" is reported as 65 by all events.
... since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
...And 2 more matches
Document: keyup event - Web APIs
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.
... since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
...And 2 more matches
Element: keyup event - Web APIs
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.
... since firefox 65, the keyup and keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
...And 2 more matches
Element: mouseup event - Web APIs
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.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from...
...And 2 more matches
EventTarget.dispatchEvent() - Web APIs
the normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchevent().
... notes unlike "native" events, which are fired by the dom and invoke event handlers asynchronously via the event loop, dispatchevent() invokes event handlers synchronously.
... dispatchevent() is the last step of the create-init-dispatch process, which is used for dispatching events into the implementation's event model.
...And 2 more matches
GlobalEventHandlers.onpointerleave - Web APIs
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.
...</div> </body> </html> see using pointer events for additional details.
...And 2 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 2 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.
...(see performing a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os.
...And 2 more matches
KeyboardEvent.initKeyEvent() - Web APIs
events initialized in this way must have been created with the document.createevent("keyboardevent") method.
... this method is based on early drafts of document object model (dom) level 2 events specification and is implemented in gecko-based browsers; other browsers implemented keyboardevent.initkeyboardevent based on early drafts of document object model (dom) level 3 events specification.
... favor the modern constructor structure as the only cross-browser way of building events.
...And 2 more matches
KeyboardEvent.location - Web APIs
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.
... note: gecko never fires trusted key events with dom_key_location_joystick except on android.
...And 2 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".
... performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document.
...And 2 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 2 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 2 more matches
RTCPeerConnection.onaddstream - Web APIs
important: this property has been removed from the specification; you should now use rtcpeerconnection.ontrack to watch for track events instead.
... syntax rtcpeerconnection.onaddstream = eventhandler; value a function which handles addstream events.
... these events, of type mediastreamevent, are sent when streams are added to the connection by the remote peer.
...And 2 more matches
RTCPeerConnection - Web APIs
"/><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 pe...
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
... obsolete events addstream sent when a new mediastream has been added to the connection.
...And 2 more matches
Service Worker API - Web APIs
functional events are not dispatched to the service worker until the promise is successfully resolved.
... extendableevent extends the lifetime of the install and activate events dispatched on the serviceworkerglobalscope, as part of the service worker lifecycle.
... this ensures that any functional events (like fetchevent) are not dispatched to the serviceworker, until it upgrades database schemas, and deletes outdated cache entries, etc.
...And 2 more matches
Window: pageshow event - Web APIs
bubbles no cancelable no interface pagetransitionevent event handler property onpageshow examples this example sets up event handlers for events listed in the array events.
... the handler, eventlogger(), logs the type of event that occurred to the console, and includes the value of the persisted flag on pageshow and pagehide events.
... javascript const events = [ "pagehide", "pageshow", "unload", "load" ]; const eventlogger = event => { switch (event.type) { case "pagehide": case "pageshow": let ispersisted = event.persisted ?
...And 2 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 2 more matches
XMLHttpRequest - Web APIs
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" alignment-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.
... if your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the eventsource interface.
...please use server-sent events, web sockets, or responsetext from progress events instead.
...And 2 more matches
XRSession: selectend event - Web APIs
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.
... in this case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received.
...And 2 more matches
XRSession: selectstart event - Web APIs
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.
... in this case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received.
...And 2 more matches
XRSession: squeezeend event - Web APIs
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.
... in this case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received.
...And 2 more matches
XRSession: squeezestart event - Web APIs
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.
... in this case, a single function is used to handle all three events, allowing them to share certain code that's the same regardless of which of the three events is received.
...And 2 more matches
Coordinate systems - CSS: Cascading Style Sheets
mouse events' pagex and pagey properties provide the position of the mouse at the time the event was generated, given relative to the top-left corner of the document.
...this code will be called by the event handler for the various mouse events we watch.
... displaying the coordinates as we'll see in the html, the inner box (the one we're watching for events on) contains several paragraphs; one for each of the four coordinate systems we'll be reporting on.
...And 2 more matches
HTML5 - Developer guides
WebGuideHTMLHTML5
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.
... performance and integration web workers allows delegation of javascript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
...And 2 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed.
... to allow precise control over your audio content, htmlmediaelements fire many different events.
... detecting addition and removal of tracks you can detect when tracks are added to and removed from an <audio> element using the addtrack and removetrack events.
...And 2 more matches
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
a valid event-value consists of an element id followed by a dot and one of the supported events for that element.
... all valid events (not necessarily supported by all elements) are defined by the dom and html specifications.
... to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <rect id="endbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">click me.</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="25" x2="60" y2=...
...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 brows...
...And 2 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.
... properties port eventemitter object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on function see the guide to communicating using port for details.
... events show this event is emitted when the panel is shown.
... message if you listen to this event you can receive message events from content scripts associated with this panel.
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.
...le.log(window.title); } console.log(windows.browserwindows.length); the currently active window is given by browserwindows.activewindow: var windows = require("sdk/windows").browserwindows; windows.on('activate', function(window) { console.log("a window was activated."); var activewindowtitle = windows.activewindow.title; console.log("active window title is: " + activewindowtitle); }); events the browserwindows property emits the following events which can be listened to using its on function.
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.
... system/events api for working with the application observer service.
Performance best practices in extensions - Archive of obsolete content
as mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.
... avoid mouse movement events avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove.
... these events happen with high frequency, so their listeners can trivially create very high cpu overhead.
... when these events cannot be avoided, computation during the listeners should be kept to a minimum and real work throttled.
Session store API - Archive of obsolete content
the session restore process the exact sequence of events that occurs when a session is being restored is: a session state is about to be restored.
... both events are always sent for each tab being restored.
... there's not really a way to determine when the last tab has been restored unless you determine how many tabs need to be restored then count the sstabrestored events.
... when closing a tab, seamonkey does not generate sstab events.
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.
...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.
Elements - Archive of obsolete content
its value can be any legal dom event name (including custom events created using the documentevent interface of the dom).
... [editor's note: a forthcoming dom events specification will presumably outline the list of valid keycode strings.] if this attribute is present, then its value must match the keycode field of the dom key event object in order for the handler to fire.
... [editor's note: as dom events mature more attributes may be added.
... for example, mutation events define several new fields such as relatedtarget that could be supported in the filtering syntax.] key - the key attribute has the same meaning as charcode.
PopupKeys - Archive of obsolete content
the menu key listener described above captures key events on the document.
... thus, a key listener added to a <menupopup> will not receive any key events.
...note that the last argument here is true to listen for events during the capturing phase of event propagation: window.addeventlistener("keypress", someaction, true); however, the default listener provides all the suitable responses to keys, so there shouldn't be a need to handle keys yourself.
...however, the capturing listener ensures that no key events reach the textbox while the menu is open.
command - Archive of obsolete content
the element will, however, still respond to mouse events.
...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.
... 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, getelementsbyattribu...
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-m...
... allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
... the element will, however, still respond to mouse events.
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 ke...
... allowevents type: boolean if true, events are passed to children of the element.
... otherwise, events are passed to the element only.
... the element will, however, still respond to mouse events.
calICalendarView - Archive of obsolete content
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.
...note that this date is typically not immediately useful for querying for the events and tasks shown in the calicalendarview.
...other areas of the code will often use this as a basis for default values for new calievents and calitodos.
-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.
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.
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 ...
Dynamic behavior in Svelte: working with variables and props - Learn web development
svelte has the on:eventname directive for listening to dom events.
... 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 ...
Focus management with Vue refs - Learn web development
well, vue components undergo a series of events, known as a lifecycle.
...data and events are not yet available.
... 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 ...
Profiling with Xperf
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.
...note that it's possible to capture even more data for the non-heap profile; for example, you might want to be able to correlate heap events with performance data, so you can do "xperf -on base -stackwalk profile".
... in the viewer, when summary data is viewed for heap events (heap allocations outstanding, etc.
Profiling with the Firefox Profiler
timeline the timeline has several rows of tracing markers (colored segments) which indicate interesting events.
...note that high priority events such as vsync are not included here.
... a significant portion of time can be spent in idle, blocking calls like waiting for events.
... this is ideal for a responsive application to be ready to service incoming events.
Starting WebLock
observersare objects that are notified when various events occur.
...if your object would like to register for this or other events, it first must implement the nsiobserver interface.
... once you do this, the observer service implementing nsiobserverservice can notify your object of registered events by means of this interface, as in the figure below.
...the nsiobserver interface is for listening to various events that gecko generates.
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 ...
nsICompositionStringSynthesizer
(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.
... dispatchevent() dispatches dom events for setting the composition string which are specified by setstring(), appendclause() and setcaret() to the focused editor.
... if appendclause() hasn't been called, this dispatches events to set composition string without clause information.
...however, this must always return false since all dispatching dom events are not cancelable.
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.
... void removewindowlistener( in nsidomwindow awindow ); parameters awindow the dom window that the accelerometer should stop sending mozorientation events to.
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.
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.
... playeventsound() plays the system sound for the specified event.
... void playeventsound( in unsigned long aeventid ); parameters aeventid an event id which is defined in the constants.
...you should instead use playeventsound() instead.
XPCOM Interface Reference
dikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsol...
...oadobservernsidownloadprogresslistenernsidownloadernsidragdrophandlernsidragservicensidragsessionnsidroppedlinkhandlernsidroppedlinkitemnsidynamiccontainernsieditornsieditorboxobjectnsieditordocshellnsieditorimesupportnsieditorloggingnsieditormailsupportnsieditorobservernsieditorspellchecknsieffectivetldservicensienumeratornsienvironmentnsierrorservicensieventlistenerinfonsieventlistenerservicensieventsourcensieventtargetnsiexceptionnsiextensionmanagernsiexternalhelperappservicensiexternalprotocolservicensiexternalurlhandlerservicensiftpchannelnsiftpeventsinknsifactorynsifavicondatacallbacknsifaviconservicensifeednsifeedcontainernsifeedelementbasensifeedentrynsifeedgeneratornsifeedpersonnsifeedprocessornsifeedprogresslistenernsifeedresultnsifeedresultlistenernsifeedtextconstructnsifilensifileinp...
...rentalcontrolsservicensiparserutilsnsipasswordnsipasswordmanagernsipermissionnsipermissionmanagernsipipensiplacesimportexportservicensiplacesviewnsipluginhostnsiprefbranch2nsipreflocalizedstringnsiprefservicensiprincipalnsiprinterenumeratornsiprintingpromptnsiprivatebrowsingservicensiprocessnsiprocess2nsiprocessscriptloadernsiprofilensiprofilelocknsiprofileunlockernsiprogramminglanguagensiprogresseventsinknsipromptnsipromptservicensipropertiesnsipropertynsipropertybagnsipropertybag2nsipropertyelementnsiprotocolhandlernsiprotocolproxycallbacknsiprotocolproxyfilternsiprotocolproxyservicensiproxyinfonsipushmessagensipushservicensipushsubscriptionnsiradiointerfacelayernsirandomgeneratornsirequestnsirequestobservernsiresumablechannelnsirunnablensishentrynsishistorynsishistorylistenernsisockssocketinf...
...extinputprocessornsitextinputprocessorcallbacknsitextinputprocessornotificationnsithreadnsithreadeventfilternsithreadinternalnsithreadmanagernsithreadobservernsithreadpoolnsithreadpoollistenernsitimernsitimercallbacknsitoolkitnsitoolkitprofilensitoolkitprofileservicensitraceablechannelnsitransactionnsitransactionlistnsitransactionlistenernsitransactionmanagernsitransferablensitransportnsitransporteventsinknsitransportsecurityinfonsitreeboxobjectnsitreecolumnnsitreecolumnsnsitreecontentviewnsitreeselectionnsitreeviewnsiurinsiurifixupnsiurifixupinfonsiurlnsiurlformatternsiurlparsernsiutf8converterservicensiutf8stringenumeratornsiuuidgeneratornsiupdatensiupdatechecklistenernsiupdatecheckernsiupdateitemnsiupdatemanagernsiupdatepatchnsiupdatepromptnsiupdatetimermanagernsiuploadchannelnsiuploadchannel...
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.
...e, an uncaught exception hook may have access to browser-level features like the alert function, which this api’s implementation does not, making it possible to present debugger errors to the developer in a way suited to the context.) debugger handler functions each debugger instance inherits accessor properties with which you can store handler functions for spidermonkey to call when given events occur in debuggee code.
... when one of the events described below occurs in debuggee code, the engine pauses the debuggee and calls the corresponding debugging handler on each debugger instance that is observing the debuggee.
Waterfall - Firefox Developer Tools
non-incremental gc events are labeled "(non-incremental)".
... blocking javascript by default, a site's javascript is executed in the same thread that the browser uses for layout updates, repaints, dom events, and so on.
... garbage collection red markers in the waterfall represent garbage collection (gc) events, in which spidermonkey (the javascript engine in firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it.
... in trying to avoid gc events, and especially non-incremental gc events, it's wise not to try to optimize for the specific implementation of the javascript engine.
CompositionEvent - Web APIs
the dom compositionevent represents events that occur due to the user indirectly entering text.
...e4"/><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-events: all;} constructor compositionevent() creates a new compositionevent object instance.
... specifications specification status comment ui eventsthe definition of 'compositionevent' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'compositionevent' in that specification.
CustomEvent - Web APIs
the customevent interface represents events initialized by an application for any purpose.
...setting its value to true before returning from an event handler prevents propagation of the event.
... event.stoppropagation() stops the propagation of events further along in the dom.
...(prevents the event from bubbling.) event.preventcapture() obsolete since gecko 24 obsolete; use event.stoppropagation instead.
Detecting device orientation - Web APIs
there are two javascript events that handle orientation information.
...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.
... processing orientation events all you need to do in order to begin receiving orientation change is to listen to the deviceorientation event: note: gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices.
... processing motion events motion events are handled the same way as the orientation events except that they have their own event's name: devicemotion window.addeventlistener("devicemotion", handlemotion, true); what's really changed are the information provided within the devicemotionevent object passed as a parameter of the handlemotion function.
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.
...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.
... the touch-action css property prevents the input from continuing.
... examples using addeventlistener(): document.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled') }); using the onpointercancel event handler property: document.onpointercancel = (event) => { console.log('pointer event cancelled') }; specifications specification status pointer events obsolete ...
Element: mousedown event - Web APIs
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.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from...
...drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result specifications specification status ui eventsthe definition of 'mousedown' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'mousedown' in that specification.
Element: mouseleave event - Web APIs
here four events are sent to the four elements of the hierarchy when the pointer moves from the text to an area outside of the most outer div represented here.
... html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible.
...ng the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); } result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'mouseleave' in that specification.
Element: mousemove event - Web APIs
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.
... html <h1>drawing with mouse events</h1> <canvas id="mypics" width="560" height="360"></canvas> css canvas { border: 1px solid black; width: 560px; height: 360px; } javascript // when true, moving the mouse draws on the canvas let isdrawing = false; let x = 0; let y = 0; const mypics = document.getelementbyid('mypics'); const context = mypics.getcontext('2d'); // event.offsetx, event.offsety gives the (x,y) offset from...
...drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); } result specifications specification status ui eventsthe definition of 'mousemove' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'mousemove' in that specification.
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.
...stener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="output">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
Event.composed - Web APIs
WebAPIEventcomposed
(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.).
... most other types of events are not composed, and so will return false.
... for example, this includes synthetic events that are created without their composed option wil set to true.
...however, capturing only composed events are also handled at host as if they were in at_target phase.
Event.initEvent() - Web APIs
WebAPIEventinitEvent
events initialized in this way must have been created with the document.createevent() method.
...the page on creating and triggering events gives more information about the way to use these.
... living standard from document object model (dom) level 2 events specification, deprecated it, superseded by event constructors.
... document object model (dom) level 2 events specificationthe definition of 'event.initevent()' in that specification.
EventTarget - Web APIs
eventtarget is a dom interface implemented by objects that can receive events and may have listeners for them.
...o="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" 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></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance.
... document object model (dom) level 3 events specificationthe definition of 'eventtarget' in that specification.
... document object model (dom) level 2 events specificationthe definition of 'eventtarget' in that specification.
FocusEvent - Web APIs
the focusevent interface represents focus-related events, including focus, blur, focusin, and focusout.
...troke="#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;} constructor focusevent() creates a focusevent event with the given parameters.
... specifications specification status comment ui eventsthe definition of 'focusevent' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'focusevent' in that specification.
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)).
...these error events do not bubble up to window, but (at least in firefox) can be handled with a window.addeventlistener configured with usecapture set to true.
... source: url of the script where the error was raised (string) lineno: line number where error was raised (number) colno: column number for the line where the error occurred (number) error: error object (object) when the function returns true, this prevents the firing of the default event handler.
GlobalEventHandlers.onpointercancel - Web APIs
the onpointercancel property of the globaleventhandlers mixin is an eventhandler that processes pointercancel events.
... example this example shows two ways to use onpointercancel to handle an element's pointercancel events.
...</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointercancel' in that specification.
... recommendation non-stable version pointer eventsthe definition of 'onpointercancel' in that specification.
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.
...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.
... the touch-action css property prevents the input from continuing.
...entlistener(): const para = document.queryselector('p'); para.addeventlistener('pointercancel', (event) => { console.log('pointer event cancelled'); }); using the onpointercancel event handler property: const para = document.queryselector('p'); para.onpointercancel = (event) => { console.log('pointer event cancelled'); }; specifications specification status pointer events obsolete ...
HTMLMediaElement - Web APIs
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.
...the best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or mozaudioavailable events have begun firing.
... events inherits methods from its parent, htmlelement , defined in the globaleventhandlers mixin.
... listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
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.
...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.
...other than by using events, you can enqueue a task by using settimeout() or setinterval().
... when multiple programs and multiple code objects within those programs start to try to work at once, alongside a browser which also needs processor time—let alone time to render and draw the site and its own ui, handle user events, and so forth—everything becomes clogged up far too easily nowadays.
IDBTransaction - Web APIs
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 co...
...since such catastrophic events are rare, most consumers should not need to concern themselves further.
...commit() can be used to start the commit process without waiting for events from outstanding requests to be dispatched.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
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.
... if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); interfaces inputdevicecapabilities provides logical information about an input device.
KeyboardEvent.code - Web APIs
handle keyboard events in a game this example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical "wasd" keyboard layout for steering forward, left, backward, and right.
... function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.
...most real games would watch for keydown events, start motion when that happens, and stop the motion when the corresponding keyup occurs, instead of relying on key repeats.
... specification specification status comment ui eventsthe definition of 'keyboardevent.code' in that specification.
Key Values - Web APIs
often handled in hardware so that events aren't generated for this key.
...often handled in hardware so that events aren't generated for this key.
...there are other keys defined by various platforms for korean keyboards, but these are the most common and are the ones identified by the ui events specification.
... the 10 key, if present, generates events with the key value of "0".
MSSiteModeEvent - Web APIs
mssitemodeevent provides event properties that are specific to pinned site events.
...*note that as of microsoft edge, the createevent()/initevent() constructor pattern for synthetic events is deprecated.
... stopimmediatepropagation prevents any further propagation of an event.
... stoppropagation prevents propagation of an event beyond the current target.
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
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.
...t) { pagex.innertext = event.pagex; pagey.innertext = event.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events.
... </p> <p> <code>pagex</code>: <span id="x">n/a</span> </p> <p> <code>pagey</code>: <span id="y">n/a</span> </p> </div> the html is simple; the box we'll be watching for mouse events on is given the class "box".
... touch eventsthe definition of 'pagex' in that specification.
MouseEvent.screenX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result routing an event when you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) doredbutton(); } specifications specification status comment ...
... document object model (dom) level 3 events specificationthe definition of 'mouseevent.screenx' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.sceenx' in that specification.
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.
PointerEvent.isPrimary - Web APIs
only a primary pointer will produce compatibility mouse events.
...if there are multiple primary pointers, these pointers will all produce compatibility mouse events (see pointer_events for more information about pointer, mouse and touch interaction).
... target.addeventlistener('pointerdown', function(event) { if (event.isprimary) process_primary_pointer(event); else process_secondary_pointer(event); }, false); specifications specification status comment pointer events – level 2the definition of 'isprimary' in that specification.
... pointer eventsthe definition of 'isprimary' in that specification.
Using Service Workers - Web APIs
the service worker is now ready to process events.
... the below graphic shows a summary of the available service worker events: promises promises are a great mechanism for running async operations, with success dependant on one another.
...we can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them?
... promises passed into waituntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new service worker.
UIEvent.detail - Web APIs
WebAPIUIEventdetail
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.
... specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'uievent.detail' in that specification.
... obsolete document object model (dom) level 2 events specificationthe definition of 'uievent.detail' in that specification.
UIEvent - Web APIs
WebAPIUIEvent
the uievent interface represents simple user interface events.
...25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" 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">uievent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
... ui events working draft extend dom3 document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
... document object model (dom) level 2 events specificationthe definition of 'uievent' in that specification.
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.
Movement, orientation, and motion: A WebXR example - Web APIs
amatrixout = 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".
... implementing the controls now let's take a look at the code that handles turning keyboard and mouse events into something usable for controlling an avatar in a webxr scenario.
... moving using the keyboard in order to allow the user to move through the 3d world even if they don't have a webxr device with the inputs to perform movement through space, our handler for keydown events, handlekeydown(), responds by updating offsets from the object's origin based on which key was pressed.
Starting up and shutting down a WebXR session - Web APIs
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.
... important session maintenance events over the course of your webxr session, you may receive any of a number of events which indicate changes to the state of the session, or which let you know about things you need to do to keep the session operating properly.
... another common cause for reset events is when a bounded reference space (a reference space whose xrreferencespacetype is bounded-floor) has its geometry as specified by the xrboundedreferencespace's property boundsgeometry change.
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.
... audioprocessingevent the web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed.
... offlineaudiocompletionevent the offlineaudiocompletionevent represents events that occur when the processing of an offlineaudiocontext is terminated.
WheelEvent - Web APIs
the wheelevent interface represents events that occur due to the user moving a mouse wheel or similar input device.
...troke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
... specifications specification status comment ui eventsthe definition of 'the wheelevent interface' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'wheelevent' in that specification.
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.
... in general, you should prefer the use of an @media print css at-rule, but it may be necessary to use these events in some cases.
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.
...this prevents elements that are used to construct the switch from being interacted with individually by assistive technologies.
... <button role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> javascript this javascript code defines and applies a function to handle click events on switch widgets.
... button.switch { margin: 0; padding: 0; width: 70px; height: 26px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line-height: 20px; vertical-align: middle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262; color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line-height: 20px; user-select: none; vertical-align: middl...
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.
<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.
... example let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the document.
...since input events are fired every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used.
HTTP headers - HTTP
WebHTTPHeaders
cross-origin-opener-policy (coop) prevents other domains from opening/controlling a window.
... cross-origin-resource-policy (corp) prevents other domains from reading the response of the resources to which this header is applied.
... expect-ct allows sites to opt in to reporting and/or enforcement of certificate transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed.
... server-sent events last-event-id ...
Using Promises - JavaScript
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).
... the two events are: rejectionhandled sent when a promise is rejected, after that rejection has been handled by the executor's reject function.
... ideally, of course, you should examine the rejected promises to make sure none of them are actual code bugs before just discarding these events.
... when promises and tasks collide if you run into situations in which you have promises and tasks (such as events or callbacks) which are firing in unpredictable orders, it's possible you may benefit from using a microtask to check status or balance out your promises when promises are created conditionally.
context-menu - Archive of obsolete content
items are bound to contexts in much the same way that event listeners are bound to events.
... events message if you listen to this event you can receive message events from content scripts associated with this menu item.
... events message if you listen to this event you can receive message events from content scripts associated with this menu item.
page-worker - Archive of obsolete content
see working with events for help with events.
... properties port object that allows you to: send events to the content script using the port.emit function receive events from the content script using the port.on function see the guide to communicating using port for details.
... events message if you listen to this event you can receive message events from content scripts associated with this page worker.
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.
...all listeners of the specific type can be easily removed (only two argument must be passed): off(target, 'message'); also, removing all registered listeners is possible (only one argument must be passed): off(target); globals functions on(target, type, listener) registers an event listener that is called every time events of the specified type is emitted on the given event target.
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.
...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.
... events data the data event is emitted for every item returned from a search.
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.
... 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.
Building accessible custom components in XUL - Archive of obsolete content
events in xul are similar to events in html documents.
...you can capture events on the way down or on the way up, and registered event handlers get an event object which has all the properties you would expect for that event.
... <caption>focus is tracked properly during keyboard navigation</caption> further reading document object model events adding editing capabilities download stage-5.zip install stage-5.xpi we now have a fully accessible xul spreadsheet, correctly focusable, correctly keyboard-navigable, and correctly exposed to assistive technologies.
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.
Textbox (XPFE autocomplete) - Archive of obsolete content
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.
... 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.
Keyboard Shortcuts - Archive of obsolete content
key events there are three keyboard events that may be used if the key related features described above aren't suitable.
... these events are: keypress called when a key is pressed and released when an element has the focus.
... key events are only sent to the element that has the focus.
arrowscrollbox - Archive of obsolete content
="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, sortdirecti...
... the element will, however, still respond to mouse events.
... 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 disabled type: boolean gets...
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, sortdirecti...
... the element will, however, still respond to mouse events.
... 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, getattr...
listhead - Archive of obsolete content
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 p...
... 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(), getattri...
listheader - Archive of obsolete content
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, sortdirecti...
... 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, get...
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, sortdirecti...
... events alertactive type: event fired when a notification element is shown.
...see notification box events.
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.
... 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, sortdirecti...
...on, 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...
tabbox - Archive of obsolete content
</tabs> <tabpanels> <tabpanel><!-- 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.
... eventnode type: eventtarget indicates the node where keyboard navigation events listener is set up.
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.
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows 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()...
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.
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.
NPP_HandleEvent - Archive of obsolete content
values: ms windows: pointer to npevent structure mac os: pointer to a standard mac os eventrecord unix/x11: pointer to a standard xlib xevent for a list of possible events, see npevent.
... description the browser calls npp_handleevent to tell the plug-in when events take place in the plug-in's window or drawable area.
...for this reason, npp_handleevent is only way the plug-in can receive events from its host application on mac os.
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.
Displaying notifications (deprecated) - Archive of obsolete content
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.
... note: if the notification is dismissed by the user clicking on it, both events will get fired.
... for example, let's simply append a little html to our document when these events fire: notification.onclick = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was clicked.</strong>"; document.body.appendchild(e); }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.appendchild(e); }; displaying the notification once the notification is configured the way you want it to be, call its show() method to display the notification: notification.show(); on android, for example, the resulting notification panel looks like this: when the user taps on the "hey, check this out!" notification here, the resulting changes to the document look like th...
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.
...attributes events special case - the idref of a case element to select representations the case element doesn't have a visual representation.
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.
...the same pattern is true for the second listener: keyup events will fire the keyuphandler() function (when the keys stop being pressed).
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).
... 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).
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.
... 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 ...
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 t...
...odo 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 ...
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.
... 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 ...
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.
... 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 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 & note...
... 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.
... 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 change...
Mozilla’s UAAG evaluation report
(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.
...(p1) ni see bug 36539 9.5 no events on focus change.
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 annoyin...
...g 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 co...
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.
...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.
Performance
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.
... better: content-document-global-created notifications can be substituted with domwindowcreated events other observers and services should be registered in a process script or jsm instead load frame scripts on demand bad: // addon.js services.mm.loadframescript("framescript.js", /*delayed:*/ true) // stuff communicating with the framescript // framescript.js function onlyonceinabluemoon() { // we only need this during a total solar eclipse while goat blood rains from the sky senda...
... clean up on addon unload bad: all the previous examples, *even the "better" ones* if your addon is restartless or uses the sdk then updates or the user turning it off and on will load to unload/reload events.
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.
... other methods and events we've only covered a fraction of the new methods and events that the browser api adds.
... for the full list of events, see the browser api landing page events section.
Gecko Keypress Event
gecko replaces the charcode of dom keypress events for accelerator key handling, but that is not enough.
...xul applications should not attempt to implement shortcuts by interpreting keypress events.
... similarly, applications should use the accesskey attribute for access keys, rather than attempting to interpret keypress events.
WebRequest.jsm
opt_extrainfospec array of string the optional opt_extrainfospec argument lets you pass extra instructions for the handling of events.
... events the events exported by webrequest.jsm are triggered at the various stages of making a request.
... the onauthrequired, onbeforeredirect, and onerroroccurred events are not supported.
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.
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 pr_poll_err and pr_poll_nval events are always reported by pr_poll.
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.
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.
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.
... count the maximum number of events to return, with preference given to more recent events [make this preference its own parameter?].
Creating the Component Code
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.
...this prevents clients from ever accessing the component with a contract id.) to be accessible to others, you need to publish the cid and/or contract id of the component along with the interfaces it supports.
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.
...finishrestore() finish firing webprogresslistener notifications and dom events for restoring a page presentation.
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.
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.
... when this method returns, the thread pool and all its threads will have been shut down, and it is no longer be possible to dispatch events to the thread pool.
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.
... nsithreadobserver provides the ability to monitor a thread, to receive notifications when events are dispatched to it and when they're finished being processed.
... nsirunnable this interface is the base for all events/runnable objects which are dispatched to threads.
Mail event system
this document describes the system that events are passed amongst the mail objects.
... events at the time this document is being written, these are the current events: nsifolder nsifolderlistener notifyitemadded onitemadded notifyitemremoved onitemremoved notifyitempropertychanged onitempropertychanged notifyitemintpropertychanged onitemintpropertychanged notifyitemboolpropertychanged onitemboolpropertychanged ...
...both of these could be done by making atoms for each of these events and just firing it with notifyitemevent.
Mozilla
the component can then call methods on the observer interface to signal the external code when predefined events occur.
... 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.
...it prevents segmentation faults and guarantees thread safety, all with an easy-to-learn syntax.
AudioTrackList - Web APIs
events addtrack fired when a new audio track has been added to the media element.
... usage notes in addition to being able to obtain direct access to the audio tracks present on a media element, audiotracklist lets you set event handlers on the addtrack and removetrack events, so that you can detect when tracks are added to or removed from the media element's stream.
...to keep it up to date, handlers for the addtrack and removetrack events are set up.
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.
... 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.
...this is done by listening for the chargingchange, levelchange, chargingtimechange, dischargingtimechange events.
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.
CloseEvent.initCloseEvent() - Web APIs
events initialized in this way must have been created with the document.createevent() method.
...the page on creating and triggering events gives more information about the way to use these.
...possible types for mouse events include: click, mousedown, mouseup, mouseover, mousemove, mouseout.
CompositionEvent.data - Web APIs
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.
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.
Document: scroll event - Web APIs
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.
... note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary.
Element: auxclick event - Web APIs
auxclick is fired after the mousedown and mouseup events have been fired, in that order.
... when listening for auxclick events originating on elements that do not support input or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button.
... specification specification status ui eventsthe definition of 'auxclick' in that specification.
Element: dblclick event - Web APIs
dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup events).
...list.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'dblclick' in that specification.
Element: mouseout event - Web APIs
mouseout and mouseleave the following example illustrates the difference between mouseout and mouseleave events.
...false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseout' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'mouseout' in that specification.
Element: mouseover event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onmouseover examples the following example illustrates the difference between mouseover and mouseenter events.
...xecuted 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.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'mouseover' in that specification.
Element: scroll event - Web APIs
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.
... note, however, that input events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary.
Event.bubbles - Web APIs
WebAPIEventbubbles
passes the event along if does not passiton(e); } // already bubbling dooutput(e); } note: only certain events can bubble.
... events that do bubble have this property set to true.
... living standard document object model (dom) level 2 events specificationthe definition of 'event.bubbles' in that specification.
ExtendableEvent.waitUntil() - Web APIs
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.
... this gives the service worker time to update database schemas and delete outdated caches, so other events can rely on a completely upgraded state.
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.
...dde4"/><a xlink:href="/docs/web/api/extendableevent" 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">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
Using files from web applications - Web APIs
exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy: let dropbox; dropbox = document.getelementbyid("dropbox"); dropbox.addeventlistener("dragenter", dragenter, false); dropbox.addeventlistener("dragover", dragover, false); dropbox.addeventlistener("drop", drop, false); in this example, we're turning the element with the id dropbox into our drop zone.
... this is done by adding listeners for the dragenter, dragover, and drop events.
... we don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple.
FocusEvent.relatedTarget - Web APIs
mouseevent.relatedtarget is a similar property for mouse events.
... syntax secondtarget = focusevent.relatedtarget specifications specification status comment ui eventsthe definition of 'focusevent.relatedtarget' in that specification.
... working draft document object model (dom) level 3 events specificationthe definition of 'focusevent.relatedtarget' in that specification.
Frame Timing API - Web APIs
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.
...next, performanceobserver.observe() is used to specify the set of performance events to observe - in this case, just the "frame" event type.
Fullscreen API - Web APIs
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.
... events 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.
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).
GlobalEventHandlers.onanimationend - Web APIs
the onanimationend property of the globaleventhandlers mixin is the eventhandler for processing animationend events.
...we'll use this to show information about the events we receive.
... function log(msg, event) { let logbox = document.getelementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classn...
GlobalEventHandlers.onauxclick - Web APIs
the onauxclick property of the globaleventhandlers mixin is an eventhandler for processing auxclick events.
...it fires after the mousedown and mouseup events, in that order.
... specifications specification status comment ui eventsthe definition of 'onauxclick' in that specification.
GlobalEventHandlers.onpointerenter - Web APIs
the onpointerenter property of the globaleventhandlers mixin is an eventhandler that processes pointerenter events.
...</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerenter' in that specification.
... recommendation non-stable version pointer eventsthe definition of 'onpointerenter' in that specification.
GlobalEventHandlers.onpointermove - Web APIs
the onpointermove property of the globaleventhandlers mixin is an eventhandler that processes pointermove events.
...</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointermove' in that specification.
... recommendation non-stable version pointer eventsthe definition of 'onpointermove' in that specification.
GlobalEventHandlers.onpointerout - Web APIs
the onpointerout property of the globaleventhandlers mixin is an eventhandler that processes pointerout events.
...</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerout' in that specification.
... recommendation non-stable version pointer eventsthe definition of 'onpointerout' in that specification.
GlobalEventHandlers.onpointerover - Web APIs
the onpointerover property of the globaleventhandlers mixin is an eventhandler that processes pointerover events.
...</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerover' in that specification.
... recommendation non-stable version pointer eventsthe definition of 'onpointerover' in that specification.
GlobalEventHandlers.onpointerup - Web APIs
the onpointerup property of the globaleventhandlers mixin is an eventhandler that processes pointerup events.
...</div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerup' in that specification.
... recommendation non-stable version pointer eventsthe definition of 'onpointerup' in that specification.
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.
...</div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
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.
...</div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
HTMLAudioElement - Web APIs
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: transitionend event - Web APIs
if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
..."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 that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
... if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
HTMLFormElement - Web APIs
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.
...when false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
... events listen to these events using addeventlistener(), or by assigning an event listener to the oneventname property of this interface.
HTMLImageElement - Web APIs
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.
... the specified image is corrupted in some way that prevents it from being loaded.
HTMLVideoElement - Web APIs
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.
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.
InputEvent.inputType - Web APIs
for a complete list of the available input types, see the attributes section of the input events level 1 spec.
... examples this example logs the inputtype for input events on an editable <div>.
... specifications specification status comment ui eventsthe definition of 'inputtype' in that specification.
InputEvent - Web APIs
troke="#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;} constructor inputevent() creates an inputevent object.
... specifications specification status comment input events level 2the definition of 'inputevent' in that specification.
... working draft ui eventsthe definition of 'inputevent' in that specification.
KeyboardEvent.charCode - Web APIs
charcode is never set in the keydown and keyup events.
...actually with the chinese ime i'm using, entering the ime results in a keypress event with keycode = 229 and no other key events fire until the ime exits (which may happen after multiple characters are inputted).
... specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.charcode' in that specification.
KeyboardEvent.getModifierState() - Web APIs
all modifiers (except "fnlock", "hyper", "super" and "symbol" which are defined after gecko implements this) are always supported for untrusted events on gecko.
... "accel" virtual modifier note: the "accel" virtual modifier has been effectively deprecated in current drafts of the dom3 events specification.
... specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'getmodifierstate()' in that specification.
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.
...ink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" 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">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
MessageEvent - Web APIs
this is used to represent messages in: server-sent events (see eventsource.onmessage).
...e="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" 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">messageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
... messageevent.source read only a messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
MouseEvent.altKey - Web APIs
WebAPIMouseEventaltKey
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.buttons - Web APIs
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.
...`${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.addeventlistener('mouseup', logbuttons); document.addeventlistener('mousedown', logbuttons); // document.addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log) result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
... obsolete initial definition ui eventsthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.clientX - Web APIs
document object model (dom) level 3 events specificationthe definition of 'mouseevent.clientx' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.clientx' in that specification.
MouseEvent.clientY - Web APIs
document object model (dom) level 3 events specificationthe definition of 'mouseevent.clienty' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.clienty' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.screenY - Web APIs
document object model (dom) level 3 events specificationthe definition of 'mouseevent.screeny' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.sceeny' in that specification.
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
... obsolete no change from document object model (dom) level 2 events specification.
... document object model (dom) level 2 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
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.
...hiding an <iframe> using css properties (such as display: none;) doesn't trigger visibility events or change the state of the document contained within the frame.
...for example, watching for blur and focus events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user.
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.
PointerEvent.pointerId - Web APIs
the identifier is unique, being different from the identifiers of all other active pointer events.
... let id; // let's assume that this is a previously saved pointerid target.addeventlistener('pointerdown', function(event) { // compare previous event's id that was cached // to current event's id and handle accordingly if (id === event.pointerid) process_event(event); }, false); specifications specification status comment pointer events – level 2the definition of 'pointerid' in that specification.
... pointer eventsthe definition of 'pointerid' in that specification.
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.
...this is case-sensitive and should be one of "rejectionhandled" or "unhandledrejection", to match the event names of the possible (non-synthetic) promiserejectionevent events that user agents can actually fire).
RTCPeerConnection: icegatheringstatechange event - Web APIs
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 between...
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; ...
SVGGeometryElement - Web APIs
><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.
ServiceWorkerGlobalScope - Web APIs
an active service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage.
...ef="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties serviceworkerglobalscope.clients read only contains the clients object associated with the service worker.
... events activate occurs when a serviceworkerregistration acquires a new serviceworkerregistration.active worker.
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.
TextTrackList - Web APIs
events addtrack fired when a new text track has been added to the media element.
... usage notes in addition to being able to obtain direct access to the text tracks present on a media element, texttracklist lets you set event handlers on the addtrack and removetrack events, so that you can detect when tracks are added to or removed from the media element's stream.
...to keep it up to date, handlers for the addtrack and removetrack events are set up.
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.
... 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.target - Web APIs
WebAPITouchtarget
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.
... for (var i=0; i < e.targettouches.length; i++) { console.log("touchpoint[" + i + "].target = " + e.targettouches[i].target); } }, false); specifications specification status comment 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.
sourceCapabilities - Web APIs
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.
... for example, when a user lifts their finger off of a touchscreen, several uievents may be generated including touchend, mousedown, click, and focus.
... all of these events must have the same sourcecapabilities representing the touchscreen.
UIEvent.view - Web APIs
WebAPIUIEventview
specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
... obsolete from document object model (dom) level 2 events specification, changed the type of view from abstractview to windowproxy.
... document object model (dom) level 2 events specificationthe definition of 'uievent' in that specification.
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.
... performance measures measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks.
VideoTrackList - Web APIs
events addtrack fired when a new video track has been added to the media element.
... usage notes in addition to being able to obtain direct access to the video tracks present on a media element, videotracklist lets you set event handlers on the addtrack and removetrack events, so that you can detect when tracks are added to or removed from the media element's stream.
...to keep it up to date, handlers for the addtrack and removetrack events are set up.
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.
A simple RTCDataChannel sample - Web APIs
this is saved, and we set up, on the channel, event listeners for the events we want to handle.
... handling channel status changes both our local and remote peers use a single method to handle events indicating a change in the status of the channel's connection.
... our example's remote peer, on the other hand, ignores the status change events, except for logging the event to the console: function handlereceivechannelstatuschange(event) { if (receivechannel) { console.log("receive channel's status has changed to " + receivechannel.readystate); } } the handlereceivechannelstatuschange() method receives as an input parameter the event which occurred; this will be an rtcdatachannelevent.
Window: blur event - Web APIs
WebAPIWindowblur event
it uses addeventlistener() to monitor focus and blur events.
...click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); 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 ...
Window: focus event - Web APIs
it uses addeventlistener() to monitor focus and blur events.
...click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); 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 ...
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.
...these events are of type devicelightevent.
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.
...these events are of type deviceproximityevent.
Window: popstate event - Web APIs
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.
... to better understand when the popstate event is fired, consider this simplified sequence of events that occurs when the current history entry changes due to either the user navigating the site or the history being traversed programmatically.
...this will eventually send events such as domcontentloaded and load to the window containing the document, but the steps below will continue to execute in the meantime.
window.postMessage() - Web APIs
security concerns if you do not expect to receive messages from other sites, do not add any event listeners for message events.
... as with any asynchronously-dispatched script (timeouts, user-generated events), it is not possible for the caller of postmessage to detect when an event handler listening for events sent by postmessage throws an exception.
...web context scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).
Window: resize event - Web APIs
however, resize events are only fired on the window object (i.e.
...only handlers registered on the window object will receive resize events.
...dowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = reportwindowsize; addeventlistener equivalent you could set up the event handler using the addeventlistener() method: window.addeventlistener('resize', reportwindowsize); specifications specification status document object model (dom) level 3 events specificationthe definition of 'resize' 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.
WorkerGlobalScope - Web APIs
(this does not yet appear to be implemented in any browser.) events error fired when an error occured.
... rejectionhandled an event handler for handled promise rejection events.
... unhandledrejection an event handler for unhandled promise rejection events.
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.
XRSession: squeeze event - Web APIs
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.
...if you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends.
... xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; s...
XRSession - Web APIs
WebAPIXRSession
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.
... events the following events are delivered to xrsession objects.
...this is the last of the three select* events to be sent.
XRSessionEvent() - Web APIs
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.
... event types the following events are represented using the xrsessionevent interface, and are permitted values for its type property.
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 apiindexeddbintersec...
...tion 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.
...lend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraversal errorevent event eventlistener eventsource eventtarget extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontface...
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.
...you can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.
...that is, if you have defined event handlers for touch or click events, you should also define them for keyboard events.
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.
...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: ...
Video player styling basics - Developer guides
video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be set 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.
... to ensure this, a new click handler needs to be defined for the play/pause button so that it too raises the play and pause events: playpause.addeventlistener('click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); volume the altervolume() function, called when the player's volume buttons are clicked, also changes — it now calls a new function called checkvolume(): var checkvolume = function(dir) { if (dir) { var currentvolume = math.floor(video.volume * 10) / 10; if (dir === '+') { if (currentvolume < 1) video.volume += 0.1; } else if (dir === '-') { if (currentvolume > 0) video.volume -= 0.1; } // if the volume has been turned off, also set it as muted // note: can only do this with...
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.
<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.
An overview of HTTP - HTTP
WebHTTPOverview
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.
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.
...this method adds a message to the other runtime if the latter listens to message events.
...handling i/o is typically performed via events and callbacks, so when the application is waiting for an indexeddb query to return or an xhr request to return, it can still process other things like user input.
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).
... object.preventextensions() only prevents addition of own properties.
Autoplay guide for media and Web Audio APIs - Web media technologies
this will prevent any future play events from being delivered to the handler.
...checking for undefined prevents this code from failing with an error on older versions of web browsers.
...this prevents the distracting situation in which a tab begins playing sound and the user can't find the tab among all their tabs and windows.
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 p...
... css animations give you very granular control over your effects using keyframes, and you can even watch events fired during the animation process in order to handle other tasks that need to be performed at set points in the animation process.
... make events immediate as old-school, accessibility-aware web developers we love click events since they also support keyboard input.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
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 re...
...moved implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes link svg resources with fragment identifiers implementation status unknown xlink:type, xlink:role, xlink:arcrole, xlink:show, and xlink:actuate attributes removed implementation status unknown xlink:href attribute deprecated in favor of href implemented (bug 1245751) xlink:title attribute deprecated in favor of child ...
...target attribute of <view> and corresponding svg view fragment parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscripttype removed implementation status unknown animationevents.onload removed implementation status unknown fonts change notes <font>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face>, <font-face-src>, <font-face-uri>, <font-face-format>, and <font-face-name> and corresponding idl interfaces removed implementation status unknown extensibility chapter change notes made <foreignobje...
Content Processes - Archive of obsolete content
an event emitter maintains a list of callbacks (or listeners) for one or more named events.
... suppose we have two event emitters in different processes, and we want them to be able to emit events to each other.
Porting the Library Detector - Archive of obsolete content
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 }; ...
...this means we'll need two additional content scripts: one in the widget's context, which listens for icon mouseover events and sends a message to main.js containing the name of the corresponding library: function setlibraryinfo(element) { self.port.emit('setlibraryinfo', element.target.title); } var elements = document.getelementsbytagname('img'); for (var i = 0; i &lt; elements.length; i++) { elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's c...
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 belong...
... 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.
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.
ui/sidebar - Archive of obsolete content
there are two events emitted by the sidebar which will give you a worker: attach and ready.
... events attach this event is emitted when a worker is attached to a sidebar, as a result of any of the following: calling the sidebar's show() method, when the sidebar is not shown in the currently active window changing the sidebar's url property the user switching the sidebar on using the "sidebar" submenu in firefox, when the sidebar is not shown in the currently active window the user opening...
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.
...since we don't have any code to display annotations yet, we just log the right-click events to the console.
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.
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.
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.
... see also domcontentloaded event in listening to events: simple dom events ...
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.
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 xpi...
...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.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
// do not use eval(document.getelementbyid("mymenu").getattribute("oncommand")); eval(document.getelementbyid("mylabel").getattribute("onclick")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.
... // fake a command event var event = document.createevent("events"); event.initevent("command", true, true); document.getelementbyid("mymenu").dispatchevent(event); // fake a mouse click var mouseevent = document.createevent("mouseevents"); event.initmouseevent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getelementbyid("mylabel").dispatchevent(mouseevent); please see the corresponding documentation on how to use and initialize particular event types.
Custom XUL Elements with XBL - Archive of obsolete content
but you can still keep some separation and versatility by using custom events to communicate to the outside world.
...we have a "click" handler that displays the greeting when the "person" element is clicked: <handler phase="bubbling" event="click"><![cdata[ window.alert(this.greeting); ]]></handler> handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing.
Tabbed browser - Archive of obsolete content
ove", exampletabmoved, false); container.addeventlistener("tabclose", exampletabremoved, false); // when no longer needed container.removeeventlistener("tabopen", exampletabadded, false); container.removeeventlistener("tabmove", exampletabmoved, false); container.removeeventlistener("tabclose", exampletabremoved, false); note: starting in gecko 1.9.1, there's an easy way to listen on progress events on all tabs.
...you can detect when a tab becomes pinned or unpinned by watching for the tabpinned and tabunpinned events.
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.
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.
... there are two ways that drag and drop events can be handled.
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.
JavaScript Client API - Archive of obsolete content
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.
New Security Model for Web Services - Archive of obsolete content
also, this technique prevents the script from accessing many legitimate external resources not provided in the same domain as the script.
... this prevents a script from accessing web services and data published from any domain besides its own.
Plug-n-Hack Phase1 - Archive of obsolete content
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).
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.
Binding Attachment and Detachment - Archive of obsolete content
when a binding is attached, the following events occur: if required, anonymous content is cloned from the binding's content template and inserted around the bound element.
...und element matches a style rule that specifies a different binding the element is removed from the bound document the element is destroyed (e.g., by closing the document) bindings attached through the dom are detached when the following conditions are met: mozbinding style rule is removed the element is destroyed (e.g., by closing the document) when a binding is detached, the following events occur: anonymous content generated by the binding is destroyed.
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.
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.
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 colo...
...t 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 inactivetitlebarcolor increme...
appendNotification - Archive of obsolete content
see notification box events.
... notification box events requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) if you specify the eventcallback parameter, it should be a javascript function that gets called when interesting things happen related to the notification box.
OpenClose - Archive of obsolete content
these are situations when the popuphiding or popuphidden events may not fire as the element the events would be fired on are no longer available.
... if you need to perform uninitialization that would be done during these events, this could be done during an unload event.
textbox (Toolkit autocomplete) - Archive of obsolete content
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.
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.
Introduction to XBL - Archive of obsolete content
events: events, such as mouse clicks and keypresses that the element will respond to.
...in addition new events can be defined.
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 accessibility guidelines - Archive of obsolete content
mouse dependent scripting functionality associated with mouse events such as onmouseover, onmousemove, and ondrag can only be activated with the use of the mouse.
... avoid using audio or visual alerts alone to signal urgent events.
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.
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, sortdirecti...
...on, 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(), getelemen...
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, sortdirecti...
...on, 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...
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(), getelementsbytagname...
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, sortdirecti...
... 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(), ...
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, sortdirecti...
... 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()...
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, sortdirecti...
...on, 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...
broadcaster - 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, sortdirecti...
...on, 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...
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, templat...
...e, 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, getelementsbycla...
button - Archive of obsolete content
event handlers can be used to trap mouse, keyboard and other events.
... the element will, however, still respond to mouse events.
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
... 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()...
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, sortdirecti...
... 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, get...
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, sortdirecti...
...on, 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...
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, getelemen...
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, sortdirecti...
... 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, get...
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, sortdirecti...
...on, 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...
listcell - Archive of obsolete content
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()...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
... 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()...
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()...
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, sortdirecti...
...on, 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...
preference - Archive of obsolete content
the element will, however, still respond to mouse events.
...ributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events change when a preference value changes, an onchange/change event is fired on the <preference> element.
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, sortdirecti...
...on, 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.
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, sortdirecti...
... 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()...
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, sortdirecti...
...on, 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...
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 inher...
...ited 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, getuserda...
resizer - 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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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 proper...
...ties 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(), getfea...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
... 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, getattr...
tab - Archive of obsolete content
ArchiveMozillaXULtab
the element will, however, still respond to mouse events.
...pported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata notes note: prior to gecko 1.9, disabling tabs fails; even while disabled, they still accept events.
tabbrowser - Archive of obsolete content
this is useful for add-ons that need to use events related to tabs in the browser window.
...see listening to events on all tabs for details.
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, statu...
...stext, 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, getelementsbyattribut...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
... 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(), getat...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
... 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, getattri...
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-cu...
...rsor, 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(), getelementsb...
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(), getelementsbyattribute,...
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 prop...
... 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(), getelement...
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, sortdirecti...
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, sortdirecti...
...on, 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...
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, sortdirecti...
... 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, get...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
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, sortdirecti...
...on, 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...
2006-10-06 - Archive of obsolete content
what are events?
... discussion regarding tasks and events meetings none this week.
2006-10-20 - Archive of obsolete content
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-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.
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.
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.
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.
...in the case of close captioning media content, the player api player.closedcaption.captioningid = "captext"; is not supported, and the workaround is to capture events fired by the media player in script using script for event.
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.
Implementing controls using the Gamepad API - Game development
implementation there are two important events to use along with the gamepad api — gamepadconnected and gamepaddisconnected.
... events there were more events available in the spec than just gamepadconnected and gamepaddisconnected available, but they were removed from the specification as they were thought to not be very useful.
Extra lives - Game development
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.
Main thread - MDN Web Docs Glossary: Definitions of Web-related terms
the main thread is where a browser processes user events and paints.
...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.
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 ...
Build your own function - Learn web development
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 ...
A first splash into JavaScript - Learn web development
events at this point we have a nicely implemented checkguess() function, but it won't do anything because we haven't called it yet.
...events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc.
What is JavaScript? - Learn web development
running code in response to certain events occurring on a web page.
...the javascript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course).
Solve common problems in your JavaScript code - Learn web development
events what are event handlers and how do you use them?
... how do events fire on nested elements?
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.
Ember Interactivity: Footer functionality, conditional rendering - 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 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 ...
Introduction to client-side frameworks - Learn web development
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 interactivity: Editing, filtering, conditional rendering - 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 ...
TypeScript support in Svelte - 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 ...
Getting started with Vue - 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 ...
Rendering a list of Vue components - 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 ...
Styling Vue components with CSS - 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 ...
Limitations of chrome scripts
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.
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.
mozbrowserloadend
example in this example the mozbrowserloadstart and mozbrowserloadend events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadstart
example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
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.
CustomizableUI.jsm
events are dispatched synchronously on the ui thread, so if you can delay any/some of your processing, that is advisable.
...mizing(awindow); void notifyendcustomizing(awindow); void dispatchtoolboxevent(aevent, adetails, awindow); bool isareaoverflowable(aareaid); void settoolbarvisibility(atoolbarid, aisvisible); string getplaceforitem(aelement); bool isbuiltintoolbar(atoolbarid); methods addlistener() add a listener object that will get fired for various events regarding customization.
PopupNotifications.jsm
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.
Preference reference
erence 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.
AsyncTestUtils extended framework
it is a never-ending loop that dequeues pending events and runs them.
... in order to give these events a chance to run we either need to make sure we yield control to the top-level event loop or spin our own nested event loop.
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.
Logging
you can select events to be logged by module or level.
... a module is a user-defined class of log events.
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.
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.
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.
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 ...
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.
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.
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.
nsIAppStartup
getstartupinfo() returns a javascript object with events from startup and the timestamps indicating when they occurred.
...events that didn't occur are not in the object.
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().
nsICachingChannel
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.
nsIDOMEventGroup
dom/interfaces/events/nsidomeventgroup.idlscriptable this interface is the interface implemented by all event targets in the document object model.
...see also document object model (dom) level 3 events specification ...
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.
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.
nsINavHistoryResult
the viewer provides notifications to the controller when view events occur; this is done using the nsinavhistoryresultviewobserver interface.
...the viewer is responsible for actually updating the view object itself, as well as for handling events on the view.
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.
nsITimer
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.
nsITraceableChannel
nsistreamlistener setnewlistener( in nsistreamlistener alistener ); parameters alistener an nsistreamlistener to be notified of events on the http channel.
... 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.
nsITreeBoxObject
prevents scrolling off the end of the tree.
...this method prevents scrolling off the end of the tree.
nsIXMLHttpRequestEventTarget
onprogress nsidomeventlistener a javascript function object that gets invoked zero or more times, after the loadstart event, but before any abort, error, or load events occur.
... handling the events when the handler functions for these events are called, they receive as a parameter a progressevent, which implements the nsidomprogressevent interface.
XPCOM Interface Reference by grouping
nsizipwriter file nsifilepicker nsifileprotocolhandler nsifilespec nsifilestreams nsifileutilities nsifileview memory nsimemory network channel nsichannel nsichanneleventsink nsirequest nsirequestobserver nsiresumablechannel nsidnsservice nsiftpchannel nsiftpeventsink nsihttpchannel nsihttpchannelinternal nsihttpheadervisitor nsiidnservice nsiprotocolhandler nsiprotocolproxycallback nsiprotocolproxyfilter nsiprotocolproxyse...
... nsiparentalcontrolsservice nsipermission nsipermissionmanager nsisecuritycheckedcomponent ssl nsisslerrorlistener stream stream nsipipe nsitraceablechannel nsitransport nsitransporteventsink nsitransportsecurityinfo timer nsitimer nsitimercallback ui windows nsitaskbarpreview nsitaskbarpreviewbutton nsitaskbarpreviewcontroller nsitaskbarprogress nsitaskbartabpreview nsitaskbarwindowpreview nsiwintaskbar ...
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.
Using COM from js-ctypes
truct 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; void* setvoice; void* getvoice; hresult (__stdcall *speak)(struct myispvoice*, lpcwstr pwcs, dword dwflags, ...
... 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': ctypes.voidptr_t }, { 'getoutputobjecttoken': ctypes.voidptr_t }, { 'getoutputstream': ctypes.voidptr_t }, { 'pause': ctypes.voidptr_t }, { 'resume': ctypes.voidptr_t }, { 'setv...
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.
Debugger.Frame - Firefox Developer Tools
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.
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.
...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.
Migrating from Firebug - Firefox Developer Tools
inspect events events assigned to an element are displayed in the events side panel in firebug.
...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).
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?
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.
Web Console remoting - Firefox Developer Tools
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.
... tab navigation to listen to the tab navigation events you also need to attach to the tab actor for the given tab.
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.
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.
Animation.onfinish - Web APIs
here is one instance where we add pointer events back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits.
... hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status comment web animationsthe definition of 'animation.onfinish' in that specification.
AnimationEvent - Web APIs
the animationevent interface represents events providing information related to animations.
...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.
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.
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.
AudioProcessingEvent - Web APIs
the web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed.
...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; ch...
BaseAudioContext - Web APIs
a baseaudiocontext can be a target of events, therefore it implements the eventtarget interface.
...e4"/><a xlink:href="/docs/web/api/baseaudiocontext" 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.
BatteryManager.onchargingchange - Web APIs
specifies an event listener to receive chargingchange events.
... these events occur when the battery charging state is updated.
BatteryManager.onchargingtimechange - Web APIs
specifies an event listener to receive chargingtimechange events.
... these events occur when the battery chargingtime is updated.
BatteryManager.ondischargingtimechange - Web APIs
specifies an event listener to receive dischargingtimechange events.
... these events occur when the battery dischargingtime is updated.
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.
BroadcastChannel - Web APIs
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.
... events message fired when when a message arrives on the channel.
Hit regions and accessibility - Web APIs
it allows you to make hit detection easier and lets you route events to dom elements.
...cript> 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.
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.
... specifications specification status comment clipboard api and eventsthe definition of 'clipboardevent()' in that specification.
ClipboardEvent.clipboardData - Web APIs
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.
ClipboardEvent - Web APIs
the clipboardevent interface represents events providing information related to modification of the clipboard, that is cut, copy, and paste events.
... specifications specification status comment clipboard api and eventsthe definition of 'clipboardevent' 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.
... 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.
... 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.
CustomEvent.initCustomEvent() - Web APIs
events initialized in this way must have been created with the document.createevent() method.
...the page on creating and triggering events gives more information about the way to use those.
DedicatedWorkerGlobalScope - Web APIs
these events are of type messageevent and will be called when the worker receives a message from the document that started it (i.e.
... events message fired when the worker receives a message from its parent.
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.
... specifications specification status comment ambient light sensorthe definition of 'ambient light events' in that specification.
Document.cookie - Web APIs
WebAPIDocumentcookie
;samesite samesite prevents the browser from sending this cookie along with cross-site requests.
...it also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains.
Document.createEvent() - Web APIs
possible event types include "uievents", "mouseevents", "mutationevents", and "htmlevents".
... event module standard event object gecko also supports text event module textevent textevents keyboard event module keyboardevent keyevents basic events module event events specifications specification status comment domthe definition of 'document.createevent' in that specification.
Document: drag event - Web APIs
.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.
... on the dragged elem dragged = event.target; // make it half transparent event.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it i...
Document: keypress event - Web APIs
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: touchcancel event - Web APIs
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
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
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
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: DOMActivate event - Web APIs
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)...
...- act on each domactivate event --> <circle cx="300" cy="225" 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: MozMousePixelScroll event - Web APIs
if the platform's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of detail is computed using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the target element.
... the value of detail is never 0 if the events are legitimate.
Element: blur event - Web APIs
input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); 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: focus event - Web APIs
input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); 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: focusin event - Web APIs
"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
"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.hasPointerCapture() - Web APIs
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.
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: keypress event - Web APIs
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.
...thing:</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.releasePointerCapture() - Web APIs
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.
Element.requestFullscreen() - Web APIs
if the element has been detached from the original document, then the document receives these events instead.
... earlier implementations of the fullscreen api would always send these events to the document rather than the element, and you may need to be able to handle that situation.
Element: select event - Web APIs
for example, in html, select events can be dispatched only on form <input type="text"> and <textarea> elements.
...tring(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: touchcancel event - Web APIs
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
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
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
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: 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.
...it is part of the force touch events feature.
ErrorEvent - Web APIs
the errorevent interface represents events providing information related to errors in scripts or in files.
...troke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" 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.
Comparison of Event Targets - Web APIs
for example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitoriginaltarget will show the text node.
... event type event.target event.relatedtarget mouseover the eventtarget which the pointing device entered the eventtarget which the pointing device exited mouseout the eventtarget which the pointing device exited the eventtarget which the pointing device entered todo: also needs descriptions for dragenter and dragexit events.
Event.currentTarget - Web APIs
obsolete document object model (dom) level 3 events specificationthe definition of 'current event target' in that specification.
... obsolete document object model (dom) level 2 events specificationthe definition of 'event.currenttarget' in that specification.
Event.eventPhase - Web APIs
WebAPIEventeventPhase
for more details, see section 3.1, event dispatch and dom event flow, of the dom level 3 events specification.
... obsolete document object model (dom) level 2 events specificationthe definition of 'event.eventphase' in that specification.
Event.explicitOriginalTarget - Web APIs
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.
...defined in /dom/public/idl/events/nsidomnsevent.idl this event property is not defined in the w3.org dom level 2 events ...
Event.isTrusted - Web APIs
WebAPIEventisTrusted
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.
Event.preventDefault() - Web APIs
first, listen for keypress events: var mytextbox = document.getelementbyid('my-textbox'); mytextbox.addeventlistener('keypress', checkname, false); the checkname() function, which looks at the pressed key and decides whether to allow it: function checkname(evt) { var charcode = evt.charcode; if (charcode != 0) { if (charcode < 97 || charcode > 122) { evt.preventdefault(); displaywarning( "please us...
... living standard document object model (dom) level 2 events specificationthe definition of 'event.preventdefault()' in that specification.
Event.stopPropagation() - Web APIs
the stoppropagation() method of the event interface prevents further propagation of the current event in the capturing and bubbling phases.
... obsolete document object model (dom) level 2 events specificationthe definition of 'event.stoppropagation()' in that specification.
Event.type - Web APIs
WebAPIEventtype
html <p>press any key or click the mouse to get the event type.</p> <p id="log"></p> javascript function geteventtype(event) { const log = document.getelementbyid('log'); log.innertext = event.type + '\n' + log.innertext; } // keyboard events document.addeventlistener('keydown', geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click'...
... living standard document object model (dom) level 2 events specificationthe definition of 'event.type' in that specification.
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.
... document object model (dom) level 2 events specificationthe definition of 'eventlistener.handleevent()' in that specification.
EventTarget.removeEventListener() - Web APIs
the available options are: capture: a boolean which indicates that events of this type will be dispatched to the registered listener before being dispatched to any eventtarget beneath it in the dom tree.
... obsolete document object model (dom) level 2 events specificationthe definition of 'eventtarget.removeeventlistener()' in that specification.
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.
... extendablemessageevent.lasteventid read only represents, in server-sent events, the last event id of the event source.
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.
... this prevents the leaking of private data.
FileReader - Web APIs
as filereader inherits from eventtarget, all those events can also be listened for by using the addeventlistener method.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
GlobalEventHandlers.onanimationcancel - Web APIs
the onanimationcancel property of the globaleventhandlers mixin is the eventhandler for processing animationcancel events.
...we'll use this to show information about the events we receive.
GlobalEventHandlers.onanimationiteration - Web APIs
the onanimationiteration property of the globaleventhandlers mixin is the eventhandler for processing animationiteration events.
...much of this code is the same as in other examples of animation events, so it may look familiar.
GlobalEventHandlers.onanimationstart - Web APIs
we'll use this to show information about the events we receive.
... function log(msg, event) { let logbox = document.getelementbyid("log"); logbox.innerhtml += msg; if (event) { logbox.innerhtml += " <code>"+ event.animationname + "</code> at time " + event.elapsedtime.tofixed(2) + " seconds."; } logbox.innerhtml += "\n"; }; then we set up the event handlers for the animationstart and animationend events: let box = document.getelementbyid("box"); box.onanimationstart = function(event) { log("animation started", event); } box.onanimationend = function(event) { log("animation stopped", event); }; finally, we set up a handler for a click on the button that runs the animation: document.getelementbyid("play").addeventlistener("click", function(event) { document.getelementbyid("box").classn...
GlobalEventHandlers.oncancel - Web APIs
the oncancel property of the globaleventhandlers mixin is an eventhandler for processing cancel events sent to a <dialog> element.
...this event handler prevents the event from bubbling, so any parent handlers are not notified of the event.
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.
GlobalEventHandlers.onclick - Web APIs
the onclick property of the globaleventhandlers mixin is the eventhandler for processing click events on a given element.
...it fires after the mousedown and mouseup events, in that order.
GlobalEventHandlers.oncontextmenu - Web APIs
the oncontextmenu property of the globaleventhandlers mixin is an eventhandler that processes contextmenu events.
... examples disabling context menus this snippet prevents context menus from opening in the window.
GlobalEventHandlers.ondblclick - Web APIs
the ondblclick property of the globaleventhandlers mixin is an eventhandler that processes dblclick events on the given element.
...it fires after two click events.
GlobalEventHandlers.ondragend - Web APIs
ag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it t...
GlobalEventHandlers.ondragenter - Web APIs
ag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it t...
GlobalEventHandlers.ondragexit - Web APIs
ag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it t...
GlobalEventHandlers.ondragleave - Web APIs
ag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's background color back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended.
... var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's background color back to green to signify a dragexit event ev.currenttarget.style.background = "green"; } function init() { // set handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element,...
GlobalEventHandlers.ongotpointercapture - Web APIs
the ongotpointercapture property of the globaleventhandlers mixin is an eventhandler that processes gotpointercapture events.
... 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.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.
GlobalEventHandlers.onkeypress - Web APIs
the onkeypress property of the globaleventhandlers mixin is an eventhandler that processes keypress events.
...however, in practice browsers do not fire keypress events for certain keys.
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.
... there are also dom events like domcontentloaded and domframecontentloaded (which can be handled using eventtarget.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
GlobalEventHandlers.onlostpointercapture - Web APIs
the onlostpointercapture property of the globaleventhandlers mixin is an eventhandler that processes lostpointercapture events.
... 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.onscroll - Web APIs
the onscroll property of the globaleventhandlers mixin is an eventhandler that processes scroll events.
... living standard document object model (dom) level 3 events specificationthe definition of 'onscroll' in that specification.
GlobalEventHandlers.ontouchend - Web APIs
it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
...</div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
GlobalEventHandlers.ontouchmove - Web APIs
it is specified in the touch events – level 2 draft specification and not in touch events recommendation.
...</div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
GlobalEventHandlers.ontransitioncancel - Web APIs
the ontransitioncancel property of the globaleventhandlers mixin is an eventhandler that processes transitioncancel events.
... example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition.
GlobalEventHandlers.ontransitionend - Web APIs
the ontransitionend property of the globaleventhandlers mixin is an eventhandler that processes transitionend events.
... example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition.
HTMLCanvasElement - Web APIs
/><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().
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.
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.
HTMLElement: transitioncancel event - Web APIs
"message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
... if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
HTMLFormElement: submit event - Web APIs
in this case, the validation prevents form submission, and thus there is no submit event.
... examples this example uses eventtarget.addeventlistener() to listen for form submit, and logs the current event.timestamp whenever that occurs, then prevents the default action of submitting the form.
HTMLInputElement - Web APIs
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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input fires when the value of an <input>, <select>, or <textarea> element has been changed.
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.
... from this point onward, events are sent just like any media load.
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.
HTMLSelectElement - Web APIs
/><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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
HTMLTextAreaElement - Web APIs
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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
HTMLTrackElement - Web APIs
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.
File drag and drop - Web APIs
a target element for the file drop) and to define event handlers for the drop and dragover events.
...in this example, the drop target element uses the following styling: #drop_zone { border: 5px solid blue; width: 200px; height: 100px; } note that dragstart and dragend events are not fired when dragging a file into the browser from the os.
HashChangeEvent - Web APIs
the hashchangeevent interface represents events that fire when the fragment identifier of the url has changed.
...dde4"/><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.
IDBDatabase - Web APIs
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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
IDBFactory.open() - Web APIs
WebAPIIDBFactoryopen
may trigger upgradeneeded, blocked or versionchange events.
... return value a idbopendbrequest object on which subsequent events related to this request are fired.
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.
FileHandle.onerror - Web APIs
summary specifies an event listener to receive error events.
... these events occur when something goes wrong.
IDBOpenDBRequest - Web APIs
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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
IDBRequest - Web APIs
troke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
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.
InstallEvent - Web APIs
as a child of extendableevent, it ensures that functional events such as fetchevent are not dispatched during installation.
...e="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
KeyboardEvent() - Web APIs
specifications specification status comment ui eventsthe definition of 'keyboardevent()' in that specification.
... document object model (dom) level 3 events specificationthe definition of 'keyboardevent()' in that specification.
KeyboardEvent: code values - Web APIs
kvk_capslock (0x39) "capslock" "capslock" kvk_option (0x3a) "altleft" "altleft" kvk_control (0x3b) "controlleft" "controlleft" kvk_rightshift (0x3c) "shiftright" "shiftright" kvk_rightoption (0x3d) "altright" "altright" kvk_rightcontrol (0x3e) "controlright" "controlright" kvk_function (0x3f) "fn" (no events fired actually) "" (no events fired actually) kvk_f17 (0x40) "f17" "f17" kvk_ansi_keypaddecimal (0x41) "numpaddecimal" "numpaddecimal" kvk_ansi_keypadmultiply (0x43) "numpadmultiply" "numpadmultiply" kvk_ansi_keypadplus (0x45) "numpadadd" "numpadadd" kvk_ansi_keypadclear (0x47) "numlock" "numlock" kvk_volumeup ...
...score (0x5e) "intlro" "intlro" kvk_jis_keypadcomma (0x5f) "numpadcomma" "numpadcomma" kvk_f5 (0x60) "f5" "f5" kvk_f6 (0x61) "f6" "f6" kvk_f7 (0x62) "f7" "f7" kvk_f3 (0x63) "f3" "f3" kvk_f8 (0x64) "f8" "f8" kvk_f9 (0x65) "f9" "f9" kvk_jis_eisu (0x66) "lang2" "" (no events fired actually) kvk_f11 (0x67) "f11" "f11" kvk_jis_kana (0x68) "lang1" "kanamode" (no events fired actually) kvk_f13 (0x69) "f13" "f13" kvk_f16 (0x6a) "f16" "f16" kvk_f14 (0x6b) "f14" "f14" kvk_f10 (0x6d) "f10" "f10" kvk_f12 (0x6f) "f12" "f12" kvk_f15 (0x71) "f15" "f15" ...
KeyboardEvent.isComposing - Web APIs
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.keyCode - Web APIs
web developers shouldn't use the keycode attribute for printable characters when handling keydown and keyup events.
... } if (handled) { // suppress "double action" if event handled event.preventdefault(); } }, true); specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.keycode' in that specification.
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.
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.
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.
LockedFile.onerror - Web APIs
summary specifies an event listener to receive error events.
... these events occur when something goes wrong.
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.
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.
MediaStreamTrack: mute event - Web APIs
note: the condition that most people think of as "muted" (that is, a user-toggled state of silencing a track) is actually managed using the mediastreamtrack.enabled property, for which there are no events.
... bubbles no cancelable no interface event event handler property onmute examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastreamtrack referenced by musictrack.
MediaStreamTrack: unmute event - Web APIs
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.
... examples in this example, event handlers are established for the mute and unmute events in order to detect when the media is not flowing from the source for the mediastreamtrack stored in the variable musictrack.
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() to trigger an event when you need it.
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.
...you can listen for error events by setting up a onerror event handler.
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.
... 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.
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.
MouseEvent() - Web APIs
"button", optional and defaulting to 0, of type short, that describes which button is pressed during events related to the press or release of a button: value meaning 0 main button pressed (usually the left button) or un-initialized 1 auxiliary button pressed (usually the middle button) 2 secondary button pressed (usually the right button) "buttons", optional and defaulting t...
... document object model (dom) level 3 events specificationthe definition of 'mouseevent()' in that specification.
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.
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.
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.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 specification.
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.
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.
Using the Notifications API - Web APIs
this is in line with the specification, which states: "when a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." notification events there are four events that are triggered on the notification instance: click triggered when the user clicks on the notification.
... these events can be tracked using the onclick, onclose, onerror, and onshow handlers.
OfflineAudioContext - Web APIs
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.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: complete fired when the rendering of an offline audio context is complete.
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.
...a xlink:href="/docs/web/api/pagetransitionevent" 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">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
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.
... related events payerdetailchange, paymentmethodchange, shippingaddresschange, and shippingoptionchange specifications specification status comment payment request apithe definition of 'merchantvalidation' in that specification.
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.
... related events merchantvalidation, shippingaddresschange, shippingoptionchange, and payerdetailchange specifications specification status comment payment request apithe definition of 'paymentmethodchange' in that specification.
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.
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.
...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.
PerformanceFrameTiming - Web APIs
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..
...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".
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 interactiv...
...e = " + 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.domContentLoadedEventEnd - 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 interactiv...
...e = " + 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 'domcontentloadedeventend' 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 interactiv...
...e = " + 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.loadEventEnd - 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 interactiv...
...e = " + 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 'loadeventend' 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 interactiv...
...e = " + 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 interactiv...
...e = " + 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.
PerformanceNavigationTiming.unloadEventEnd - 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 interactiv...
...e = " + 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 'unloadeventend' 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.
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 val...
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 (supported...
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 val...
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 (supported...
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 (supported...
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 (supported...
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 (supported...
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 (supported...
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 (supported...
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 (supported...
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 (supported...
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.
PerformanceResourceTiming.workerStart - 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", "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.
Performance API - Web APIs
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.
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.
... besides the performanceobserver's interface's observe() method (which is used to register the entry types to observe), the performanceobserver interface also has a disconnect() method that stops an observer from receiving further events.
PointerEvent.height - Web APIs
specifications specification status comment pointer events – level 2the definition of 'height' in that specification.
... pointer eventsthe definition of 'height' in that specification.
PointerEvent.pointerType - Web APIs
ch (event.pointertype) { case 'mouse': process_pointer_mouse(event); break; case 'pen': process_pointer_pen(event); break; case 'touch': process_pointer_touch(event); break; default: console.log(`pointertype ${event.pointertype} is not suported`); } }, false); specifications specification status comment pointer eventsthe definition of 'pointertype' in that specification.
... pointer events – level 2the definition of 'pointertype' in that specification.
PointerEvent.pressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressure(event); } else if (event.pressure == 1) { // maximum pressure process_max_pressure(event); } else { // default process_pressure(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'pressure' in that specification.
... pointer eventsthe definition of 'pressure' in that specification.
PointerEvent.tiltX - Web APIs
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
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.width - Web APIs
target.addeventlistener("pointerdown", function(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specifications specification status comment pointer events – level 2the definition of 'width' in that specification.
... pointer eventsthe definition of 'width' in that specification.
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>).
..."#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.
RTCDTMFSender - Web APIs
"#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.
RTCDataChannelEvent - Web APIs
these events sent to an rtcpeerconnection when its remote peer is asking to open an rtcdatachannel between the two peers.
...s a new rtcdatachannelevent.propertiesalso inherits properties from: eventchannel read only the read-only property rtcdatachannelevent.channel returns the rtcdatachannel associated with the event.methodsthis interface has no methods, but inherits methods from: event examples in this example, the datachannel event handler is set up to save the data channel reference and set up handlers for the events which need to be monitored.
RTCIceTransport: gatheringstatechange event - Web APIs
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 */ } }; }); specifi...
RTCPeerConnection: icecandidate event - Web APIs
sharing a new candidate the majority of icecandidate events are fired to indicate that a new candidate has been gathered.
... if you need to perform any special actions when there are no further candidates expected, you're much better off watching the ice gathering state by watching for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { switch(pc.icegatheringstate) { case "new": /* gathering is either just starting or has been reset */ break; case "gathering": /* gathering has begun or is ongoing */ break; case "complete": /* gathering has ended */ break; } }); as you can see in this example, the icegatheringstatechange...
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.
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.
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.
... 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 th...
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.
SVGAnimationElement - Web APIs
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...
SVGElement - Web APIs
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...
SVGGraphicsElement: copy event - Web APIs
solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
... clipboard api and events working draft initial definition ...
SVGGraphicsElement: cut event - Web APIs
specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
... clipboard api and events working draft initial definition ...
SVGGraphicsElement: paste event - Web APIs
solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
... clipboard api and events working draft initial definition ...
Screen Wake Lock API - Web APIs
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.
ScriptProcessorNode - Web APIs
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.
... 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; ch...
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.
... examples this code snippet is from the service worker registration-events sample (live demo).
ServiceWorkerState - Web APIs
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.
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.
...ction(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 - Web APIs
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.
StorageEvent - Web APIs
e="#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.
... methods initstorageevent() initializes the event in a manner analogous to the similarly-named initevent() method in the dom events interfaces.
SyncManager.register() - Web APIs
minperiod: the minimum time in milliseconds between periodic sync events.
... the default is 0, meaning events are not periodic.
TimeEvent - Web APIs
WebAPITimeEvent
the timeevent interface, a part of svg smil animation, provides specific contextual information associated with time events.
..." stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><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.
Touch.clientX - Web APIs
WebAPITouchclientX
}, false); specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
Touch.clientY - Web APIs
WebAPITouchclientY
}, 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
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
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
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.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.screenX - Web APIs
WebAPITouchscreenX
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.
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.
TouchEvent.altKey - Web APIs
WebAPITouchEventaltKey
someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchEvent.changedTouches - Web APIs
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 non-stable version.
... touch events recommendation initial definition.
TouchEvent.ctrlKey - Web APIs
specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchEvent.metaKey - Web APIs
specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchEvent.shiftKey - Web APIs
specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchEvent.targetTouches - Web APIs
true : false); } specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchEvent.touches - Web APIs
switch (e.touches.length) { case 1: handle_one_touch(e); break; case 2: handle_two_touches(e); break; case 3: handle_three_touches(e); break; default: console.log("not supported"); break; } }, false); specifications specification status comment touch events – level 2 draft non-stable version.
... touch events recommendation initial definition.
TouchList.item() - Web APIs
WebAPITouchListitem
// 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
{ // 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.
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.
... 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.
UIEvent() - Web APIs
WebAPIUIEventUIEvent
uievent.detail lists the semantic for standard events.
... document object model (dom) level 3 events specificationthe definition of 'uievent()' in that specification.
UIEvent.pageX - Web APIs
WebAPIUIEventpageX
you should not expect to find pagex on any non-mouse events.
... do not look for pagex on any non-mouse events in new code and update existing code as soon as possible.
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.
WebGLContextEvent - Web APIs
"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
... examples with the help of the webgl_lose_context extension, you can simulate the webglcontextlost and webglcontextrestored events: 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.
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).
Using DTMF with WebRTC - Web APIs
the track and addstream events are sent when media is added to the connection.
... tracking other state changes we can also watch for changes to the signaling state (by accepting signalingstatechange events) and the ice gathering state (by accepting icegatheringstatechange events).
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.
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.
Window: load event - Web APIs
WebAPIWindowload event
ontent = 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 ui eventsthe definition of 'load' in that specification.
...'load' events are fired at many elements too.
Window.ondragdrop - Web APIs
WebAPIWindowondragdrop
summary an event handler for drag and drop events sent to the window.
...note how event.stoppropagation(); prevents the browser from loading the dropped tab, link or file.
Window: unload event - Web APIs
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> ☻ </body> </html> when the parent frame is unloaded, events will be fired in the order described by the console.log() messages.
... specifications specification status comment ui eventsthe definition of 'unload' in that specification.
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.
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.
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.
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.
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.
... syntax xdr.onprogress = funcref; parameters funcref a function to call when progress events occur.
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.
...="/docs/web/api/xmlhttprequesteventtarget" 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.
XRInputSourceEvent() - Web APIs
syntax newinputsourceevent = new xrinputsourceevent(type, eventinitdict); parameters type a domstring indicating which of the input source events the new object will represent.
... examples the code below sets up handlers for primary action events in order to determine when the user clicks on (shoots at/pokes at/whatever) objects in the scene.
XRInputSourcesChangeEvent - Web APIs
examples the following example shows how to set up an event handler which uses inputsourceschange events to detect newly-available pointing devices and to load their models in preparation to display them in the next animation frame.
... xrsession.addeventlistener("inputsourceschange", oninputsourceschange); function oninputsourceschange(event) { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { loadcontrollermesh(input); } } } you can also add a handler for inputsourceschange events by setting the oninputsourceschange event handler: xrsession.oninputsourceschange = oninputsourceschange; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent' in that specification.
XRSession.onsqueezeend - Web APIs
to learn more about how the sequence of squeeze events works, see primary squeeze actions in inputs and input sources.
... examples this snippet of code adds a simple handler for the squeezeend event, which responds only to events on the user's dominant hand.
XRSession: select event - Web APIs
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.
... xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); ...
XRSessionEvent - Web APIs
these events occur, for example, when the session ends or the visibility of its context changes.
... session event types the following events are represented using the xrsessionevent interface, and are permitted values for its type property.
XRSystem: devicechange event - Web APIs
bubbles no cancelable no interface event event handler xrsystem.ondevicechange usage notes devicechange events are not delivered if the document which owns the xrsystem object has been granted permission to do so through the xr-spatial-tracking feature policy.
... you can also use the ondevicechange event handler property to set a single handler for devicechange events: if (navigator.xr) { navigator.xr.ondevicechange = 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 - - - - d...
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.
Box-shadow generator - CSS: Cascading Style Sheets
ddshadow, swapshadow : swapshadow, addcssclass : addcssclass, disableclass : disableclass, deleteshadow : deleteshadow, setactiveclass : setactiveclass, setactiveshadow : setactiveshadow } })(); /** * layer manager */ var layermanager = (function layermanager() { var stacks = []; var active = { node : null, stack : null } var elements = {}; var mouseevents = function mouseevents(e) { var node = e.target; var type = node.getattribute('data-type'); if (type === 'subject') setactivestack(stacks[node.id]); if (type === 'disable') { tool.disableclass(node.parentnode.id); setactivestack(stacks['element']); } if (type === 'add') active.stack.addlayer(); if (type === 'layer') active.stack.setactivelayer(node); ...
...z-index'); elem = document.queryselectorall('#layer_menu [data-type="subject"]'); size = elem.length; for (var i = 0; i < size; i++) { var s = new stack(elem[i]); stacks[elem[i].id] = s; container.appendchild(s.container); tool.addcssclass(elem[i].id); } active.stack = stacks['element']; stacks['element'].show(); layermanager.addeventlistener("click", mouseevents); layermenu.addeventlistener("click", mouseevents); buttonmanager.subscribe("before", function(value) { if (value === false && active.stack === stacks['before']) setactivestack(stacks['element']) if (value === true && active.stack !== stacks['before']) setactivestack(stacks['before']) }); buttonmanager.subscribe("after", function(value) { if (value === false &&...
Using media queries - CSS: Cascading Style Sheets
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.
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 tas...
...ks 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 ...
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.
...when a video goes into fullscreen mode, it usually displays a message indicating that the user can press the esc key to exit fullscreen mode, so the code also needs to listen for relevant events in order to call the setfullscreendata() function to ensure the control styling is correct: document.addeventlistener('fullscreenchange', function(e) { setfullscreendata(!!(document.fullscreen || document.fullscreenelement)); }); document.addeventlistener('webkitfullscreenchange', function() { setfullscreendata(!!document.webkitisfullscreen); }); document.addeventlistener('mozfullscreencha...
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.
Rich-Text Editing in Mozilla - Developer guides
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.
<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.
<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.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
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.
...addeventlistener() is then used to establish a function that will be run when click events occur on the button.
<input type="hidden"> - HTML: Hypertext Markup Language
WebHTMLElementinputhidden
events none.
... note: the input and change events do not apply to this input type.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
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.
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.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
164 <nobr>: the non-breaking text element (obsolete) element, html, non-standard, obsolete, reference, web, 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.
...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.
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.
...he 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.
Content negotiation - HTTP
obviously, the wildcard '*' prevents caching from occurring, as the cache cannot know what element is behind it.
... 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: connect-src - HTTP
the apis that are restricted are: <a> ping, fetch, xmlhttprequest, websocket, eventsource, and navigator.sendbeacon().
... examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new websocket("https://not-example.com/"); var es = new eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ...
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.
... 61 expect-ct http, reference, header the expect-ct header allows sites to opt in to reporting and/or enforcement of certificate transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed.
HTTP Index - HTTP
WebHTTPIndex
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.
... 120 expect-ct http, reference, header the expect-ct header allows sites to opt in to reporting and/or enforcement of certificate transparency requirements, which prevents the use of misissued certificates for that site from going unnoticed.
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.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.
Object.seal() - JavaScript
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.
Object - JavaScript
object.preventextensions() prevents any extensions of an object.
... object.seal() prevents other code from deleting properties of an object.
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).
... description the reflect.preventextensions() method allows you to prevent new properties from ever being added to an object (i.e., prevents future extensions to the object).
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.
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.
Optimizing startup performance - Web Performance
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.
...all pure startup calculations should be performed in background threads, while you keep the run-time of main thread events as short as possible.
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.
textLength - SVG: Scalable Vector Graphics
"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 any 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.
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.
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 transf...
<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.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
145 onclick svg, svg attribute, events the onclick attribute specifies some script to run when the element is clicked.
... 162 pointer-events svg, svg attribute the pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.
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).
Window: deviceproximity event - Archive of obsolete content
related events userproximity ...
Window: userproximity event - Archive of obsolete content
specifications specification status proximity sensorthe definition of 'proximity events' in that specification.
Content Scripts - Archive of obsolete content
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.
Guides - Archive of obsolete content
sdk idioms working with events write event-driven code using the the sdk's event emitting framework.
page-mod - Archive of obsolete content
events attach this event is emitted when the page-mod's content scripts are attached to a document whose url matches the page-mod's include pattern.
request - Archive of obsolete content
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.
selection - Archive of obsolete content
(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.
simple-prefs - Archive of obsolete content
preference change events are triggered for every character typed by the user.
simple-storage - Archive of obsolete content
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.
frame/hidden-frame - Archive of obsolete content
events ready this event is emitted when the dom for a hidden frame content is ready.
preferences/event-target - Archive of obsolete content
this enables add-ons to listen to change events to the system-wide settings.
Release notes - Archive of obsolete content
content scripts in page-mod get detach events when the add-on is disabled or removed.
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.
Storing annotations - Archive of obsolete content
responding to overquota events add-ons have a limited quota of storage space.
Listen for Page Load - Archive of obsolete content
you can listen for a number of other tab events, including open, close, and activate.
Developing for Firefox Mobile - Archive of obsolete content
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 no...
Using XPCOM without chrome - Archive of obsolete content
// 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.
Tutorials - Archive of obsolete content
creating event targets enable the objects you define to emit their own events.
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) ...
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.
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.
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.
JavaScript timers - Archive of obsolete content
setimmediate() calls a function immediately after the browser has completed other operations, such as events and display updates.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
you don’t have to give it away there’s nothing in an oss license that prevents you from charging money for software.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
in line 3, you see the block that prevents the bubbling that would result in this being called by the oncommand handler in the menupop element, which is the parent of the menuitem element.
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 A: Add-on Performance - Archive of obsolete content
some of these events are fired multiple times during a single page load, and having inefficient code in the event handlers can cause a noticeable delay that users may have hard time figuring out.
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
so, you should listen to other events, like canceling the operation, to make sure that you know what is going on.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
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.
Setting Up a Development Environment - Archive of obsolete content
the last & prevents automator from waiting for your firefox session to finish.
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 sit...
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.
Setting up an extension development environment - Archive of obsolete content
this prevents the browser debugger from prompting for connection permission every time.
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.
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).
MozOrientation - Archive of obsolete content
// according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the browser window as the events arrive.
cached - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
chargingchange - Archive of obsolete content
"yes" : "no")); }); }); related events chargingtimechange dischargingtimechange levelchange ...
chargingtimechange - Archive of obsolete content
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 ...
checking - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
dischargingtimechange - Archive of obsolete content
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 ...
downloading - Archive of obsolete content
related events checking noupdate progress cached updateready obsolete error ...
error - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
levelchange - Archive of obsolete content
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 ...
noupdate - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
obsolete - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
progress - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
updateready - Archive of obsolete content
related events checking noupdate downloading progress cached updateready obsolete error ...
Devmo 1.0 Launch Roadmap - Archive of obsolete content
see also current events.
Drag and Drop Example - Archive of obsolete content
<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.
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
windowproxy.openwindow(null, chromeuri, name, "centerscreen", null); for more information, please see xulplanet's documentation of nsiproxyobjectmanager this was taken from injecting events onto xpcom’s ui thread ...
Error Console - Archive of obsolete content
types of errors error usually a syntax error that prevents the program from compiling.
Layout FAQ - Archive of obsolete content
why does move movement disappear when i use mouse events to click and drag?
GRE - Archive of obsolete content
this prevents dynamically finding a compatible gre at runtime.
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain text.
Selection - Archive of obsolete content
features can get, set, and listen for selection events in html or plain text.
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 ...
Selection - Archive of obsolete content
ArchiveMozillaJetpackdocsUISelection
features can get, set, and listen for selection events in html or plain text.
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 aske...
Supporting private browsing mode - Archive of obsolete content
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).
The life of an HTML HTTP request - Archive of obsolete content
todo: views, viewmanager, eventstatemanager?
Tuning Pageload - Archive of obsolete content
the decision is based on whether there were any user events on the relevant widget in the last content.switch.threshold microseconds.
Example Sticky Notes - Archive of obsolete content
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.
XBL 1.0 Reference - Archive of obsolete content
<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.
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.
disabled - Archive of obsolete content
the element will, however, still respond to mouse events.
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.
onpopupshowing - Archive of obsolete content
returning false from this event handler prevents the popup from appearing.
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.
CheckboxStateChange - Archive of obsolete content
related events valuechange radiostatechange ...
RadioStateChange - Archive of obsolete content
related events checkboxstatechange valuechange ...
ValueChange - Archive of obsolete content
related events checkboxstatechange radiostatechange ...
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 and...
addTabsProgressListener - Archive of obsolete content
see listening to events on all tabs for details.
swapDocShells - Archive of obsolete content
during the swap, pagehide and pageshow events are fired on both browsers.
ContextMenus - Archive of obsolete content
context menu events there are various ways in which a context menu can be opened.
Panels - Archive of obsolete content
this process of removing the focus when opening and closing a popup occurs after the popupshowing event or popuphiding event is fired, which means that if those events are cancelled, the focus is not adjusted.
eventNode - Archive of obsolete content
« xul reference eventnode type: eventtarget indicates the node where keyboard navigation events listener is set up.
tabContainer - Archive of obsolete content
this is useful for add-ons that need to use events related to tabs in the browser window.
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 customto...
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.
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.
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.
Content Panels - Archive of obsolete content
this prevents the content from traversing up to the xul window.
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.
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 box...
Using Remote XUL - Archive of obsolete content
because we added it to the menubar item, and events "bubble up" from child element to parent element, it'll fire any time the user manipulates an element inside the menu bar, so we don't have to add it to each menu item and button.
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 Questions and Answers - Archive of obsolete content
this problem can be solved by capturing the focus events and giving the focus to another xul element or capturing and canceling the keypress events.
browser - Archive of obsolete content
during the swap, pagehide and pageshow events are fired on both browsers.
checkbox - Archive of obsolete content
the element will, however, still respond to mouse events.
colorpicker - Archive of obsolete content
the element will, however, still respond to mouse events.
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, sortdirecti...
datepicker - Archive of obsolete content
the element will, however, still respond to mouse events.
description - Archive of obsolete content
the element will, however, still respond to mouse events.
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()...
iframe - Archive of obsolete content
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, sortdirecti...
image - Archive of obsolete content
ArchiveMozillaXULimage
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()...
label - Archive of obsolete content
ArchiveMozillaXULlabel
the element will, however, still respond to mouse events.
listbox - Archive of obsolete content
the element will, however, still respond to mouse events.
listitem - Archive of obsolete content
the element will, however, still respond to mouse events.
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()...
menulist - Archive of obsolete content
the element will, however, still respond to mouse events.
menupopup - Archive of obsolete content
returning false from this event handler prevents the popup from appearing.
panel - Archive of obsolete content
ArchiveMozillaXULpanel
returning false from this event handler prevents the popup from appearing.
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()...
prefpane - Archive of obsolete content
tributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata events paneload this event is fired on the pane element when the pane is fully loaded (e.g.
radio - Archive of obsolete content
ArchiveMozillaXULradio
the element will, however, still respond to mouse events.
radiogroup - Archive of obsolete content
the element will, however, still respond to mouse events.
richlistbox - Archive of obsolete content
the element will, however, still respond to mouse events.
richlistitem - Archive of obsolete content
the element will, however, still respond to mouse events.
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()...
scale - Archive of obsolete content
ArchiveMozillaXULscale
the element will, however, still respond to mouse events.
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()...
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()...
<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()...
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, sortdirecti...
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, , allowevent...
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, sortdirecti...
tabs - Archive of obsolete content
ArchiveMozillaXULtabs
the element will, however, still respond to mouse events.
textbox - Archive of obsolete content
the element will, however, still respond to mouse events.
timepicker - Archive of obsolete content
the element will, however, still respond to mouse events.
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.
toolbarbutton - Archive of obsolete content
the element will, however, still respond to mouse events.
tooltip - Archive of obsolete content
returning false from this event handler prevents the popup from appearing.
tree - Archive of obsolete content
ArchiveMozillaXULtree
the element will, however, still respond to mouse events.
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()...
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()...
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()...
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 method...
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.
nsIContentPolicy - Archive of obsolete content
for navigation events, this is the principal of the page that caused this load.
Archived Mozilla and build documentation - Archive of obsolete content
see also current events.
Extentsions FAQ - Archive of obsolete content
could someone make an extension for thunderbird that preview upcomeing events and number of new messages?
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.
2006-10-13 - Archive of obsolete content
discussion about the ability to list and search all the events in a calendar.
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.
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!!
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.
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.
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.
-moz-touch-enabled - Archive of obsolete content
syntax <integer> if the device supports touch events (for a touch screen), this is 1.
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.
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.
Window: devicelight event - Archive of obsolete content
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.
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.
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.
Index - Game development
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, y...
Desktop gamepad controls - Game development
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.
Desktop mouse and keyboard controls - Game development
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.
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.
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.
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.
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.
2D maze game with device orientation - Game development
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.
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>.
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.
Gecko FAQ - Gecko Redirect 1
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.
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.
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).
Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
parts of a script may also be set to execute when events occur.
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.
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.
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.
Page load time - MDN Web Docs Glossary: Definitions of Web-related terms
let time = performance.timing; let pageloadtime = time.loadeventstart - time.navigationstart; while page load time 'sounds' like the perfect web performance metric, it isn't.
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.
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.
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
there are specific headers in the response, like cache-control, that prevents caching.
HTML: A good basis for accessibility - Learn web development
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
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.
Fundamental text and font styling - Learn web development
values include: none: prevents any transformation.
How to build custom form controls - Learn web development
next, we bind these functions to the appropriate events: // we handle the event binding when the document is loaded.
JavaScript basics - Learn web development
(read more about variable scoping.) events real interactivity on a website requires events handlers.
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.
Use JavaScript within a webpage - Learn web development
if you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events.
Advanced text formatting - Learn web development
the above date could be written as: 20 january 2016 20th january 2016 jan 20 2016 20/01/16 01/20/16 the 20th of next month 20e janvier 2016 2016年1月20日 and so on but these different forms cannot be easily recognised by computers — what if you wanted to automatically grab the dates of all events in a page and insert them into a calendar?
Getting started with HTML - Learn web development
the disabled elements typically have a grayed-out appearance.) for example: <input type="text" disabled="disabled"> as shorthand, it is acceptable to write this as follows: <!-- using the disabled attribute prevents the end user from entering text into the input box --> <input type="text" disabled> <!-- text input is allowed, as it doesn't contain the disabled attribute --> <input type="text"> for reference, the example above also includes a non-disabled form input element.the html from the example above produces this result: omitting quotes around attribute values if you look at code for a lot of oth...
From object to iframe — other embedding technologies - Learn web development
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.
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.
Perceived performance - Learn web development
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.
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.
Website security - Learn web development
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.
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.
Embedding API for Accessibility
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 setboo...
Event Process Procedure
this diagram outlines how events are processed within gecko.
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.
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.
What to do and what not to do in Bugzilla
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.
Creating JavaScript callbacks in components
the component can then call methods on the observer interface to signal the external code when predefined events occur.
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 nsicontentframemessagemanager how t...
Process scripts
however, you don't get access to web content or dom events from a process script.
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.
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.
mozbrowseractivitydone
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
ettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfindchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsericonchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserlocationchange
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermetachange
its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropensearch
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowseropentab
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropenwindow
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscroll
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollareachanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollviewchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserselectionstatechanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserselectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsershowmodalprompt
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
example var browser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowservisibilitychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
smartcard-insert
example document.addeventlistener("smartcard-insert", smartcardchangehandler ); related events smartcard-remove ...
smartcard-remove
example document.addeventlistener("smartcard-remove", smartcardchangehandler ); related events smartcard-insert ...
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.
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.
HTTP Cache
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: ...
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).
Introduction to Layout in Mozilla
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?
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.
InstallListener
they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener.
DeferredTask.jsm
to guarantee that the task is executed for the last time, the method prevents any attempt to arm the timer again.
Log.jsm
info interesting runtime events (startup/shutdown).
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).
Localization content best practices
a bug marked with l12y describes an issue that prevents localizers to create a good quality localization.
Mozilla DOM Hacking Guide
there are classes for the dom0, core dom, html, xml, xul, xbl, range, css, events, etc...
Gecko Profiler FAQ
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.
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.
Scroll-linked effects
pages that use scrolling effects without listening for scroll events in javascript will not get this warning.
Performance
memory profiler the memory profiler samples allocation events and provides different views to analyze the allocation characteristic.
L20n Javascript API
error - fired when an error occurs which prevents the context instance from working correctly or when the existing translations are buggy.
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.
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_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 funct...
An overview of NSS Internals
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).
Index
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).
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.
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 walkthrough
n::oninputstreamready nshttpconnection::onsocketreadable nshttptransaction::writesegments nshttpconnection::onwritesegment passes bytes from msocketin->read to the transaction's pipe nspipeoutputstream::writesegments nspipe::advancewritecursor nspipeinputstream::oninputreadable so now the response is hitting the other end of the pipe, saying it has bytes to read nspipeevents::notifyinputready puts the callback object into an nspipeevents object.
Performance Hints
with using the with statement prevents the compiler from generating code for fast access to local variables.
Scripting Java
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.
Index
444 js_sealobject jsapi reference, obsolete, spidermonkey 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.
Exact Stack Rooting
this prevents an entire class of bugs where return values are not rooted properly before the next js-api call.
JS_SealObject
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.
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.
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 vu...
The Rust programming language
it prevents segmentation faults and guarantees thread safety, all with an easy-to-learn syntax.
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.
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.
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.
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.
extIExtension
events readonly attribute extievents the events object for the extension.
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.
Avoiding leaks in JavaScript XPCOM components
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.
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.
Building the WebLock UI
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.
Finishing the Component
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.
Components.utils.exportFunction
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.
HOWTO
wing 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.
IAccessible2
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.
imgIEncoder
quality >= 90 prevents down-sampling of the color channels.
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.
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.
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.
nsICategoryManager
they are often used to register lists of contractids, corresponding to components that wish to be notified of various events by some subsystem.
nsIClipboardDragDropHooks
allowstartdrag() prevents the drag from starting.
nsICommandLine
state_remote_explicit 2 a remote command line explicitly redirected to this instance using xremote/windde/appleevents.
nsIContentViewer
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).
nsIController
content/xul/document/public/nsicontroller.idlscriptable an interface that can be implemented to receive and process commands and events.
nsIDOMEventTarget
dom/interfaces/events/nsidomeventtarget.idlscriptable this interface is the interface implemented by all event targets in the document object model.
nsIDOMMouseScrollEvent
dom/interfaces/events/nsidommousescrollevent.idlscriptable this interface represents a mouse scroll wheel event.
nsIDOMOrientationEvent
dom/interfaces/events/nsidomorientationevent.idlscriptable please add a summary to this article.
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object.
nsIDragService
void firedrageventatsource( in unsigned long amsg ); obsolete since gecko 43 parameters amsg one of the ns_dragdrop_* contants which was defined in widget/basicevents.h fire a drag event at the fource of the drag.
nsIDroppedLinkHandler
this prevents a source document from tricking the user into a dragging a chrome url for example.
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.
nsIFeedResultListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface should be implemented by programs to receive events from the feed parser as parsing progresses.
nsIFrameLoader
capture whether or not to capture these events.
nsIGlobalHistory3
the other params to this function are the same as those for nsichanneleventsink.onchannelredirect().
nsIHTMLEditor
ignorespuriousdragevent() used to suppress spurious drag/drop events to workaround bug 50703.
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.
nsIJetpack
warning: bug 589308 prevents this message from being sent in some situations.
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.
nsIObserver
observer.unregister(); "get everything" - note that "*" is an acceptable value (be careful with this, because it observes many events, and can degrade performance).
nsIParentalControlsService
if this is true, applications should log relevant events using log() method.
nsIPushService
} ); receiving push messages subscriptions created from privileged code use xpcom observer notifications instead of service worker events.
nsIScriptError
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 ...
nsISocketTransport
nsitransporteventsink status codes note: although these constants look like xpcom error codes and are passed in an nsresult variable, they are not error codes.
nsIStringBundleService
typically used to format a message received by a nsiprogresseventsink's onstatus method.
nsITaskbarWindowPreview
there is existing infrastructure in place to let clients handle those events.
nsITelemetry
dscalars(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 acstring acategoryname, in jsval ascalardata); void clearevents(); test only attributes attribute type description canrecordbase boolean a flag indicating if telemetry can record base data (f...
nsIThreadObserver
example it is possible to overlay processing events for a gui toolkit on top of the events for a thread: var nativequeue; observer = { ondispatchedevent(thread) { nativequeue.signal(); } onprocessnextevent(thread, maywait, recursiondepth) { if (nativequeue.hasnextevent()) { nativequeue.processnextevent(); } while (maywait && !thread.haspendingevent()) { nativequeue.wait(); nativequeue.processnextevent(); ...
nsITimerCallback
xpcom/threads/nsitimer.idlscriptable defines the callback interface for nsitimer events.
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.
nsIWebProgressListener
example the nsiwebprogresslistener for each tab: gbrowser.mtabprogresslistener can be used in the parent to listen for most nsiwebprogresslistener events, but in browser code, will not have access to the nsiwebprogress's domwindow property.
nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen().
nsIWindowWatcher
void registernotification( in nsiobserver aobserver ); parameters note: be careful about generating open/close window events inside nsiobserver.observe().
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 nsisu...
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 fold...
nsPIPromptService
see also nsisound.playeventsound().
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.
Getting Started Guide
do_queryinterface prevents xpcom type errors.
Reference Manual
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.
Weak reference
in the following example, an nsobservable must keep some kind of a reference to each observer, in order to report events.
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.
Thunderbird API documentation
general mail client architecture overview mail event system events new!
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.
WebIDL bindings
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.
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 ...
Standard OS Libraries
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 ?
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.
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.
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.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
the (root) node's count includes objects allocated in the content page by the web browser, like dom events.
Index - Firefox Developer Tools
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.
Examine Event Listeners - Firefox Developer Tools
firefox can display: standard dom events jquery events react events ...
Use the Inspector API - Firefox Developer Tools
bindable events using on: markuploaded called when the left panel has been refreshed, after page change.
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.
Taking screenshots - Firefox Developer Tools
prevents saving to a file unless you use the --file option to force file writing.
AbortSignal - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
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.
AddressErrors - Web APIs
handling address changes the handleaddresschange() method, called when shippingaddresschange events occur, is where we'll look to see if the country is one of those we allow as shipping destinations.
AnalyserNode - Web APIs
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.
Attr - Web APIs
WebAPIAttr
" 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.
AudioBufferSourceNode - Web APIs
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.
AudioContext - Web APIs
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.
AudioNode - Web APIs
WebAPIAudioNode
" 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.
AudioScheduledSourceNode - Web APIs
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.
AudioWorklet - Web APIs
events audioworklet has no events to which it responds.
AudioWorkletProcessor.process - Web APIs
the values of the array are calculated by taking scheduled automation events into consideration.
AudioWorkletProcessor - Web APIs
events the audioworkletprocessor interface doesn't respond to any events.
Background Tasks API - Web APIs
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.
BaseAudioContext.createScriptProcessor() - Web APIs
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; ch...
Using the Beacon API - Web APIs
the following example specifies a handler for the load and beforeunload events.
BeforeInstallPromptEvent.prompt() - Web APIs
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 // ...
BeforeInstallPromptEvent - Web APIs
ef="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" 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">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
BeforeUnloadEvent - Web APIs
"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived browsers don't follow the spec f...
BlobEvent - Web APIs
WebAPIBlobEvent
the blobevent interface represents events associated with a blob.
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.
Bluetooth - Web APIs
WebAPIBluetooth
events bluetooth.onavailabilitychanged an event handler that runs when an event of type availabilitychanged has fired.
BluetoothDevice - Web APIs
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?
CDATASection - Web APIs
="#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.
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.
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.
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.
CSS Font Loading API - Web APIs
the css font loading api provides events and interfaces for dynamically loading font resources.
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.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.
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.
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.
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().
CharacterData - Web APIs
"#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.
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.
Clipboard - Web APIs
WebAPIClipboard
specifications specification status comment clipboard api and eventsthe definition of 'clipboard' 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.
Comment - Web APIs
WebAPIComment
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.
CompositionEvent.CompositionEvent() - Web APIs
specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'compositionevent()' in that specification.
CompositionEvent.initCompositionEvent() - Web APIs
specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'initcompositionevent()' in that specification.
CompositionEvent.locale - Web APIs
specifications specification status comment document object model (dom) level 3 events specification obsolete no longer in the spec, but still supported.
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.
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.
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.
CustomEvent() - Web APIs
example // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event var event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); additional examples can be found at creating and triggering events.
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.
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).
DataTransfer.effectAllowed - Web APIs
assigning a value to effectallowed in events other than dragstart has no effect.
DataTransfer - Web APIs
this object is available from the datatransfer property of all drag events.
DeviceLightEvent.value - Web APIs
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.
Document.alinkColor - Web APIs
a link is active during the time between mousedown and mouseup events.
Document: copy event - Web APIs
examples document.addeventlistener('copy', (event) => { console.log('copy action initiated') }); specifications specification status clipboard api and events working draft ...
Document.createTouch() - Web APIs
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.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: cut event - Web APIs
examples document.addeventlistener('cut', (event) => { console.log('cut action initiated') }); specifications specification status clipboard api and events working draft ...
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: fullscreenerror event - Web APIs
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.
Document: gotpointercapture event - Web APIs
tercapture(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: lostpointercapture event - Web APIs
ure(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 ...
Document: paste event - Web APIs
examples document.addeventlistener('paste', (event) => { console.log('paste action initiated') }); specifications specification status clipboard api and events working draft ...
Document: pointerdown event - Web APIs
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
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: pointerleave event - Web APIs
vent 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: pointermove event - Web APIs
erface 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
ce 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
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
s 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.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.
Document: transitionend event - Web APIs
if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
Document: wheel event - Web APIs
.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
DocumentFragment - Web APIs
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).
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.
DocumentType - Web APIs
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.
Examples of web and XML development using the DOM - Web APIs
ength; 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.
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).
Element: MSManipulationStateChanged event - Web APIs
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: beforescriptexecute event - Web APIs
cancelling the event prevents the script from executing.
Element: compositionend event - Web APIs
g.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionstart event - Web APIs
g.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionupdate event - Web APIs
g.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: copy event - Web APIs
: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element: cut event - Web APIs
WebAPIElementcut event
1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument(); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
Element: error event - Web APIs
eryselector('.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: fullscreenerror event - Web APIs
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.
Element: gesturestart event - Web APIs
during the gesture, gesturechange events will be fired.
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: paste event - Web APIs
|| window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste)); event.preventdefault(); }); result specifications specification status clipboard api and events working draft ...
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: webkitmouseforcechanged event - Web APIs
bubbles unknown cancelable unknown interface mouseevent webkitmouseforcechanged is a proprietary, webkit-specific event introduced by apple to support their force touch events feature.
Element: webkitmouseforceup event - Web APIs
it is part of the force touch events feature.
Element: webkitmouseforcewillbegin event - Web APIs
it is part of the force touch events feature.
Element: wheel event - Web APIs
min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
Event.cancelBubble - Web APIs
setting its value to true before returning from an event handler prevents propagation of the event.
Event.originalTarget - Web APIs
defined in /dom/public/idl/events/nsidomnsevent.idl this event property is not defined in the w3.org dom level 2 events ...
Event.returnValue - Web APIs
WebAPIEventreturnValue
setting this property to false prevents the default action.
Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other listeners of the same event from being called.
Event.target - Web APIs
WebAPIEventtarget
obsolete document object model (dom) level 2 events specificationthe definition of 'event.target' in that specification.
EventListener - Web APIs
document object model (dom) level 2 events specificationthe definition of 'eventlistener' in that specification.
ExtendableEvent() - Web APIs
currently no possible options exist inside the spec, but this has been defined for forward compatibility across the different derived events.
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.
FetchEvent() - Web APIs
this is always fetch for fetch events.
FetchEvent - Web APIs
this is the event type for fetch events dispatched on the service worker global scope.
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.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 - Web APIs
inside the success callback, event handlers are set up to handle the error error and writeend events.
Introduction to the File and Directory Entries API - Web APIs
the security boundary imposed on file system prevents applications from accessing data with a different origin.
FocusEvent() - Web APIs
specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'focusevent()' in that specification.
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.
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.
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.
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.
GestureEvent - Web APIs
events using this interface include gesturestart, gesturechange, and gestureend.
GlobalEventHandlers.onabort - Web APIs
the onabort property of the globaleventhandlers mixin is the eventhandler for processing abort events sent to the window.
GlobalEventHandlers.onblur - Web APIs
the onblur property of the globaleventhandlers mixin is the eventhandler for processing blur events.
GlobalEventHandlers.oncanplay - Web APIs
the oncanplay property of the globaleventhandlers mixin is the eventhandler for processing canplay events.
GlobalEventHandlers.oncanplaythrough - Web APIs
the oncanplaythrough property of the globaleventhandlers mixin is the eventhandler for processing canplaythrough events.
GlobalEventHandlers.onclose - Web APIs
the onclose property of the globaleventhandlers mixin is an eventhandler for processing close events sent to a <dialog> element.
GlobalEventHandlers.oncuechange - Web APIs
the oncuechange property of the globaleventhandlers mixin is the eventhandler for processing cuechange events.
GlobalEventHandlers.ondurationchange - Web APIs
the ondurationchange property of the globaleventhandlers mixin is the eventhandler for processing durationchange events.
GlobalEventHandlers.onended - Web APIs
the onended property of the globaleventhandlers mixin is the eventhandler for processing ended events.
GlobalEventHandlers.onfocus - Web APIs
the onfocus property of the globaleventhandlers mixin is an eventhandler that processes focus events on the given element.
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.
GlobalEventHandlers.oninvalid - Web APIs
the oninvalid property of the globaleventhandlers mixin is an eventhandler that processes invalid events.
GlobalEventHandlers.onkeydown - Web APIs
the onkeydown property of the globaleventhandlers mixin is an eventhandler that processes keydown events.
GlobalEventHandlers.onkeyup - Web APIs
the onkeyup property of the globaleventhandlers mixin is an eventhandler that processes keyup events.
GlobalEventHandlers.onloadeddata - Web APIs
the onloadeddata property of the globaleventhandlers mixin is the eventhandler for processing loadeddata events.
GlobalEventHandlers.onloadedmetadata - Web APIs
the onloadedmetadata property of the globaleventhandlers mixin is the eventhandler for processing loadedmetadata events.
GlobalEventHandlers.onmousedown - Web APIs
the onmousedown property of the globaleventhandlers mixin is an eventhandler that processes mousedown events.
GlobalEventHandlers.onmouseenter - Web APIs
the onmouseenter property of the globaleventhandlers mixin is the eventhandler for processing mouseenter events.
GlobalEventHandlers.onmouseleave - Web APIs
the onmouseleave property of the globaleventhandlers mixin is the eventhandler for processing mouseleave events.
GlobalEventHandlers.onmousemove - Web APIs
the onmousemove property of the globaleventhandlers mixin is an eventhandler that processes mousemove events.
GlobalEventHandlers.onmouseout - Web APIs
the onmouseout property of the globaleventhandlers mixin is an eventhandler that processes mouseout events.
GlobalEventHandlers.onmouseover - Web APIs
the onmouseover property of the globaleventhandlers mixin is an eventhandler that processes mouseover events.
GlobalEventHandlers.onmouseup - Web APIs
the onmouseup property of the globaleventhandlers mixin is an eventhandler that processes mouseup events.
GlobalEventHandlers.onpause - Web APIs
the onpause property of the globaleventhandlers mixin is the eventhandler for processing pause events.
GlobalEventHandlers.onplay - Web APIs
the onplay property of the globaleventhandlers mixin is the eventhandler for processing play events.
GlobalEventHandlers.onplaying - Web APIs
the onplaying property of the globaleventhandlers mixin is the eventhandler for processing playing events.
GlobalEventHandlers.onreset - Web APIs
the onreset property of the globaleventhandlers mixin is an eventhandler that processes reset events.
GlobalEventHandlers.onresize - Web APIs
the onresize property of the globaleventhandlers interface is an eventhandler that processes resize events.
GlobalEventHandlers.onselect - Web APIs
the onselect property of the globaleventhandlers mixin is an eventhandler that processes select events.
GlobalEventHandlers.onselectionchange - Web APIs
the onselectionchange property of the globaleventhandlers mixin is an eventhandler that processes selectionchange events.
GlobalEventHandlers.onselectstart - Web APIs
the onselectstart property of the globaleventhandlers mixin is an eventhandler that processes selectstart events.
GlobalEventHandlers.onsubmit - Web APIs
the onsubmit property of the globaleventhandlers mixin is an eventhandler that processes submit events.
GlobalEventHandlers.onwheel - Web APIs
the onwheel property of the globaleventhandlers mixin is an eventhandler that processes wheel events.
GlobalEventHandlers - Web APIs
globaleventhandlers.onformdata is an eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed.
HTMLAnchorElement - Web APIs
/><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
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
#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
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.
HTMLBodyElement - Web APIs
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.
HTMLButtonElement - Web APIs
/><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.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.
HTMLDListElement - Web APIs
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
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
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.
HTMLDivElement - Web APIs
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
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.
HTMLElement: beforeinput event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforeinput event' in that specification.
HTMLElement.click() - Web APIs
WebAPIHTMLElementclick
this event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
HTMLElement: gotpointercapture event - Web APIs
.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 ...
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.
HTMLElement: input event - Web APIs
living standard document object model (dom) level 3 events specificationthe definition of 'input event' in that specification.
HTMLElement: lostpointercapture event - Web APIs
ntercapture(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.oncopy - Web APIs
the oncopy property of the htmlelement interface is an eventhandler that processes copy events.
HTMLElement.oncut - Web APIs
WebAPIHTMLElementoncut
the htmlelement.oncut property of the htmlelement interface is an eventhandler that processes cut events.
HTMLElement.onpaste - Web APIs
the htmlelement.onpaste property of the htmlelement interface is an eventhandler that processes paste events.
HTMLElement: pointerdown event - Web APIs
les 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: pointerenter event - Web APIs
deventlistener(): 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: pointerleave event - Web APIs
ing 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
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 eve...
HTMLElement: pointerout event - Web APIs
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
xamples 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
pointerup 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 ...
HTMLElement: transitionrun event - Web APIs
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.
HTMLElement: transitionstart event - Web APIs
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.
HTMLEmbedElement - Web APIs
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
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.
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.reportValidity() - Web APIs
when false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
HTMLHRElement - Web APIs
#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
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
<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
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.setNfcFocus() - Web APIs
default is false; set to true to allow it to receive nfc events.
HTMLIFrameElement - Web APIs
/><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.
HTMLInputElement: invalid event - Web APIs
when a form is submitted, invalid events are fired at each form control that is invalid.
HTMLLIElement - Web APIs
#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
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
/><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
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
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.
HTMLMediaElement.onencrypted - Web APIs
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.onerror - Web APIs
the onerror property of the htmlmediaelement interface is the eventhandler for processing error events.
HTMLMediaElement.onwaitingforkey - Web APIs
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) { ...
HTMLMenuElement - Web APIs
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
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
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
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
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
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
/><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
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
/><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.
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 - Web APIs
the focused element is the element which will receive keyboard and similar events by default.
HTMLOutputElement - Web APIs
/><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.
HTMLParagraphElement - Web APIs
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
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
<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
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
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
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.
HTMLScriptElement - Web APIs
/><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.
HTMLShadowElement - Web APIs
/><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.
HTMLSourceElement - Web APIs
/><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
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
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
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
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
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
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
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
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
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
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
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
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
<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.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
the microtask queue is, then, processed multiple times per iteration of the event loop, including after handling events and other callbacks.
Dragging and Dropping Multiple Items - Web APIs
pace: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation(); event.preventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the dragenter and dragover events by calling the preventdefault().
IDBCursor.delete() - Web APIs
WebAPIIDBCursordelete
syntax myidbcursor.delete(); returns an idbrequest object on which subsequent events related to this operation are fired.
IDBCursor.update() - Web APIs
WebAPIIDBCursorupdate
return value an idbrequest object on which subsequent events related to this operation are fired.
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.
IDBDatabase.transaction() - Web APIs
since such catastrophic events are rare most consumers should not need to concern themselves further.
IDBFactory.deleteDatabase() - Web APIs
optionsnon-standard in gecko, since version 26, you can include a non-standard optional storage parameter that specifies whether you want to delete a permanent (the default value) indexeddb, or an indexeddb in temporary storage (aka shared pool.) return value a idbopendbrequest on which subsequent events related to this request are fired.
IDBIndex.count() - Web APIs
WebAPIIDBIndexcount
return value a idbrequest object on which subsequent events related to this operation are fired.
IDBIndex.get() - Web APIs
WebAPIIDBIndexget
return value an idbrequest object on which subsequent events related to this operation are fired.
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.getKey() - Web APIs
WebAPIIDBIndexgetKey
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBIndex.openCursor() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBIndex.openKeyCursor() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBMutableFile - Web APIs
events handler mutablefile.onabort the abort event is triggered each time the handled file is aborted.
IDBObjectStore.add() - Web APIs
returns an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.clear() - Web APIs
syntax var request = objectstore.clear(); returns an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.count() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.delete() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.get() - 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.getKey() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.openCursor() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.openKeyCursor() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBObjectStore.put() - Web APIs
return value an idbrequest object on which subsequent events related to this operation are fired.
IDBTransaction.commit() - Web APIs
commit() can be used to start the commit process without waiting for events from outstanding requests to be dispatched.
IDBVersionChangeEvent.newVersion - Web APIs
these events are fired via the custom idbversionchangeevent interface.
InputDeviceCapabilities - Web APIs
firetouchevents: a boolean that indicates whether the device dispatches touch events.
InputEvent.data - Web APIs
WebAPIInputEventdata
<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
ent 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.
InputEvent.getTargetRanges() - Web APIs
specifications specification status comment input events level 2the definition of 'gettargetranges()' in that specification.
InputEvent.isComposing - Web APIs
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.
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.
KeyboardEvent.altKey - Web APIs
</p> </body> </html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.altkey' in that specification.
KeyboardEvent.ctrlKey - Web APIs
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.initKeyboardEvent() - Web APIs
this method was introduced in draft of dom level 3 events, but deprecated in newer draft.
KeyboardEvent.keyIdentifier - Web APIs
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
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.
KeyboardEvent.repeat - Web APIs
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
ssed: " + 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 specification.
KeyboardEvent.which - Web APIs
eydown(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.
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.
LockedFile - Web APIs
events handler lockedfile.oncomplete the complete event is triggered each time a read or write operation is successful.
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.
MSCandidateWindowShow - Web APIs
} when the ime candidate window changes position or closes, it fires mscandidatewindowupdate or mscandidatewindowhide events.
MSManipulationEvent.initMSManipulationEvent() - Web APIs
beginning with the microsoft edge browser, the initevent() constructor pattern for synthetic events is deprecated.
MSManipulationEvent - Web APIs
events msmanipulationstatechanged: event fires when the state of an element being manipulated has changed.
MediaDevices - Web APIs
events devicechange fired when a media input or output device is attached to or removed from the user's computer.
MediaKeyMessageEvent - Web APIs
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.
MediaKeySession.onkeystatuseschange - Web APIs
dde4"/><a xlink:href="/docs/web/api/mediakeysession" 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
dde4"/><a xlink:href="/docs/web/api/mediakeysession" 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) { ...
MediaQueryList - Web APIs
events the following events are delivered to mediaquerylist objects: change sent to the mediaquerylist when the result of running the media query against the document changes.
MediaRecorder: dataavailable event - Web APIs
examples using addeventlistener to listen for dataavailable events: ...
MediaRecorder: error event - Web APIs
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() ...
MediaRecorder.start() - Web APIs
all other errors are reported through error events sent to the mediarecorder object.
MediaRecorder - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
MediaSource - Web APIs
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.
MediaStream - Web APIs
events addtrack fired when a new mediastreamtrack object is added.
MediaStreamTrack: ended event - Web APIs
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.
MediaStreamTrack.muted - Web APIs
instead, add event listeners for the mute and unmute events.
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).
MerchantValidationEvent() - Web APIs
you should not have to create these events yourself; instead, just handle the merchantvalidation event.
MessageEvent.MessageEvent() - Web APIs
source: an messageeventsource (which can be a windowproxy, messageport, or serviceworker object) representing the message emitter.
MessagePort - Web APIs
events message fired when a messageport object receives a message.
MouseEvent.getModifierState() - Web APIs
specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'getmodifierstate()' in that specification.
MouseEvent.pageY - Web APIs
WebAPIMouseEventpageY
touch eventsthe definition of 'pagey' in that specification.
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.
MutationObserver - Web APIs
it is designed as a replacement for the older mutation events feature, which was part of the dom3 events specification.
NDEFReadingEvent - Web APIs
the ndefreadingevent interface represents events despatched on new nfc readings obtained by ndefreader.
Navigation Timing API - Web APIs
performancenavigationtiming provides methods and properties to store and retrieve metrics regarding the browser's document navigation events.
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.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.
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 - 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.
Node - Web APIs
WebAPINode
" 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.
NotificationAction - Web APIs
example notifications can fire notificationclick events on the serviceworkerglobalscope.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
offlineaudiocompletionevents are despatched to offlineaudiocontext instances for legacy reasons.
OfflineAudioCompletionEvent - Web APIs
the web audio api offlineaudiocompletionevent interface represents events that occur when the processing of an offlineaudiocontext is terminated.
OfflineAudioContext.OfflineAudioContext() - Web APIs
like a regular audiocontext, an offlineaudiocontext can be the target of events, therefore it implements the eventtarget interface.
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.
PaymentRequest.show() - Web APIs
it may only be called while handling events that represent user interactions, such as click, keyup, or the like.
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.
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.
PaymentRequestEvent - Web APIs
respondwith() prevents the default event handling and allows you to provide a promise for a paymentresponse object yourself.
PaymentResponse.onpayerdetailchange - Web APIs
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.
PaymentResponse - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
Performance - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
PerformanceEventTiming - Web APIs
examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch).
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.
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.
PerformanceObserverEntryList - Web APIs
the performanceobserverentrylist interface is a list of peformance events that were explicitly observed via the observe() method.
PerformanceResourceTiming.initiatorType - Web APIs
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.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 specification...
Using Performance Timeline - Web APIs
the standard also includes interfaces that allow an application to be notified when specific performance events occur.
Permissions - Web APIs
safari ios no support nosamsung internet android full support 8.0accessibility-events permissionchrome full support 62edge full support 79firefox ?
PointerEvent.tangentialPressure - Web APIs
ddeventlistener('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.twist - Web APIs
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.
ProcessingInstruction - Web APIs
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.
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.
Push API - Web APIs
WebAPIPush API
they also monitor and respond to push and subscription change events.
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.
RTCDTMFToneChangeEvent - Web APIs
the rtcdtmftonechangeevent interface represents events sent to indicate that dtmf tones have started or finished playing.
RTCDataChannel.binaryType - Web APIs
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.
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
bufferedamountlow events are not fired after the data channel is closed.
RTCDataChannel: bufferedamountlow event - Web APIs
bufferedamountlow events aren't sent if bufferedamountlowthreshold is 0.
RTCDataChannel.close() - Web APIs
the sequence of events which occurs in response to this method being called: rtcdatachannel.readystate is set to "closing".
RTCDataChannel: close event - Web APIs
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: error event - Web APIs
you can also set up an event handler for error events using the rtcdatachannel interface's onerror event handler property: dc.onerror = ev => { const err = ev.error; /* ...
RTCDataChannel.onclose - Web APIs
example in this sample from a hypothetical instant messaging client, a data channel is created, then handlers for the open and close events are set up to enable and disable user interface objects based on the state of the channel.
RTCDataChannel - Web APIs
events bufferedamountlow sent to the channel's onbufferedamountlow event handler when the number of bytes of data in the outgoing data buffer falls below the value specified by bufferedamountlowthreshold.
RTCDataChannelEvent() - Web APIs
you will rarely if ever construct an rtcdatachannelevent by hand; these events are normally created and sent by the webrtc layer itself.
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.
RTCError - Web APIs
WebAPIRTCError
the above example uses addeventlistener() to add the handler for error events.
RTCErrorEvent.error - Web APIs
the above example uses addeventlistener() to add the handler for error events.
RTCErrorEvent - Web APIs
description there are other data types used for error events in webrtc, as needed for errors with special information sharing requirements.
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.
RTCIceTransport - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
RTCIdentityErrorEvent - Web APIs
two events are sent with this type: idpassertionerror and idpvalidationerror.
RTCPeerConnection.addIceCandidate() - Web APIs
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.addStream() - Web APIs
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('ne...
RTCPeerConnection.createDataChannel() - Web APIs
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).
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: datachannel event - Web APIs
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.
RTCPeerConnection: identityresult event - Web APIs
note: while older versions of the webrtc specification used events to report assertions, this has been deprecated and removed from the specification.
RTCPeerConnection.onicecandidate - Web APIs
example the example below, which is based on the code from the article signaling and video calling, sets up a handler for icecandidate events to send the candidates to the remote peer.
RTCPeerConnection.onnegotiationneeded - Web APIs
example this example, derived from the example in signaling and video calling, establishes a handler for negotiationneeded events to handle creating an offer, configuring the local end of the connection, and sending the offer to the remote peer.
RTCPeerConnection.setConfiguration() - Web APIs
this prevents successful login to the server.
RTCPeerConnectionIceErrorEvent.address - Web APIs
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.
RTCPeerConnectionIceEvent - Web APIs
the rtcpeerconnectioniceevent interface represents events that occurs in relation to ice candidates with the target, usually an rtcpeerconnection.
RTCTrackEvent - Web APIs
you will probably not need to create new track events yourself, since they're typically created by the webrtc infrastructure and sent to the connection's ontrack event handler.
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.commonAncestorContainer - Web APIs
syntax rangeancestor = range.commonancestorcontainer; example in this example, we create an event listener to handle pointerup events on a list.
Report - Web APIs
WebAPIReport
events this interface has no events that fire on it.
ReportingObserver - Web APIs
events this interface has no events that fire on it.
RequestDestination - Web APIs
navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more.
ResizeObserver - Web APIs
implementations should, if they follow the specification, invoke resize events before paint and after layout.
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.
SVGAnimateElement - Web APIs
"/><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
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
/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.
SVGCircleElement - Web APIs
"/><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
<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
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
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
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
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
><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.
SVGEvent - Web APIs
WebAPISVGEvent
the svgevent interface represents the event object for most svg-related events.
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.
SVGFEBlendElement - Web APIs
/><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
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
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
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
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
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
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
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
: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
/><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
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
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
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
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
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
/><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
/><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
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
: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
<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
: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
/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
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
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
: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
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.
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.
SVGForeignObjectElement - Web APIs
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
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.
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.
SVGGradientElement - Web APIs
<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
<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.
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.
SVGImageElement - Web APIs
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
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
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
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
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.
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.
SVGMetadataElement - Web APIs
<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.
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.
SVGPathElement - Web APIs
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
/><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
><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
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
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.
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.
SVGRectElement - Web APIs
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.
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.
SVGScriptElement - Web APIs
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
#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.
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.
SVGStopElement - Web APIs
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
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
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
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.
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.
SVGTSpanElement - Web APIs
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
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
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
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
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
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.
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.
SVGUseElement - Web APIs
#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.
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.onorientationchange - Web APIs
an event handler for the orientationchange events sent to the screen object.
Screen - Web APIs
WebAPIScreen
events handler screen.onorientationchange a handler for the orientationchange event.
ScriptProcessorNode.bufferSize - Web APIs
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; ch...
ScriptProcessorNode.onaudioprocess - Web APIs
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; ch...
Selection.containsNode() - Web APIs
it uses addeventlistener() to check for selectionchange events.
Sensor APIs - Web APIs
sensorerroreventsecure context provides information about errors thrown by a sensor or related interface.
ServiceWorker.onstatechange - Web APIs
} ) examples this code snippet is from the service worker registration-events sample (live demo).
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).
ServiceWorkerContainer - Web APIs
events controllerchange occurs when the document's associated serviceworkerregistration acquires a new active worker.
ServiceWorkerGlobalScope: push event - Web APIs
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.
ServiceWorkerMessageEvent.lastEventId - Web APIs
the lasteventid read-only property of the serviceworkermessageevent interface represents, in server-sent events, the last event id of the event source.
ServiceWorkerMessageEvent - Web APIs
serviceworkermessageevent.lasteventid read only represents, in server-sent events, the last event id of the event source.
SharedWorkerGlobalScope - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
SourceBuffer - Web APIs
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.
SourceBufferList - Web APIs
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.
SpeechRecognition: audioend event - Web APIs
kitspeechrecognition() || 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
ecognition() || 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
) || 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
tion.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
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
.'; 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
eechrecognition(); 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
() || 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
ew 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
ition() || 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
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.
SpeechRecognition - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
SpeechRecognitionEvent.results - Web APIs
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.
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.
SpeechSynthesis: voiceschanged event - Web APIs
++) { 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.
SpeechSynthesis - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
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.
SpeechSynthesisEvent - Web APIs
speechsynthesisevent.name read only 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.
SpeechSynthesisUtterance: boundary event - Web APIs
vent.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
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: mark event - Web APIs
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.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() { ...
SpeechSynthesisUtterance: pause event - Web APIs
ause', 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
', 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
', 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.
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.
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.
SyncEvent - Web APIs
WebAPISyncEvent
" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
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.
Text - Web APIs
WebAPIText
" 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.
TextTrack - Web APIs
WebAPITextTrack
events cuechange fired when cues are entered and exited.
Touch() - Web APIs
WebAPITouchTouch
specifications specification status comment touch events – level 2the definition of 'touchevent' in that specification.
Touch.force - Web APIs
WebAPITouchforce
console.log("targettouches[" + i + "].force = " + e.targettouches[i].force); } }, false); specifications specification status comment touch events – level 2 draft initial definition.
TouchList.identifiedTouch() - Web APIs
this api was removed from the touch events v2 draft specification.
TransitionEvent - Web APIs
the transitionevent interface represents events providing information related to transitions.
UIEvent.cancelBubble - Web APIs
not all events are allowed to bubble up the dom.
UIEvent.isChar - Web APIs
WebAPIUIEventisChar
some keystroke combinations may raise events but not produce any character (example: ctrl-alt-?).
VisualViewport: resize event - Web APIs
}; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification.
VisualViewport: scroll event - Web APIs
}; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification.
VisualViewport - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface.
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.
WakeLockSentinel - Web APIs
prevents devices from dimming or locking the screen.
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.
WebGL: 2D and 3D graphics for the web - Web APIs
WebAPIWebGL API
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
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.
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
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.
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.
WebSocket - Web APIs
WebAPIWebSocket
events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
The WebSocket API (WebSockets) - Web APIs
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.
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.
Geometry and reference spaces in WebXR - Web APIs
this is a reference space which is provided to your app when input events occur.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
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.
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.
Web Speech API - Web APIs
speechrecognitionevent the event object for the result and nomatch events, and contains all the data associated with an interim or final speech recognition result.
Using the Web Storage API - Web APIs
on the events page (see events.js) the only javascript is as follows: window.addeventlistener('storage', function(e) { document.queryselector('.my-key').textcontent = e.key; document.queryselector('.my-old').textcontent = e.oldvalue; document.queryselector('.my-new').textcontent = e.newvalue; document.queryselector('.my-url').textcontent = e.url; document.queryselector('.my-storage').textcontent = j...
Web Workers API - Web APIs
note: as per the web workers spec, worker error events should not bubble (see bug 1188141.
WheelEvent() - Web APIs
specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'wheelevent()' in that specification.
WheelEvent.deltaMode - Web APIs
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
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
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
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: beforeunload event - Web APIs
attaching an event handler/listener to window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's back-forward cache or webkit's page cache.
Window: clipboardchange event - Web APIs
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: copy event - Web APIs
WebAPIWindowcopy event
examples window.addeventlistener('copy', (event) => { console.log('copy action initiated') }); specifications specification status clipboard api and events working draft ...
Window: cut event - Web APIs
WebAPIWindowcut event
examples window.addeventlistener('cut', (event) => { console.log('cut action initiated') }); specifications specification status clipboard api and events working draft ...
Window: error event - Web APIs
tents'); 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.event - Web APIs
WebAPIWindowevent
in addition, window.event is not accurate for events dispatched within shadow trees.
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.
Window.onbeforeinstallprompt - Web APIs
window.addeventlistener("beforeinstallprompt", function(beforeinstallpromptevent) { beforeinstallpromptevent.preventdefault(); // prevents immediate prompt display // shows prompt after a user clicks an "install" button installbutton.addeventlistener("click", function(mouseevent) { // you should not use the mouseevent here, obviously beforeinstallpromptevent.prompt(); }); installbutton.hidden = false; // make button operable }); ...
Window.ondevicemotion - Web APIs
an event handler for the devicemotion events sent to the window.
Window.onuserproximity - Web APIs
these events are of type userproximityevent and occur when the the device sensor detects that an object becomes nearby.
Window.open() - Web APIs
WebAPIWindowopen
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.
Window.pageYOffset - Web APIs
this prevents us from falling off the edge of the document.
Window: pagehide event - Web APIs
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: paste event - Web APIs
examples window.addeventlistener('paste', (event) => { console.log('paste action initiated') }); specifications specification status clipboard api and events working draft ...
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.
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.
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: transitionend event - Web APIs
if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
Window: unhandledrejection event - Web APIs
you can prevent that from happening by adding a handler for unhandledrejection events that—in addition to any other tasks you wish to perform—calls preventdefault() to cancel the event, preventing it from bubbling up to be handled by the runtime's logging code.
WindowEventHandlers.onhashchange - Web APIs
the windoweventhandlers.onhashchange property of the windoweventhandlers mixin is the eventhandler for processing hashchange events.
WindowEventHandlers.onpopstate - Web APIs
the onpopstate property of the windoweventhandlers mixin is the eventhandler for processing popstate events on the window.
WindowEventHandlers.onstorage - Web APIs
the onstorage property of the windoweventhandlers mixin is an eventhandler for processing storage events.
WindowEventHandlers - Web APIs
properties the events properties, of the form onxyz, are defined on the windoweventhandlers, and implemented by window, and workerglobalscope for web workers.
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.
Worker: messageerror event - Web APIs
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"); wo...
Worker.onmessage - Web APIs
WebAPIWorkeronmessage
these events are of type messageevent and will be called when the worker's parent receives a message (i.e.
Worker.prototype.postMessage() - Web APIs
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.
Worker - Web APIs
WebAPIWorker
events message fires when the worker's parent receives a message from that worker.
XDomainRequest.responseText - Web APIs
note: this property is valid during the xdomainrequest.onprogress and xdomainrequest.onload events.
XMLDocument - Web APIs
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.
Synchronous and asynchronous requests - Web APIs
adapting sync xhr use cases to the beacon api there are some cases in which the synchronous usage of xmlhttprequest is not replaceable, like during the unload, beforeunload, and pagehide events.
XMLHttpRequest.multipart - Web APIs
please use server-sent events, web sockets, or responsetext from progress events instead.
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.upload - Web APIs
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.
XRFrame - Web APIs
WebAPIXRFrame
events which communicate the tracking state of objects also provide an xrframe reference as part of their structure.
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.
XRInputSourceEvent.inputSource - Web APIs
example the snippet below shows a handler for the select event which looks specifically for events which happen on gaze input devices.
XRInputSourceEvent - Web APIs
examples the code below sets up handlers for primary action events in order to determine when the user clicks on (shoots at/pokes at/whatever) objects in the scene.
XRInputSourceEventInit.frame - Web APIs
these events are generated by and sent to you by the webxr infrastructure.
XRInputSourceEventInit.inputSource - Web APIs
these events are generated by and sent to you by the webxr infrastructure.
XRInputSourcesChangeEvent() - Web APIs
you won't typically call this constructor yourself, as these events are created and sent to you by the webxr system.
XRPose.transform - Web APIs
WebAPIXRPosetransform
example this handler for the xrsession event select handles events for tracked pointers.
XRReferenceSpace - Web APIs
events in addition to other events that may be sent to xrspace or eventtarget objects, the following also apply to xrreferencespace objects.
XRReferenceSpaceEventInit - Web APIs
you will not usually need to use this, since these events are created by the webxr infrastructure.
XRSession.onsqueeze - Web APIs
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).
XRSession.onsqueezestart - Web APIs
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.
XRSessionEventInit - Web APIs
you're unlikely to need to create these events yourself, however, as they're created by the xr system.
XRSystem - Web APIs
WebAPIXRSystem
events devicechange sent when the set of available xr devices has changed.
msthumbnailclick - Web APIs
t) { 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 onbuttonclicked(e) { switch (e.buttonid) {...
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).
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: timer role - Accessibility
set in response to keyboard or other application events that change focus or point of interaction.
ARIA: application role - Accessibility
set in response to keyboard or other application events that change focus or point of interaction.
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: button role - Accessibility
ve</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.
Accessibility: What users can do to browse more safely - Accessibility
css transition events are now supported.
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_...
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 ...
Web Accessibility: Understanding Colors and Luminance - Accessibility
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.
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-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.
-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.
:not() - CSS: Cascading Style Sheets
WebCSS:not
since it prevents specific items from being selected, it is known as the negation pseudo-class.
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.
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; ri...
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.
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.
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-t...
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():scopesc...
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.
Linear-gradient Generator - CSS: Cascading Style Sheets
function setunit(unit) { this.unit = unit; this.updateallpoints(); inputslidermanager.setunit('point-position', unit, false); if (this.activepoint) this.activepoint.updateslider(); this.updategradient(); }; gradientaxis.prototype.updateallpoints = function updateallpoints() { var p = this.firstpoint; while(p) { p.updatecssposition(); p = p.nextpoint; } }; /* axis events */ gradientaxis.prototype.startrotation = function startrotation(e) { this.updatecenterpointpos(); this.updateaxisangle(e); }; gradientaxis.prototype.updateonresize = function updateonresize() { this.updatecontainer(); this.updatecenterpointpos(); this.setaxisangle(this.angle); }; gradientaxis.prototype.updatecenterpointpos = function updatecenterpointpos() { var pos = this.con...
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.
font-variant-ligatures - CSS: Cascading Style Sheets
no-contextual prevents their use.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
this prevents unexpected shades of gray from appearing when both the color and the opacity are changing.
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.
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.
text-transform - CSS: Cascading Style Sheets
none is a keyword that prevents the case of all characters from being changed.
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) l...
touchstart - Event reference
element: touchstart document: touchstart bubbles yes cancelable yes interface touchevent event handler property ontouchstart specifications specification status touch events recommendation ...
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.
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.
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.
HTML attribute reference - HTML: Hypertext Markup Language
hidden global attribute prevents rendering of given element, while keeping child elements, e.g.
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
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 .
<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>.
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
the image is corrupted in some way that prevents it from being loaded.
<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.
<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="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 a...
<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="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.
<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 co...
<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="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 v...
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
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
<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 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="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.
<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.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="all"> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> stylesheet load events you can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event: <script> var mystylesheet = document.queryselector('#my-stylesheet'); mystylesheet.onload = function() { // do something interesting; the sheet has been loaded } mystylesheet.onerror...
<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.
<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.
<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.
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.
tabindex - HTML: Hypertext Markup Language
this prevents assistive technology from being able to navigate to and manipulate those components.
Link types - HTML: Hypertext Markup Language
<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.
Evolution of HTTP - HTTP
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.
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).
Using HTTP cookies - HTTP
WebHTTPCookies
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.
Cross-Origin Resource Policy (CORP) - HTTP
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.
Cache-Control - HTTP
setting must-revalidate does not make sense because in order to go through revalidation you need the response to be stored in a cache, which no-store prevents.
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.
Content-Security-Policy - HTTP
other directives block-all-mixed-content prevents loading any assets using http when the page is loaded using https.
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).
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.
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.
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 ...
A re-introduction to JavaScript (JS tutorial) - JavaScript
however, using this method prevents some javascript engine and minifier optimizations being applied.
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.
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.
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.
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.
Optional chaining (?.) - JavaScript
this prevents the error that would occur if you simply accessed obj.first.second directly without testing obj.first.
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.
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.
Populating the page: how browsers work - Web Performance
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.
Introduction to progressive web apps - Progressive web apps (PWAs)
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.
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.
Web API reference - Web technology reference
WebReferenceAPI
there's also a listing of all available events in the event reference.
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
regarding events, if display is set to none, the element receives no events.
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 rat...
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
tributes 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-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, a...
<altGlyph> - SVG: Scalable Vector Graphics
WebSVGElementaltGlyph
yle 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-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate dom interface this element implements the svgaltglyphelement interface.
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
t 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-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,...
<defs> - SVG: Scalable Vector Graphics
WebSVGElementdefs
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-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient element...
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
t 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-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,...
<foreignObject> - SVG: Scalable Vector Graphics
ditional 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, 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,...
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
t 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-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,...
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
t 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-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,...
<linearGradient> - SVG: Scalable Vector Graphics
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, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> ...
<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
t 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-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,...
<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 elementsstructural...
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
t 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-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,...
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
t 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-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,...
<radialGradient> - SVG: Scalable Vector Graphics
<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, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> ...
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
t 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-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,...
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
ditional 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, 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,...
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
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-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,...
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
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-opacity, stroke-width, text-anchor, 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, a...
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
t 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-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,...
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
ndex 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-opacity, stroke-width, text-anchor, 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, a...
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
t 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-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,...
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.
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.