AudioListener.forwardX - Web APIs
the forwardx read-only property of the audiolistener interface is an audioparam representing the x value of the direction vector defining the forward direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardx.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.forwardY - Web APIs
the forwardy read-only property of the audiolistener interface is an audioparam representing the y value of the direction vector defining the forward direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardy.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.forwardZ - Web APIs
the forwardz read-only property of the audiolistener interface is an audioparam representing the z value of the direction vector defining the forward direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardz.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.positionX - Web APIs
the positionx read-only property of the audiolistener interface is an audioparam representing the x position of the listener in 3d cartesian space.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionx.value = 1; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.positionY - Web APIs
the positiony read-only property of the audiolistener interface is an audioparam representing the y position of the listener in 3d cartesian space.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positiony.value = 1; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.positionZ - Web APIs
the positionz read-only property of the audiolistener interface is an audioparam representing the z position of the listener in 3d cartesian space.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.positionz.value = 1; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.upX - Web APIs
the upx read-only property of the audiolistener interface is an audioparam representing the x value of the direction vector defining the up direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upx.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.upY - Web APIs
the upy read-only property of the audiolistener interface is an audioparam representing the y value of the direction vector defining the up direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upy.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

AudioListener.upZ - Web APIs
the upz read-only property of the audiolistener interface is an audioparam representing the z value of the direction vector defining the up direction the listener is pointing in.
... syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upz.value = 0; value an audioparam.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
...And 7 more matches

nsIWebProgressListener
uriloader/base/nsiwebprogresslistener.idlscriptable this interface is implemented by clients wishing to listen in on the progress associated with the loading of asynchronous requests in the context of a nsiwebprogress instance as well as any child nsiwebprogress instances.
... for example, in the case of navigation within a single frame of a html frameset, a nsiwebprogresslistener instance attached to the nsiwebprogress of the frameset window will receive onstatechange() calls with the state_is_network flag set to indicate the start and stop of said navigation.
... note: if the object also implements nsiwebprogresslistener2 and the caller knows about that interface, this function will not be called.
...And 6 more matches

Set event listener breakpoints - Firefox Developer Tools
using a standard event breakpoint to use an event breakpoint, you open up the javascript debugger, and find and expand the event listener breakpoints section in the right hand column.
... to break when event listeners are hit, check the boxes next the events you are interested in.
... now when a keydown, keyup, keypress, or input event occurs, execution will pause as soon as it enters the listener code.
...And 5 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 3 more matches

EventListener - Web APIs
the eventlistener interface represents an object that can handle an event dispatched by an eventtarget object.
... note: due to the need for compatibility with legacy content, eventlistener accepts both a function and an object with a handleevent() property function.
... eventlistener.handleevent() a function that is called whenever an event of the specified type occurs.
...And 3 more matches

MediaQueryList.addListener() - Web APIs
the addlistener() method of the mediaquerylist interface adds a listener to the mediaquerylistener that will run a custom callback function in response to the media query status changing.
... this is basically an alias for eventtarget.addeventlistener(), for backwards compatibility purposes.
... older browsers should use addlistener instead of addeventlistener since mediaquerylist only inherits from eventtarget in newer browsers.
...And 3 more matches

InstallListener
installlisteners are notified of an addoninstall's progress.
... they may be registered to hear events from all addoninstalls through addinstalllistener or to a single addoninstall through addlistener.
...a listener may return false to cancel the download.
...And 2 more matches

PR_Listen
listens for connections on a specified socket.
... syntax #include <prio.h> prstatus pr_listen( prfiledesc *fd, printn backlog); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket that will be used to listen for new connections.
... returns the function returns one of the following values: upon successful completion of listen request, pr_success.
...And 2 more matches

MediaQueryList.removeListener() - Web APIs
the removelistener() method of the mediaquerylist interface removes a listener from the mediaquerylistener.
... this is basically an alias for eventtarget.removeeventlistener(), for backwards compatibility purposes — in older browsers you could use removeeventlistener() instead.
... syntax mediaquerylist.removelistener(func) parameters func a function or function reference representing the callback function you want to remove.
...And 2 more matches

HTMLIFrameElement.addNextPaintListener()
the addnextpaintlistener() method of the htmliframeelement is used to define a handler to listen for the next mozafterpaint event coming from the browser <iframe>.
... syntax instanceofhtmliframeelement.addnextpaintlistener(listener); returns void.
... parameters listener a function handler to listen for a mozafterpaint event.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); specification not part of any specification.

HTMLIframeElement.removeNextPaintListener()
the removenextpaintlistener() method of the htmliframeelement interface is used to remove a handler previously set with the addnextpaintlistener method.
... syntax instanceofhtmliframeelement.removenextpaintlistener(listener); returns void.
... parameters listener a function handler previously set with addnextpaintlistener.
... examples var browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); } browser.addnextpaintlistener(onnextpaint); browser.removenextpaintlistener(onnextpaint); specification not part of any specification.

nsIHTTPHeaderListener
modules/plugin/base/public/nsihttpheaderlistener.idlscriptable this interface allows plugin authors to access http response headers after issuing an nsipluginhost.geturl or nsipluginhost.posturl call.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the plugin author must provide an instance to {geturl,posturl}() that implements both nsipluginstreamlistener and nsihttpheaderlistener.
... this instance is passed in through {geturl,posturl}()'s streamlistener parameter.
... the browser will then qi this streamlistener to see if it implements nsihttpheaderlistener.

nsIMessageListener
listeners are attached using the nsimessagelistenermanager interface.
... each listener is invoked with its own copy of the message parameter.
... when the listener is called, 'this' value is the target of the message.
...when there are multiple listeners to synchronous messages, each listener's return value is sent back as an element in an array.

nsISHistoryListener
docshell/shistory/public/nsishistorylistener.idlscriptable an interface you can implement to receive notifications about activities that occur in session history, and optionally cancel them.
... inherits from: nsisupports last changed in gecko 1.7 a session history listener is notified when pages are added to, removed from, and loaded from session history.
... the listener can prevent any action (except adding a new session history entry) from happening by returning false from the corresponding callback method.
... a session history listener can be registered on a particular nsishistory instance via the nsishistory.addshistorylistener() method.

nsIServerSocketListener
inherits from: nsisupports last changed in gecko 1.7 method overview void onsocketaccepted(in nsiserversocket aserv, in nsisockettransport atransport); void onstoplistening(in nsiserversocket aserv, in nsresult astatus); methods onsocketaccepted() this method is called when a client connection is accepted.
... onstoplistening() this method is called when the listening socket stops for some reason.
...void onstoplistening( in nsiserversocket aserv, in nsresult astatus ); parameters aserv the server socket.
... astatus the reason why the server socket stopped listening.

nsIWebProgressListener2
an extended version of nsiwebprogresslistener.
... uriloader/base/nsiwebprogresslistener2.idlscriptable please add a summary to this article.
... last changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogresslistener method overview void onprogresschange64(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with awebprogress.
...this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports 64-bit values.

nsIWebSocketListener
netwerk/protocol/websocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen().
...no additional messages through onmessageavailable(), onbinarymessageavailable()() or onacknowledge()() will be delievered to the listener after onserverclose() is called, but outgoing messages can still be sent through the nsiwebsocketchannel connection.
...any listener that receives onstart() will also receive onstop().
...this is the final notification the listener will receive; once it's been received, the websocket connection is complete.

EventListener.handleEvent() - Web APIs
the eventlistener method handleevent() method is called by the user agent when an event is sent to the eventlistener, in order to handle events that occur on an observed eventtarget.
... syntax eventlistener.handleevent(event); parameters event an event object describing the event that has been fired and needs to be processed.
... specifications specification status comment domthe definition of 'eventlistener.handleevent()' in that specification.
... document object model (dom) level 2 events specificationthe definition of 'eventlistener.handleevent()' in that specification.

MediaQueryListListener - Web APIs
the mediaquerylist.addlistener() callback is now a plain function and called with the standard mediaquerylistevent object.
... a mediaquerylist object maintains a list of media queries on a document, and handles sending notifications to listeners when the media queries on the document change.
... a mediaquerylistlistener is a callback function that gets invoked with a single argument, the mediaquerylist for which the evaluated result changed.
... specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistlistener' in that specification.

addTabsProgressListener - Archive of obsolete content
« xul reference home addtabsprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents in all tabs in the tabbed browser.
... the progress listener should be based on the nsiwebprogresslistener interface with an additional "browser" argument as the first argument of every method, which is the browser (not <tabbrowser> = gbrowser) where the event occurred.
... see listening to events on all tabs for details.

AddonListener
addonlisteners can be registered with addaddonlistener() and will then receive notification of changes to the add-ons currently installed.
... these notifications come in the form of calls to methods on the listener object.
... a listener only needs to implement the methods corresponding to the events it cares about; missing methods will not cause any problems.

nsICurrentCharsetListener
intl/uconv/idl/nsicurrentcharsetlistener.idlscriptable please add a summary to this article.
... inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/intl/currentcharsetlistener;1.
... to create an instance, use: var currentcharsetlistener = components.classes["@mozilla.org/intl/currentcharsetlistener;1"] .createinstance(components.interfaces.nsicurrentcharsetlistener); method overview void setcurrentcharset(in wstring charset); void setcurrentcomposercharset(in wstring charset); void setcurrentmailcharset(in wstring charset); methods setcurrentcharset() void setcurrentcharset( in wstring charset ); parameters charset setcurrentcomposercharset() void setcurrentcomposercharset( in wstring charset ); parameters charset setcurrentmailcharset() void setcurrentmailcharset( in wstring charset ); parameters charset ...

nsIFeedProgressListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface defines callbacks used during the processing of an rss or atom feed.
... 1.0 66 introduced gecko 1.8 inherits from: nsifeedresultlistener last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handleentry(in nsifeedentry entry, in nsifeedresult result); void handlefeedatfirstentry(in nsifeedresult result); void handlestartfeed(in nsifeedresult result); void reporterror(in astring errortext, in long linenumber, in boolean bozo); methods handleentry() called after each entry or item is processed.
... see also nsifeedresultlistener interwiki lin ...

BaseAudioContext.listener - Web APIs
the listener property of the baseaudiocontext interface returns an audiolistener object that can then be used for implementing 3d audio spatialization.
... syntax baseaudiocontext.listener; value an audiolistener object.
... var mylistener = audioctx.listener; specifications specification status comment web audio apithe definition of 'listener' in that specification.

Listen for Page Load - Archive of obsolete content
the following add-on listens to the tab's built-in ready event and just logs the url of each tab as the user loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the browser console, not the web console.
...you can listen for a number of other tab events, including open, close, and activate.

Listening for Load and Unload - Archive of obsolete content
exports.onunload = function (reason) {}; reason reason is one of the following strings describing the reason your add-on was unloaded: uninstall disable shutdown upgrade downgrade if your add-on is disabled, then uninstalled, your onunload listener will only be called once, with the disable reason.
... this happens because disabling an add-on also disables its onunload listeners, so there is no listener remaining when the add-on is uninstalled.

removeTabsProgressListener - Archive of obsolete content
« xul reference home removetabsprogresslistener( listener ) return type: no return value removes a progress listener to the browser which has been monitoring all tabs.
... the progress listener should implement the nsiwebprogresslistener interface.

addProgressListener - Archive of obsolete content
« xul reference home addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
... the progress listener should implement the nsiwebprogresslistener interface.

UpdateListener
an updatelistener receives messages from an update check for a single add-on, though it is possible to pass the same updatelistener to as many calls to findupdates() as you like.
... for each individual update check, the following methods will be called on the listener: either oncompatibilityupdateavailable() or onnocompatibilityupdateavailable(), depending on whether compatibility information for the requested application version was seen.

amIWebInstallListener
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable starts all installs.
... the registered amiwebinstalllistener is used to notify about new installs triggered by websites.

nsIBadCertListener2
security/manager/ssl/public/nsibadcertlistener2.idlscriptable this interface is used to is report a broken ssl status.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) replaces the obsolete nsibadcertlistener interface.

nsIConsoleListener
xpcom/base/nsiconsolelistener.idlscriptable this interface allows you to listen for messages sent to the console.
...listeners must first be attached to the service using nsiconsoleservice.registerlistener() void observe( in nsiconsolemessage amessage ); parameters amessage the nsiconsolemessage being posted.

nsIFeedResultListener
toolkit/components/feeds/public/nsifeedlistener.idlscriptable this interface should be implemented by programs to receive events from the feed parser as parsing progresses.
... see also nsifeedprogresslistener nsisupports interwiki link ...

nsIFrameMessageListener
when the listener is called, the this value is the target of the message.
...see also content process event handling nsiframelistener ...

nsIXULBuilderListener
content/xul/templates/public/nsixulbuilderlistener.idlscriptable this object is a listener that will be notified when a template builder rebuilds its content.
... example create an object which implements nsixulbuilderlistener: var mylistener = { queryinterface: function(aiid) { if (aiid.equals(components.interfaces.nsixulbuilderlistener) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; }, willrebuild : function(builder) {}, didrebuild : function(builder) { } } attach the listener to a element: myelement.addlistener(mylistener); ...

removeProgressListener - Archive of obsolete content
« xul reference home removeprogresslistener( listener ) return type: no return value remove a nsiwebprogresslistener from the browser.

TypeListener
typelisteners can be registered with addtypelistener() and will then receive notification as addontype are registered and unregistered.

UpdateCheckListener
updatechecklisteners are passed the results of update checks performed by the addonupdatechecker.

nsIAutoCompleteListener
xpfe/components/autocomplete/public/nsiautocompletelistener.idlscriptable this interface is deprecated.

nsICacheListener
netwerk/cache/nsicachelistener.idlscriptable this interface is a cache listener.

nsICycleCollectorListener
xpcom/base/nsicyclecollectorlistener.idlscriptable interface to pass to the cycle collector to get information about the cycle collector graph while it is being built.

nsIDNSListener
netwerk/dns/nsidnslistener.idlscriptable please add a summary to this article.

nsIDOMEventListener
the nsidomeventlistener interface implements the dom eventlistener interface.

nsIDirIndexListener
netwerk/streamconv/public/nsidirindexlistener.idlscriptable this interface is used to receive contents of directory index listings from a protocol.

nsISSLErrorListener
security/manager/ssl/public/nsisslerrorlistener.idlscriptable a mechanism to report a broken ssl connection.

nsIStreamListener
netwerk/base/public/nsistreamlistener.idlscriptable this interface is used to listen to data being received on a stream.

nsIThreadPoolListener
the nsithreadpoollistener interface represents objects that listen to notifications generated by the nsithreadpool.

nsITransactionListener
editor/txmgr/idl/nsitransactionlistener.idlscriptable this interface is implemented by an object that tracks transactions.

nsIUpdateCheckListener
toolkit/mozapps/update/nsiupdateservice.idlscriptable an interface describing an object that listens to the progress of an update check operation.

nsIWifiListener
netwerk/wifi/nsiwifilistener.idlscriptable this interface is implemented by clients interested in receiving notifications when the list of available wifi access points changes.

Examine Event Listeners - Firefox Developer Tools
the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: click the icon, then you'll see a popup listing all the event listeners bound to this element: each line contains: a right-pointing arrowhead; click to expand the row and show the listener function source code a curved arrow pointing to a stack; click it to show the code for the handler in the debugger the name of the event for which a handler was attached to this element the name and line number for the listener; you can also click here to expand the row and view the listener function source code a label indicating whether the event bubbles a label indicating the system that defines the event.

Index - Web APIs
142 audiolistener api, audiolistener, interface, reference, référence(2), web audio api the audiolistener interface represents the position and orientation of the unique person listening to the audio scene, and is used in audio spatialization.
... all pannernodes spatialize in relation to the audiolistener stored in the baseaudiocontext.listener attribute.
... 143 audiolistener.dopplerfactor api, audio, audiolistener, deprecated, doppler, doppler effect, property, reference, web audio api, dopplerfactor, effects the deprecated dopplerfactor property of the audiolistener interface is a double value representing the amount of pitch shift to use when rendering a doppler effect.
...And 77 more matches

Index
180 amiwebinstalllistener interfaces, interfaces:scriptable, xpcom, xpcom interface reference called when the website is not allowed to directly prompt the user to install add-ons.
...to create an instance, use: 185 imgicontainerobserver interfaces, interfaces:scriptable, needscontent, reference, xpcom interface reference, needsattention if you wish to listen for activities on an imgicontainer, you should implement the framechanged() method.
... 294 nsiaccessibleevent accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference to listen to in-process accessibility invents, make your object an nsiobserver, and listen for accessible-event by using code something like this: 295 nsiaccessiblehyperlink accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference returns a reference to the object at the given index.
...And 54 more matches

WebRequest.jsm
the webrequest module provides an api to add event listeners for the various stages of making an http request.
... the event listener receives detailed information about the request, and can modify or cancel the request.
... to import webrequest, use code like: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); the webrequest object has the following properties, each of which corresponds to a specific stage in executing a web request: onbeforerequest onbeforesendheaders onsendheaders onheadersreceived onresponsestarted oncompleted each of these objects defines two functions: addlistener(callback, filter, opt_extrainfospec) removelistener(callback) adding listeners use addlistener to add a listener to a particular event.
...And 40 more matches

widget - Archive of obsolete content
we can then use a content script to listen for clicks on those buttons.
... 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"); ...
...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 workin...
...And 25 more matches

ui/frame - Archive of obsolete content
if the frame script initiates the conversation, you need to specify "*" as the origin: window.parent.postmessage("ping", "*"); if the frame script has received a message from the add-on already, it can use the origin property of the event object passed to the message hander: // listen for messages from the add-on, and send a reply window.addeventlistener("message", function(event) { event.source.postmessage("pong", event.origin) }, false); this frame script listens to change events on the "city-selector" <select> element, and sends a message to the add-on containing the value for the newly selected element.
... // city-info.js var cityselector = window.document.getelementbyid("city-selector"); cityselector.addeventlistener("change", citychanged); function citychanged() { window.parent.postmessage(cityselector.value, "*"); } to listen for these messages in the main add-on code, you can assign a listener to the frame's message event.
...you can specify the frame's url property as the targetorigin: frame.postmessage(message, frame.url); this add-on listens for a frame script to send the "city changed" message above, and in response, updates all frames across all browser windows with that city's current weather (it just reads this from a dictionary, where in a real case it might ask a web service): var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var weather = { "london" : "rainy", "toronto" : "snowy", "...
...And 25 more matches

ui/sidebar - Archive of obsolete content
listen to attach if the first message in your add-on goes from the sidebar scripts to the main add-on code, and listen to ready if the first message goes from the main add-on code to the sidebar script.
...the sidebar script may not be initialized yet, so you can't reliably send messages to the sidebar script right away: however, you can start listening to messages from the script.
...een main.js and a script in a sidebar, in the case where the sidebar script initiates communication: the html file includes just a script, "sidebar.js": <!doctype html> <html> <body> content for my sidebar <script type="text/javascript" src="sidebar.js"></script> </body> </html> the "sidebar.js" file sends a ping message to main.js using port.emit() as soon as it loads, and adds a listener to the pong message.
...And 25 more matches

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
the final goal is to find the correct stream listener to pump the data into when necko calls ondataavailable (e.g., we may find the html parser as the stream listener to give the data to).
...it keeps track of currently pending loads and registered content listeners.
...nsdocumentopeninfo implements nsistreamlistener and proxies the nsistreamlistener calls over to the "real" stream listener once one is chosen.
...And 25 more matches

Index - Archive of obsolete content
67 windows add-on sdk enumerate and examine open browser windows, open new windows, and listen for window events.
... 100 preferences/event-target add-on sdk listen to changes to the preferences system in firefox.
... 159 listen for page load add-on sdk no summary!
...And 23 more matches

nsIMsgMessageService
inherits from: nsisupports method overview void copymessage(in string asrcuri, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); [noscript] void copymessages(in nsmsgkeyarrayptr keys, in nsimsgfolder srcfolder, in nsistreamlistener acopylistener, in boolean amovemessage, in nsiurllistener aurllistener, in nsimsgwindow amsgwindow, out nsiuri aurl); void displaymessage(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiu...
...rllistener aurllistener, in string acharsetoverride, out nsiuri aurl); void openattachment(in string acontenttype, in string afilename, in string aurl, in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener); void savemessagetodisk(in string amessageuri, in nsifilespec afile, in boolean ageneratedummyenvelope, in nsiurllistener aurllistener, out nsiuri aurl, in boolean canonicallineending, in nsimsgwindow amsgwindow); void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); void search(in nsimsgsearch...
...session asearchsession, in nsimsgwindow amsgwindow, in nsimsgfolder amsgfolder, in string asearchuri); nsiuri streammessage(in string amessageuri, in nsisupports aconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, in boolean aconvertdata, in string aadditionalheader); nsiuri streamheaders(in string amessageuri, in nsistreamlistener aconsumer, in nsiurllistener aurllistener [optional] in boolean alocalonly); boolean ismsginmemcache(in nsiuri aurl, in nsimsgfolder afolder, out nsicacheentrydescriptor acacheentry); nsimsgdbhdr messageuritomsghdr(in string uri); methods copymessage() pass in the uri for the message you want to have copied.
...And 23 more matches

nsIWebProgress
the nsiwebprogress interface is used to add or remove nsiwebprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
...a nsiwebprogresslistener instance receives notifications for the nsiwebprogress instance to which it added itself, and it may also receive notifications from any nsiwebprogress instances that are children of that nsiwebprogress instance.
... last changed in gecko 1.8.0 inherits from: nsisupports method overview void addprogresslistener(in nsiwebprogresslistener alistener, in unsigned long anotifymask); void removeprogresslistener(in nsiwebprogresslistener alistener); attributes attribute type description domwindow nsidomwindow the dom window associated with this nsiwebprogress instance.
...And 22 more matches

panel - Archive of obsolete content
your add-on can receive notifications when a panel is shown or hidden by listening to its show and hide events.
... var myscript = "window.addeventlistener('click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { consol...
...function handleclick(state) { textentrypanel.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
...And 19 more matches

Introduction to events - Learn web development
note: event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together.
... the listener listens out for the event happening, and the handler is the code that is run in response to it happening.
...we are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random rgb color and sets the <body> background-color equal to it.
...And 18 more matches

Mail composition back end
pizzarro <rhp@netscape.com> contents overview sending messages nsimsgsend sending listener interfaces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to put together a small doc on the new interfaces and how one can use them.
...the feedback mechanism is provided by a nsimsgsendlistener which is implemented by the caller.
... the caller has the ability to add or remove listener interfaces to the nsimsgsend object and the interface can support multiple listeners.
...And 18 more matches

context-menu - Archive of obsolete content
items are bound to contexts in much the same way that event listeners are bound to events.
...if you register a listener function for this event and it returns true, the menu item associated with the listener's content script is shown in the menu.
... for example, this item appears whenever the context menu is invoked on a page that contains at least one image: require("sdk/context-menu").item({ label: "this page has images", contentscript: 'self.on("context", function (node) {' + ' return !!document.queryselector("img");' + '});' }); note that the listener function has a parameter called node.
...And 17 more matches

tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
... tabs.on('open', function onopen(tab) { myopentabs.push(tab); }); // listen for tab content loads.
...l tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register event listeners to be notified when the tab is closed, activated or deactivated, or when the page hosted by the tab is loaded or retrieved from the "back-forward cache": var tabs = require("sdk/tabs"); function onopen(tab) { console.log(tab.url + " is open"); tab.on("pageshow", logshow); tab.on("activate", logactivate); tab.on("deactivate", logdeactivate); tab.on("close", logclose); } function lo...
...And 17 more matches

event/core - Archive of obsolete content
an event listener may be registered to any event target using the on function: var { on, once, off, emit } = require('sdk/event/core'); var target = { name: 'target' }; on(target, 'message', function listener(event) { console.log('hello ' + event); }); on(target, 'data', console.log); an event of a specific type may be emitted on any event target object using the emit function.
... this will call all registered listeners for the given type on the given event target in the same order they were registered.
... emit(target, 'message', 'event'); // info: 'hello event' emit(target, 'data', { type: 'data' }, 'second arg'); // info: [object object] 'second arg' registered event listeners may be removed using off function: off(target, 'message'); emit(target, 'message', 'bye'); // info: 'hello bye' sometimes listener only cares about first event of specific type.
...And 17 more matches

event/target - Archive of obsolete content
users of the object can listen to the events using the standard on() and once() functions.
... this module provides an exemplar eventtarget object, that implements an interface for adding and removing event listeners of a specific type.
... adding listeners eventtarget interface defines on method, that can be used to register event listeners on them for the given event type: target.on('message', function onmessage(message) { // note: `this` pseudo variable is an event `target` unless // intentionally overridden via `.bind()`.
...And 17 more matches

Intercepting Page Loads - Archive of obsolete content
in a nutshell, from the chrome code in the overlay we add an event listener for the load event.
... this._loadhandler = function() {that._onpageload(); }; gbrowser.addeventlistener("load", this._loadhandler, true); gbrowser is a global object that corresponds to the tabbrowser element in the main browser window.
...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.
...And 17 more matches

Mail event system
nsifolders each store individual lists of folder listeners which are maintained with addlistener() and removelistener().
... when a notification is fired on a folder, all of the folder's folder listeners and the mail session itself is notified.
... nsifolderlistener.idl is an interface that an object can implement if it is interested in listening to changes on single folder or on all folders.
...And 16 more matches

Color picker tool - CSS: Cascading Style Sheets
tcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscribers =...
...ment.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (t...
...unsubscribe, setpickermode : setpickermode }; })(); /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = ...
...And 16 more matches

Working with Events - Archive of obsolete content
by registering a listener function to an event emitter an add-on can receive notifications of these events.
...in this case one end of the conversation emits the events, and the other end listens to them.
... so there are two main ways you will interact with the eventemitter framework: listening to built-in events emitted by objects in the sdk, such as tabs opening, pages loading, mouse clicks sending and receiving user-defined events between content scripts and add-on code this guide only covers the first of these; the second is explained in the working with content scripts guide.
...And 15 more matches

ui/toolbar - Archive of obsolete content
onattach function assign a listener to the attach event.
... ondetach function assign a listener to the detach event.
... onshow function assign a listener to the show event.
...And 15 more matches

Adding Event Handlers - Archive of obsolete content
you can attach listeners to each element to listen to the events during each step of event propagation.
... due to the way a single event is passed to all the ancestors, you may attach a listener to a specific element or to an element higher in the hierarchy.
... there are two ways to attach an event listener to an element.
...And 15 more matches

Vue conditional rendering: editing existing todos - Learn web development
to fix that, we need to listen for the item-edited event, and update the list accordingly.
...ew methods to your app.vue's component object, 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.
...to understand this better, it is a good idea to write out a flow chart, description, or diagram of what events are emitted where, where they are being listened for, and what happens as a result of them firing.
...And 15 more matches

CustomizableUI.jsm
this is handled by customizemode.jsm, which interacts with customizableui through a listener mechanism.
... listeners customizableui provides a way to listen for various bits of customization happening.
... method overview void addlistener(alistener); void removelistener(alistener); void registerarea(aareaid, aproperties); void registertoolbarnode(atoolbar, aexistingchildren); void registermenupanel(apanel); void unregisterarea(aareaid, adestroyplacements); void addwidgettoarea(awidgetid, aareaid, [optional] aposition); void removewidgetfromarea(awidgetid); v...
...And 15 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
tcolor = function getcolor() { if (this.a | 0 === 1) return this.gethexa(); return this.getrgba(); }; /*=======================================================================*/ /*=======================================================================*/ /*========== capture mouse movement ==========*/ var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener('mousedown', function(e) { callback(e); document.addeventlistener('mousemove', callback); }); document.addeventlistener('mouseup', function(e) { document.removeeventlistener('mousemove', callback); }); }; /*====================*/ // color picker class /*====================*/ function colorpicker(node) { this.color = new color(); this.node = node; this.subscribers =...
...ment.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (t...
...= null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.
...And 15 more matches

Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to perform the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscriptobject.greeting); // "hello from add-on" }, false); after firefox 30, you can still do this for primitive values, but can no longer do it for objects.
...s it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <input id="works" type="button" value="i will work"/> <input id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", functi...
...on() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { alert(assignedcontentscriptobject.greeting); }, false); </script> </body> </html> if you run the example, clicking "i will work" displays the value of "greeting" in an alert.
...And 14 more matches

nsIWebBrowser
embedders use this interface during initialization to associate the new web browser instance with the embedders chrome and to register any listeners.
...method overview void addwebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void removewebbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiwebbrowserchrome the chrome object associated with the browser instance.
... the chrome may optionally implement nsiinterfacerequestor, nsiwebbrowserchromefocus, nsicontextmenulistener and nsitooltiplistener to receive additional notifications from the browser object.
...And 14 more matches

Border-image generator - CSS: Cascading Style Sheets
all; float: left; } javascript content 'use strict'; /** * ui-slidersmanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.style.width = 50 + obj.precision * 10 + 'px'; input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parsefloat(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); return input; }; var slidercomponent = function slidercomponent(obj, sign) { var slider = document.createelement('div'); var startx = ...
...null; var start_value = 0; slider.addeventlistener("click", function(e) { document.removeeventlistener("mousemove", slidermotion); setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mouseup", slideend); document.addeventlistener("mousemove", slidermotion); }); var slideend = function slideend(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }; var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delt...
...= null) { option = node.firstelementchild; option_value = option.getattribute('data-value'); if (option_value === null) option.setattribute('data-value', uval); list.appendchild(node.firstelementchild); uval++; } node.appendchild(select); node.appendchild(list); select.onclick = this.toggle.bind(this); list.onclick = this.updatevalue.bind(this); document.addeventlistener('click', clickout); this.state = 0; this.time = 0; this.dropmenu = list; this.select = select; this.toggle(false); this.value = {}; this.topic = topic; if (label) select.textcontent = label; else this.setnodevalue(list.children[selected]); dropdowns[topic] = this; }; dropdown.prototype.toggle = function toggle(state) { if (typeof(state) === 'boolean') this.
...And 14 more matches

Communicating using "port" - Archive of obsolete content
on(): listen to a message.
... removelistener(): stop listening to a message.
... once(): listen to only the first occurrence of a message.
...And 13 more matches

Interaction between privileged and non-privileged pages - Archive of obsolete content
in your extension's browser.xul overlay, write code which listens for a custom dom event.
... var myextension = { mylistener: function(evt) { alert("received from web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
...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.
...And 13 more matches

Using the Editor from XUL - Archive of obsolete content
as well as making the editor (which happens via nseditorshell::doeditormode()) we also hook up various listeners and observers for ui updating and user interaction, and store a file specifier for the document we opened.
...in order to receive these events, the editor registers several event listeners on the document being edited.
... the following event listeners are registered: in nshtmleditor::installeventlisteners(), we install the following.
...And 13 more matches

nsIMsgFolder
imsgwindow msgwindow); void propagatedelete(in nsimsgfolder folder, in boolean deletestorage,in nsimsgwindow msgwindow); void recursivedelete(in boolean deletestorage, in nsimsgwindow msgwindow); void createsubfolder(in astring foldername, in nsimsgwindow msgwindow); nsimsgfolder addsubfolder(in astring foldername); void createstorageifmissing(in nsiurllistener urllistener); void compact(in nsiurllistener alistener, in nsimsgwindow amsgwindow); void compactall(in nsiurllistener alistener, innsimsgwindow amsgwindow,in nsisupportsarray afolderarray, in boolean acompactofflinealso,in nsisupportsarray aofflinefolderarray); void compactallofflinestores(in nsimsgwindow amsgwindow,in nsisupportsarray aofflinefolderarray); ...
...void emptytrash(in nsimsgwindow amsgwindow, in nsiurllistener alistener); void rename(in astring name, in nsimsgwindow msgwindow); void renamesubfolders( in nsimsgwindow msgwindow, in nsimsgfolder oldfolder); astring generateuniquesubfoldername(in astring prefix,in nsimsgfolder otherfolder); void updatesummarytotals(in boolean force); void summarychanged(); long getnumunread(in boolean deep); long gettotalmessages(in boolean deep); void clearnewmessages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsigned long...
...gned long resultsize, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener, in boolean isfolder, in boolean allowundo); void copyfolder(in nsimsgfolder srcfolder, in boolean ismovefolder,in nsimsgwindow msgwindow, in nsimsgcopyservicelistener listener ); ...
...And 13 more matches

nsITraceableChannel
1.0 66 introduced gecko 1.9.0.4 inherits from: nsisupports last changed in gecko 1.9.0.4 the typical way to use this interface is as follows: register for the "http-on-examine-response" notification to track all http responses; skip redirects (responsestatus = 3xx on nsihttpchannel), since otherwise you may end up with two listeners registered for a channel; qi the channel passed as the "subject" to your observer to nsitraceablechannel, and replace the default nsistreamlistener (that passes the data to the original requester - e.g.
... to xmlhttprequest or to the browser tab that made the request) with your own implementation (see "implementing nsistreamlistener" below).
... after that your nsistreamlistener implementation will get the response data and will be able to pass the data on to the original nsistreamlistener (possibly modifying it).
...And 13 more matches

Web audio spatialization basics - Web APIs
as if its extensive variety of sound processing (and other) options wasn't enough, the web audio api also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3d game.
... creating an audio listener so let's begin!
... the baseaudiocontext (the interface the audiocontext is extended from) has a listener property that returns an audiolistener object.
...And 13 more matches

ui/button/toggle - Archive of obsolete content
responding to click events you can respond to click events by assigning a listener to the button's click or change events.
... you can do this in the button's constructor, by assigning the listener to the onclick or onchange option.
... you can also add, or change, the listener afterwards: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: firstclick, onchange: firstchange }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } function firstchange(state) { console.log("you changed '" + state.label + "'"); button.removelistener("change", firstchange); button.on("change", subsequentchanges); } function subsequentchanges(state) { ...
...And 12 more matches

Creating Event Targets - Archive of obsolete content
the guide to event-driven programming with the sdk describes how to consume events: that is, how to listen to events generated by event targets.
... for example, you can listen to the tabs module's ready event or the panel object's show event.
...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.
...And 12 more matches

nsIFrameMessageManager
content/base/public/nsimessagemanager.idlscriptable provides methods for managing message listeners on local frames.
...you should use nsimessagelistenermanager or nsimessagesender instead.
... method overview void addmessagelistener(in astring amessage, in nsiframemessagelistener alistener, [optional] in boolean listenwhenclosed); void removemessagelistener(in astring amessage, in nsiframemessagelistener alistener); void sendasyncmessage(in astring amessage, in astring json); methods addmessagelistener() adds a message listener to the local frame.
...And 12 more matches

Sending forms through JavaScript - Learn web development
urlencodeddata = urlencodeddatapairs.join( '&' ).replace( /%20/g, '+' ); // define what happens on successful data submission xhr.addeventlistener( 'load', function(event) { alert( 'yeah!
... data sent and response loaded.' ); } ); // define what happens in case of error xhr.addeventlistener( 'error', function(event) { alert( 'oops!
... xhr.send( urlencodeddata ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party web site.
...And 11 more matches

Embedding Tips
implement the nsiwebprogresslistener interface and register it with the appropriate web browser object via the nsiwebbrowser::addwebbrowserlistener() method.
...alternatively, implement a nsiuricontentlistener as described below.
... implement the nsiuricontentlistener interface, and register it with the appropriate web browser object via the nsiwebbrowser::parenturicontentlistener attribute.
...And 11 more matches

nsIMsgDatabase
nsisimpleenumerator enumeratemessages(); nsisimpleenumerator enumeratethreads(); void synccounts; nsimsgthread getthreadcontainingmsghdr(in nsimsgdbhdr msghdr); void markhdrread(in nsimsgdbhdr msghdr, in boolean bread, in nsidbchangelistener instigator); void markhdrreplied(in nsimsgdbhdr msghdr, in boolean breplied, in nsidbchangelistener instigator); void markhdrmarked(in nsimsgdbhdr msghdr, in boolean mark,in nsidbchangelistener instigator); void markmdnneeded(in nsmsgkey key, in boolean bneeded,in nsidbchangelistener instigator); boolean ismdnneeded(in nsmsgkey key); void markmdnsent(in nsmsgkey key, in boolean bneede...
...d, in nsidbchangelistener instigator); boolean ismdnsent(in nsmsgkey key); void markread(in nsmsgkey key, in boolean bread, in nsidbchangelistener instigator); void markreplied(in nsmsgkey key, in boolean breplied, in nsidbchangelistener instigator); void markforwarded(in nsmsgkey key, in boolean bforwarded, in nsidbchangelistener instigator); void markhasattachments(in nsmsgkey key, in boolean bhasattachments, in nsidbchangelistener instigator); void markthreadread(in nsimsgthread thread, in nsidbchangelistener instigator, in nsmsgkeyarrayptr thosemarked); native code only!
... void markthreadignored(in nsimsgthread thread, in nsmsgkey threadkey, in boolean bignored, in nsidbchangelistener instigator); void markthreadwatched(in nsimsgthread thread, in nsmsgkey threadkey, in boolean bwatched, in nsidbchangelistener instigator); void markheaderkilled(in nsimsgdbhdr msg, in boolean bignored, in nsidbchangelistener instigator); boolean isread(in nsmsgkey key); boolean isignored(in nsmsgkey key); boolean ismarked(in nsmsgkey key); boolean hasattachments(in nsmsgkey key); void markallread(in nsmsgkeyarrayptr thosemarked); native code only!
...And 11 more matches

XPCOM Interface Reference by grouping
browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow...
...t nsidomhtmlformelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink ...
...unicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsix...
...And 11 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.
...ripts 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.
... messaging from content script to page script suppose we have a page called "listen.html" hosted at "my-domain.org", and we want to send messages from the add-on to a script embedded in that page.
...And 10 more matches

ui/button/action - Archive of obsolete content
responding to click events you can respond to click events by assigning a listener to the button's click event.
... you can do this in the button's constructor, by assigning the listener to the onclick option.
... you can also add, or change, the listener afterwards: var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "my-button", label: "my button", icon: { "16": "./firefox-16.png", "32": "./firefox-32.png" }, onclick: firstclick }); function firstclick(state) { console.log("you clicked '" + state.label + "'"); button.removelistener("click", firstclick); button.on("click", subsequentclicks); } function subsequentclicks(state) { console.log("you clicked '" + state.label + "' again"); } the listener is passed a state object that contains all the button's properties.
...And 10 more matches

XUL Event Propagation - Archive of obsolete content
but to use events effectively in xul, you must be aware of what the actual process for raising, listening to, and handling events is.
...it's passive in that it doesn't look for a listener; it propagates or "bubbles up" the hierarchy of nodes within the interface until it is either handled in some way or passes out of the interface unhandled.
...the availability of event listeners is also somewhat pre-determined, though xul provide generalized event listeners (i.e., oncommand event listeners) for most of the elements in the widget hierarchy.
...And 10 more matches

Creating Sandboxed HTTP Connections
it takes two arguments: a listener and a context that is passed to the listener's methods.
... 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.
... since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a global, since another listener will be used for cookie notifications (covered in the next section).
...And 10 more matches

nsIWindowMediator
implemented by: @mozilla.org/appshell/window-mediator;1 as a service: var windowmediator = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); method overview void addlistener(in nsiwindowmediatorlistener alistener); boolean calculatezposition(in nsixulwindow inwindow, in unsigned long inposition, in nsiwidget inbelow, out unsigned long outposition, out nsiwidget outbelow); native code only!
... void removelistener(in nsiwindowmediatorlistener alistener); void setzlevel(in nsixulwindow awindow, in pruint32 azlevel); native code only!
... methods addlistener() register a listener for window status changes.
...And 10 more matches

XPCOM Interface Reference
component; nsiprefbranchextensionmanager (toolkit)iaccessible2iaccessibleactioniaccessibleapplicationiaccessiblecomponentiaccessibleeditabletextiaccessiblehyperlinkiaccessiblehypertextiaccessibleimageiaccessiblerelationiaccessibletableiaccessibletable2iaccessibletablecelliaccessibletextiaccessiblevalueidispatchijsdebuggeramiinstallcallbackamiinstalltriggeramiwebinstallinfoamiwebinstalllisteneramiwebinstallpromptamiwebinstallerimgicacheimgicontainerimgicontainerobserverimgidecoderimgidecoderobserverimgiencoderimgiloaderimgirequestinidomutilsjsdistackframemoziasyncfaviconsmoziasynchistorymozicoloranalyzermozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativecolorcallbackmozispellcheckingenginemozistorageaggregatefunctionmozistoragea...
...pplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicach...
...lnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsiconsolemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsicontentprefservicensicontentprefservice2nsicontentsecuritypolicynsicontentsniffernsicontentviewnsicontentviewmanagernsicontentviewernsicontrollernsicontrollersnsiconverterinputstreamnsiconverteroutputstreamnsicookiensicookie2nsicookieacceptdialognsicoo...
...And 10 more matches

PannerNode - Web APIs
pannernode.distancemodel an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... pannernode.maxdistance a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
... pannernode.refdistance a double value representing the reference distance for reducing volume as the audio source moves further from the listener.
...And 10 more matches

Tabbed browser - Archive of obsolete content
each snippet normally includes some code to run at initialization, these are best run using a load listener.
...if you need to do something with gbrowser right after the window is opened, listen for the load event and use gbrowser in the event listener.
... // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
...And 9 more matches

Index - Archive of obsolete content
218 onchange needshelp, reference, référence(2), xul attributes, xul reference an onchange attribute is an event listener to the object for the event change.
... 445 addprogresslistener xul methods, xul reference no summary!
... 448 addtabsprogresslistener no summary!
...And 9 more matches

HTML text fundamentals - Learn web development
severely visually impaired people often don't read web pages; they listen to them instead.
...if headings are not available, they will be forced to listen to the whole document read out loud.
...; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...And 9 more matches

Communicating with frame scripts
the example below sends a message named "my-e10s-extension-message", with a data payload containing details and tag properties, and exposes the event.target object as a cpow: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }, { target : event.target }); }, false); to receive messages from content, a chrome script needs to add a message listener using the message manager's addmessagelistener() api.
... the message passed to the listener is an object containing the following properties: name string containing the message name.
... objects an object whose properties are any cpows exposed by the sender as the third argument to sendasyncmessage() in the example below the listener just logs all the messages details: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give c...
...And 9 more matches

Using the 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.
... the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.addeventlistener('touchend',function() { browser.goback(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
...when you press the keyboard's return button, the 'submit' event is fired, which we handle like this: urlform.addeventlistener('submit',function(e) { e.preventdefault(); browser.src = urlbar.value; urlbar.blur(); }); we first call preventdefault() to stop the form just submitting and reloading the page — which is really not what we want.
...And 9 more matches

Drag Operations - Web APIs
however, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged.
... add a listener for the dragstart event.
... set the drag data in the above listener.
...And 9 more matches

Using Web Workers - Web APIs
calling start() is only needed if the message event is wired up via the addeventlistener() method.
... first, we create a queryableworker class that takes the url of the worker, a default listener, and an error handler, and this class is going to keep track of a list of listeners and help us communicate with the worker: function queryableworker(url, defaultlistener, onerror) { var instance = this, worker = new worker(url), listeners = {}; this.defaultlistener = defaultlistener || function() {}; if (onerror) {worker.onerror = onerror;} this.postmessage...
... = function(message) { worker.postmessage(message); } this.terminate = function() { worker.terminate(); } } then we add the methods of adding/removing listeners: this.addlisteners = function(name, listener) { listeners[name] = listener; } this.removelisteners = function(name) { delete listeners[name]; } here we let the worker handle two simple operations for illustration: getting the difference of two numbers and making an alert after three seconds.
...And 9 more matches

Cross-browser audio basics - Developer guides
myaudio.addeventlistener("loadstart", function() { //grabbing the file }); durationchange if you just want to know as soon as the duration of your media is established, this is the event for you.
... myaudio.addeventlistener("durationchange", function() { //you can display the duration now }); loadedmetadata metadata can consist of more than just duration — if you want to wait for all the metadata to download before doing something, you can detect the loadedmetadata event.
... myaudio.addeventlistener("loadedmetadata", function() { //you can display the duration now }); loadeddata the loadeddata event is fired when the first bit of media arrives.
...And 9 more matches

Creating a cross-browser video player - Developer guides
most of these buttons require a simple click event listener to be added, and a media api defined method and/or attributes to be called/checked on the video.
... play/pause playpause.addeventlistener('click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); when a click event is detected on the play/pause button, the handler first of all checks if the video is currently paused or has ended (via the media api's paused and ended attributes); if so, it uses the play() method to playback the video.
... stop stop.addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; }); the media api doesn't have a stop method, so to mimic this the video is paused, and its currenttime (i.e.
...And 9 more matches

port - Archive of obsolete content
from the content script to the main add-on code: // content-script.js var mymessagepayload = "some data"; self.port.emit("mymessage", mymessagepayload); from the main add-on code to the content script: // main.js var mymessagepayload = "some data"; worker.port.emit("mymessage", mymessagepayload); on() the port.on() function registers a function as a listener for a particular message sent from the other side using port.emit().
... in a content script, to listen for "mymessage" sent from the main add-on code: // content-script.js self.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); in the main add-on code, to listen for "mymessage" sent from a a content script: // main.js worker.port.on("mymessage", function handlemymessage(mymessagepayload) { // handle the message }); once() often you'll want to receive a message just once, then stop listening.
... this example rewrites the content script in the port.removelistener() example so that it uses once(): // content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); } self.port.once("get-first-para", getfirstparagraph); removelistener() you can use port.on() to listen for messages.
...And 8 more matches

page-mod - Archive of obsolete content
to do this, you'll need to listen to the page-mod's attach event.
...the listener is passed a worker object that your add-on can use to send and receive messages.
...it adds a listener to the getelements message.
...And 8 more matches

Appendix F: Monitoring DOM changes - Archive of obsolete content
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.
... for this reason, it is best to avoid using mutation listeners at all costs, especially from extensions.
...event listeners for those events are the preferred method for detecting dom modifications when feasible.
...And 8 more matches

PopupKeys - Archive of obsolete content
handling keys within menus when using a menupopup element, a keyboard listener is attached to the window that will handle keypresses for the menu.
...the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary.
...other keys are ignored by the menu key listener, however, the event does not propagate to the main window.
...And 8 more matches

tabbrowser - Archive of obsolete content
roup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, webbrowserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflag...
...s, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), h...
...And 8 more matches

AddonManager
callback) void installaddonsfromwebpage(in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[]) void addinstalllistener(in installlistener listener) void removeinstalllistener(in installlistener listener) promise?
...callback) void addaddonlistener(in addonlistener listener) void removeaddonlistener(in addonlistener listener) void addtypelistener(in typelistener listener) void removetypelistener(in typelistener listener) nsiuri geturiforresourceinfile(in nsifile afile, in string apath) properties overview attribute type description addontypes dictionary a dictionary...
... installaddonsfromwebpage() starts installation of an array of addoninstall notifying the registered web install listener of blocked or started installs.
...And 8 more matches

nsIDeviceMotion
method overview void addlistener(in nsidevicemotionlistener alistener); void addwindowlistener(in nsidomwindow awindow); native code only!
... void removelistener(in nsidevicemotionlistener alistener); void removewindowlistener(in nsidomwindow awindow); native code only!
... methods addlistener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onaccelerationchange() method as appropriate to share updated acceleration data.
...And 8 more matches

DevTools API - Firefox Developer Tools
window.document.body.addeventlistener("click", this.handleclick); } mypanel.prototype = { open: function() { // any asynchronous operations should be done here.
... this.window.document.body.removeeventlistener("click", this.handleclick); // async destruction.
... when an event is emitted on the eventemitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.
...And 8 more matches

Using Service Workers - Web APIs
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?
... let’s start this section by looking at a code sample — this is the first block you’ll find in our service worker: self.addeventlistener('install', (event) => { event.waituntil( caches.open('v1').then((cache) => { return cache.addall([ './sw-test/', './sw-test/index.html', './sw-test/style.css', './sw-test/app.js', './sw-test/image-list.js', './sw-test/star-wars-logo.jpg', './sw-test/gallery/', './sw-test/gallery/bountyhunters.jpg', './sw-test/ga...
...llery/mylittlevader.jpg', './sw-test/gallery/snowtroopers.jpg' ]); }) ); }); here we add an install event listener to the service worker (hence self), and then chain a extendableevent.waituntil() method onto the event — this ensures that the service worker will not install until the code inside waituntil() has successfully occurred.
...And 8 more matches

Box-shadow generator - CSS: Cascading Style Sheets
-pointer'; node.appendchild(pointer); this.pointer = pointer; setmousetracking(node, updateslider.bind(this)); sliders[topic] = this; setvalue(topic, this.value); } var setbuttoncomponent = function setbuttoncomponent(node) { var type = node.getattribute('data-type'); var topic = node.getattribute('data-topic'); if (type === "sub") { node.textcontent = '-'; node.addeventlistener("click", function() { decrement(topic); }); } if (type === "add") { node.textcontent = '+'; node.addeventlistener("click", function() { increment(topic); }); } } var setinputcomponent = function setinputcomponent(node) { var topic = node.getattribute('data-topic'); var unit_type = node.getattribute('data-unit'); var input = document.createelement('input'); ...
... var unit = document.createelement('span'); unit.textcontent = unit_type; input.setattribute('type', 'text'); node.appendchild(input); node.appendchild(unit); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { setvalue(topic, e.target.value | 0); }); subscribe(topic, function(value) { node.children[0].value = value; }); } var increment = function increment(topic) { var slider = sliders[topic]; if (slider === null || slider === undefined) return; if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setvalue(slider.topic, slider.value) notify.call(slider); } }; var decrement = function decrement(topic) { var slider = sliders[topic]; if (slider === nul...
...a = slider.max - slider.min; var width = slider.node.clientwidth; var offset = slider.pointer.clientwidth; var pos = (value - slider.min) * width / delta; slider.value = value; slider.pointer.style.left = pos - offset / 2 + "px"; slider.node.setattribute('data-value', value); notify.call(slider); } var setmousetracking = function setmousetracking(elem, callback) { elem.addeventlistener("mousedown", function(e) { callback(e); document.addeventlistener("mousemove", callback); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", callback); }); } var subscribe = function subscribe(topic, callback) { if (subscribers[topic] === undefined) subscribers[topic] = []; subscribers[topic].push(callback); } var unsubs...
...And 8 more matches

page-worker - Archive of obsolete content
onmessage function use this to add a listener to the page worker's message event.
... on(type, listener) registers an event listener with the page worker.
... parameters type : string the type of event to listen for.
...And 7 more matches

windows - Archive of obsolete content
enumerate and examine open browser windows, open new windows, and listen for window events.
...with this module, you can: enumerate the currently opened browser windows open new browser windows listen for common window events such as open and close private windows if your add-on has not opted into private browsing, then you won't see any private browser windows.
...windows.open("http://www.example.com"); // open a new window and set a listener for "open" event.
...And 7 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.
...listen to attach and detach events to hear as frames are created and destroyed.
...this is a shortcut for enumerating existing frames and then listening for attach events.
...And 7 more matches

On page load - Archive of obsolete content
if you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see progress listeners.
... progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events.
... progress listeners implement the nsiwebprogresslistener interface.
...And 7 more matches

XUL Events - Archive of obsolete content
the events listeners can be attached using addeventlistener and removed using removeeventlistener.
...when attaching event listeners using attributes, be aware that only one listener can be attached at a time.
... any previously attached listeners are disconnected.
...And 7 more matches

More Event Handlers - Archive of obsolete content
in the addeventlistener form, the first argument passed to the listener function will be the event object.
... other arguments can be passed to a listener function, if required.
...a similar property currenttarget holds the element that is currently having its event listeners handled.
...And 7 more matches

Common causes of memory leaks in extensions - Extensions
consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
...therefore, your add-on should clean up such intervals and timeouts when the corresponding content document is unloaded, by adding an unload event listener or by similar means.
... failing to clean up event listeners extensions can be disabled and removed by user actions, but it also happens when an add-on is updated.
...And 7 more matches

How to build custom form controls - Learn web development
window.addeventlistener("load", function () { document.body.classlist.remove("no-widget"); document.body.classlist.add("widget"); }); without js with js check out the source code note: if you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the <select> elements, and to dynamicall...
...the features we plan to use are the following: classlist addeventlistener() foreach queryselector() and queryselectorall() beyond the availability of those specific features, there is still one issue remaining before starting.
...window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); // each custom control needs to be initialized selectlist.foreach(function (select) { // as well as all its `option` elements var optionlist = select.queryselectorall('.option'); // each time a user hovers their mouse over an option, we highlight the given option optionlist.foreach(function (op...
...And 7 more matches

What is JavaScript? - Learn web development
uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the text label to see what happens (note also that you can find this demo on github — see the source code, or run it live)!
...for example, let's return to the block of javascript we saw in our first example: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updatename() code block (lines 5–8) is run.
...this means that the para object does not exist yet, so we can't add an event listener to it.
...And 7 more matches

Web Console remoting - Firefox Developer Tools
the web console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab.
... the new web console actors are: the webconsoleactor allows js evaluation, autocomplete, start/stop listeners, etc.
... to attach to the webconsoleactor, follow these steps: connecttoserver() // the usual listtabs() pickthetabyouwant() debuggerclient.attachconsole(tab.consoleactor, listeners, onattachconsole) the listeners argument is an array which specifies listeners you want to start in the web console.
...And 7 more matches

Testing media queries programmatically - CSS: Cascading Style Sheets
e query by looking at the value of its matches property: if (mediaquerylist.matches) { /* the viewport is currently in portrait orientation */ } else { /* the viewport is not currently in portrait orientation, therefore landscape */ } receiving query notifications if you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result.
... to do this, call the addlistener() method on the mediaquerylist object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from true to false): // create the query list.
... const mediaquerylist = window.matchmedia("(orientation: portrait)"); // define a callback function for the event listener.
...And 7 more matches

system/events - Archive of obsolete content
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.
... on(type, listener, strong) listen to events of a given type parameters type : string the event type name to watch.
... listener : function function that will be called when an event is fired, with a single event object as argument.
...And 6 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
aevent : window.event; } function onpageload(){ document.getelementbyid("mydiv").onclick = handleevent; } </script> mozilla fully supports the w3c standard way of attaching listeners to dom nodes.
... you use the addeventlistener() and removeeventlistener() methods, and have the benefit of being able to set multiple listeners for the same event type.
... both methods require three parameters: the event type, a function reference, and a boolean denoting whether the listener should catch events in their capture phase.
...And 6 more matches

Looping code - Learn web development
s.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } random(x), defined earlier in the cod...
...: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else { para.textcontent = 'contac...
...="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> <script> const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.addeventlistener('click', function() { let searchname = input.value.tolowercase(); input.value = ''; input.focus(); for (let i = 0; i < contacts.length; i++) { let splitcontact = contacts[i].split(':'); if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } els...
...And 6 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
we will also see how to declare and clean-up event listeners on dom elements.
...we will also have to use addeventlistener() and removeeventlistener() to run specific tasks when the control receives focus.
...to get this function called whenever the node gets focused, we need an event listener along these lines: node.addeventlistener('focus', event => node.select()).
...And 6 more matches

Message manager overview
similarly, if you send a message using the global frame message manager, it's received by all content tabs, and is then delivered to any frame scripts that are listening for it.
... its most important functions and attributes are: childcount : contains the number of children (typically, browser windows) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in the browser broadcastasyncmessage() : send a message to frame scripts addmessagelistener() : start listening to a specific message from all frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access access it using components.classes: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); you can also...
... its most important functions and attributes are: childcount : contains the number of children (typically, browser tabs) getchildat() : get the child at the given index loadframescript() : load a frame script into every tab in this window broadcastasyncmessage() : send a message to all frame scripts in this window addmessagelistener() : start listening to a specific message from frame scripts removemessagelistener() : stop listening to a specific message interfaces nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster how to access you can access it as a property of the browser window: // chrome script let windowmm = window.messagemanager; ...
...And 6 more matches

Overview of Mozilla embedding APIs
implemented interfaces: nsiservicemanager related interfaces: nsishutdownlistener nsmemory the nsmemory service provides the global memory manager implementation for xpcom.
...contract-id: ns_uri_loader_contractid implemented interfaces: nsiuriloader related interfaces: nsiuricontentlistener nsunknowncontenttypehandler the unknowncontenttypehandler service is the last resort of the uriloader when no other content handler can be located.
...contract-id: ns_pref_contractid implemented interfaces: nsiprefservice nsiprefbranch related interfaces: nsipreflistener profile manager service contract-id: implemented interfaces: document loader service (webprogress) eventually, this service will be replaced by thewebprogress service...
...And 6 more matches

XPCOM Stream Guide
there are two ways of getting the input stream: by calling the channel's .open() method for a synchronous read, or by calling the channel's .asyncopen() method with an nsistreamlistener object.
... stream listeners a stream listener is an object you build to let you know when there is data in a stream ready for you to consume.
...(this is particularly true of streams that reach out over a network connection, like http and ftp channels.) stream listeners implement three methods.
...And 6 more matches

nsIChannel
method overview void asyncopen(in nsistreamlistener alistener, in nsisupports acontext); nsiinputstream open(); attributes attribute type description contentcharset acstring the character set of the channel's content if available and if applicable.
...this means that: the stream listener this channel will be notifying was initially passed to the asyncopen() method of some other channel this channel's uri is a better identifier of the resource being accessed than this channel's originaluri.
...data is fed to the specified stream listener as it becomes available.
...And 6 more matches

nsIDownloadManager
es["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); method overview nsidownload adddownload(in short adownloadtype, in nsiuri asource, in nsiuri atarget, in astring adisplayname, in nsimimeinfo amimeinfo, in prtime astarttime, in nsilocalfile atempfile, in nsicancelable acancelable, in boolean aisprivate); void addlistener(in nsidownloadprogresslistener alistener); void canceldownload(in unsigned long aid); void cleanup(); void endbatchupdate(); obsolete since gecko 1.9.1 void flush(); obsolete since gecko 1.8 nsidownload getdownload(in unsigned long aid); void onclose(); obsolete since gecko 1.9.1 void open(in nsidomwindow aparent, in nsidownload a...
...nload); obsolete since gecko 1.9.1 void openprogressdialogfor(in nsidownload adownload, in nsidomwindow aparent, in boolean acanceldownloadonclose); obsolete since gecko 1.9.1 void pausedownload(in unsigned long aid); void removedownload(in unsigned long aid); void removedownloadsbytimeframe(in long long abegintime, in long long aendtime); void removelistener(in nsidownloadprogresslistener alistener); void resumedownload(in unsigned long aid); void retrydownload(in unsigned long aid); void savestate(); obsolete since gecko 1.8 void startbatchupdate(); obsolete since gecko 1.9.1 attributes attribute type description activedownloadcount long the number of files currently being...
... listener nsidownloadprogresslistener the download manager's progress listener.
...And 6 more matches

nsISHistory
to create an instance, use: var shistory = components.classes["@mozilla.org/browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistorylistener(in nsishistorylistener alistener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistorylistener(in nsishistorylistener alistener); attributes attribute type description count long the number of toplevel documents currently a...
... methods addshistorylistener() called to register a listener for the session history component.
... listeners are notified when pages are loaded or purged from history.
...And 6 more matches

nsIServerSocket
void close(); void asynclisten(in nsiserversocketlistener alistener); prnetaddr getaddress();native code only!
... methods asynclisten() this method puts the server socket in the listening state.
... it will asynchronously listen for and accept client connections.
...And 6 more matches

nsISyncMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "senders" have a single "other side" to which messages are sent.
...jsval objects, [optional] in nsiprincipal principal); jsval sendrpcmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects, [optional] in nsiprincipal principal); sendsyncmessage() like sendasyncmessage(), except blocks the sender until all listeners of the message have been invoked.
... returns an array containing return values from each listener invoked.
...And 6 more matches

nsITransactionManager
inherits from: nsisupports last changed in gecko 1.7 method overview void addlistener(in nsitransactionlistener alistener); void beginbatch(); void clear(); void dotransaction(in nsitransaction atransaction); void endbatch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description maxtransactioncount long sets the maximum number of transaction items the transaction manager will maintain at any ti...
... methods addlistener() adds a listener to the transaction manager's notification list.
... listeners are notified whenever a transaction is done, undone, or redone.
...And 6 more matches

BaseAudioContext.createPanner() - Web APIs
the panner node is spatialized in relation to the audiocontext's audiolistener (defined by the audiocontext.listener attribute), which represents the position and orientation of the person listening to the audio.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 6 more matches

PannerNode.distanceModel - Web APIs
the distancemodel property of the pannernode interface is an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 6 more matches

PannerNode.maxDistance - Web APIs
the maxdistance property of the pannernode interface is a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 6 more matches

PannerNode.setOrientation() - Web APIs
in such a case, a sound pointing away from the listener can be very quiet or even silent.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 6 more matches

PannerNode.setPosition() - Web APIs
the setposition() method of the pannernode interface defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) the three parameters x, y and z are unitless and describe the source's position in 3d space using the right-hand cartesian coordinate system.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 6 more matches

PannerNode.setVelocity() - Web APIs
the velocity relative to the listener is used to control the pitch change needed to conform with the doppler effect due to the relative speed.
... example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
...And 6 more matches

Event reference
mouseenter a pointing device is moved onto the element that has the listener attached.
... mouseleave a pointing device is moved off the element that has the listener attached.
... mouseover a pointing device is moved onto the element that has the listener attached or onto one of its children.
...And 6 more matches

simple-prefs - Archive of obsolete content
when the user clicks the button, the function listening to the on() function for this preference is called.
... you can also see them and change them programmatically using the prefs property, and listen for changes to a preference using on().
... globals functions on(prefname, listener) registers an event listener that will be called when a preference is changed.
...And 5 more matches

PopupEvents - Archive of obsolete content
the typical usage of a listener of the popupshowing event is to adjust the content of the popup based on context.
...within the listener for the popupshowing event, you can append to or modify the menu as needed before it is displayed.
...<panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocaleformat('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener.
...And 5 more matches

Making decisions in your code — conditionals - Learn web development
elect the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.addeventlistener('change', setweather); function setweather() { const choice = select.value; if (choice === 'sunny') { para.textcontent = 'it is nice and sunny outside today.
... in the javascript, we are storing a reference to both the <select> and <p> elements, and adding an event listener to the <select> element so that when its value is changed, the setweather() function is run.
...elect the weather type today: </label> <select id="weather"> <option value="">--make a choice--</option> <option value="sunny">sunny</option> <option value="rainy">rainy</option> <option value="snowing">snowing</option> <option value="overcast">overcast</option> </select> <p></p> const select = document.queryselector('select'); const para = document.queryselector('p'); select.addeventlistener('change', setweather); function setweather() { const choice = select.value; switch (choice) { case 'sunny': para.textcontent = 'it is nice and sunny outside today.
...And 5 more matches

Client-side storage - Learn web development
eryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is pressed, as this is not the behavior we want.
... add this snippet below your previous code: // stop the form from submitting when a button is pressed form.addeventlistener('submit', function(e) { e.preventdefault(); }); now we need to add an event listener, the handler function of which will run when the "say hello" button is clicked.
...add this to the bottom of your code: // run function when the 'say hello' button is clicked submitbtn.addeventlistener('click', function() { // store the entered name in web storage localstorage.setitem('name', nameinput.value); // run namedisplaycheck() to sort out displaying the // personalized greetings and updating the form display namedisplaycheck(); }); at this point we also need an event handler to run a function when the "forget" button is clicked — this is only displayed after the "sa...
...And 5 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
.native: listens for a native event on the root (outer-most wrapping) element on your component.
... .once: listens for the event until it's been triggered once, and then no more.
... .passive: equivalent to using the { passive: true } parameter when creating an event listener in vanilla javascript using addeventlistener().
...And 5 more matches

Creating JavaScript callbacks in components
a common pattern used with interfaces to create a bi-directional communication between two groups of code is the observer (or listener) pattern.
... basically, the component defines an observer (or listener) interface which is implemented by some external code and this implementation is passed to the component.
...javascript functions as callbacks another common use of the pattern is found in addeventlistener / removeeventlistener.
...And 5 more matches

Cross Process Object Wrappers
for example, this frame script sends a dom node to chrome when the user clicks it, as the clicked property of the third argument: // frame script addeventlistener("click", function (event) { sendasyncmessage("my-e10s-extension-message", {}, { clicked : event.target }); }, false); in the chrome script, the dom node is now accessible through a cross process object wrapper, as a property of the objects property of the message.
... the chrome script can get and set the wrapped object's properties and call its functions: // chrome script windowmm.addmessagelistener("my-e10s-extension-message", handlemessage); function handlemessage(message) { let wrapper = message.objects.clicked; console.log(wrapper.innerhtml); wrapper.innerhtml = "<h2>modified by chrome!</h2>" wrapper.setattribute("align", "center"); } auto-generated cpows add-ons that have not declared themselves multiprocess compatible are set up with a number of compatibility shims.
... bidirectional cpows a common pattern is for chrome code to access content objects and add event listeners to them.
...And 5 more matches

Limitations of chrome scripts
nsiwebprogresslistener this api will work in the chrome process.
... alternatively, you can use nsiwebprogresslistener in the content process.
... however, you must listen to content-document-global-created and document-element-inserted in a frame script.
...And 5 more matches

Performance
do some work on the window } function dosomething(message) { result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {something: result}) } addmessagelistener("my-addon:request-from-parent", dosomething) why is this bad?
...do some work on the window } function dosomething(message) { frameglobal = message.target result = helper(frameglobal.content, message.data) frameglobal.sendasyncmessage("my-addon:response-from-child", {something: result}) } function addframe(frameglobal) { frameglobal.addmessagelistener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable for stateless callbacks.
... store heavyweight state once per process bad: // addon.js var main = new myaddonservice(); main.onchange(statechange); function statechange() { services.mm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // framescript.js var maincopy; function onupdate(message) { maincopy = myaddonservice.deserialize(message.data.newconfig); } addmessagelistener("my-addon:update-configuration", onupdate) // maincopy used by other functions the main issue here is that a separate object is kept for each tab.
...And 5 more matches

source-editor.jsm
method overview initialization and destruction void destroy(); void init(element aelement, object aconfig, function acallback); search operations number find(string astring, [optional] object options); number findnext(boolean awrap); number findprevious(boolean awrap); event management void addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations ...
...otationruler 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.
... addeventlistener() adds a new event listener to the editor.
...And 5 more matches

nsIAlertsService
@mozilla.org/alerts-service;1 as a service: var alertsservice = components.classes["@mozilla.org/alerts-service;1"] .getservice(components.interfaces.nsialertsservice); method overview void showalertnotification(in astring imageurl, in astring title, in astring text, [optional] in boolean textclickable, [optional] in astring cookie, [optional] in nsiobserver alertlistener, [optional] in astring name, [optional] in astring dir, [optional] in astring lang, [optional] in astring data, [optional] in nsiprincipal principal,[optional] in boolean inprivatebrowsing); void closealert([optional] in astring name, [optional] in nsiprincipal principal); methods showalertnotification() displays a notification window.
... void showalertnotification( in astring imageurl, in astring title, in astring text, in boolean textclickable, optional in astring cookie, optional in nsiobserver alertlistener, optional in astring name, optional in astring dir, optional in astring lang, optional in astring data, optional in nsiprincipal principal, optional in boolean inprivatebrowsing, optional ); parameters imageurl a url identifying the image to display in the notification alert.
... textclickable optional if true, if the user clicks on it, the listener is notified; when hovered the notification background becomes lighter and the cursor turns to a pointer.
...And 5 more matches

nsIStreamConverter
inherits from: nsistreamlistener last changed in gecko 1.7 suppose you had code that converted plain text into html.
... asynchronous: nsistreamlistener to nsistreamlistener.
... you can supply data directly to the converter by calling it's nsistreamlistener.ondataavailable() method.
...And 5 more matches

Using files from web applications - Web APIs
you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, eac...
..."]; for (nmultiple = 0, napprox = nbytes / 1024; napprox > 1; napprox /= 1024, nmultiple++) { soutput = napprox.tofixed(3) + " " + amultiples[nmultiple] + " (" + nbytes + " bytes)"; } // end of optional code document.getelementbyid("filenum").innerhtml = nfiles; document.getelementbyid("filesize").innerhtml = soutput; } document.getelementbyid("uploadinput").addeventlistener("change", updatesize, false); </script> </body> </html> using hidden file input elements using the click() method you can hide the admittedly ugly file <input> element and present your own interface for opening the file picker and displaying which file or files the user has selected.
... consider this html: <input type="file" id="fileelem" multiple accept="image/*" style="display:none"> <button id="fileselect">select some files</button> the code that handles the click event can look like this: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"); fileselect.addeventlistener("click", function (e) { if (fileelem) { fileelem.click(); } }, false); you can style the new button for opening the file picker as you wish.
...And 5 more matches

PannerNode.panningModel - Web APIs
example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation.
... generally you will define the position in 3d space that your audio listener and panner (source) occupy initially, and then update the position of one or both of these as the application is used.
... note how we have used some feature detection to either give the browser the newer property values (like audiolistener.forwardx) for setting position, etc.
...And 5 more matches

Pointer Lock API - Web APIs
if ("onpointerlockchange" in document) { document.addeventlistener('pointerlockchange', lockchangealert, false); } else if ("onmozpointerlockchange" in document) { document.addeventlistener('mozpointerlockchange', lockchangealert, false); } function lockchangealert() { if(document.pointerlockelement === canvas || document.mozpointerlockelement === canvas) { console.log('the pointer lock status is now locked'); // do something useful in response ...
... document.addeventlistener('pointerlockerror', lockerror, false); document.addeventlistener('mozpointerlockerror', lockerror, false); function lockerror(e) { alert("pointer lock failed"); } note: until firefox 50 the above events were prefixed with moz in firefox.
... canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; document.exitpointerlock = document.exitpointerlock || document.mozexitpointerlock; now we set up an event listener to run the requestpointerlock() method on the canvas when it is clicked, which initiates pointer lock.
...And 5 more matches

SubtleCrypto.exportKey() - Web APIs
*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
... */ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
... "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyoutput = document.queryselector(".exported-key"); exportkeyoutput.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 5 more matches

Using XMLHttpRequest - Web APIs
function reqlistener () { console.log(this.responsetext); } var oreq = new xmlhttprequest(); oreq.addeventlistener("load", reqlistener); oreq.open("get", "http://www.example.org/example.txt"); oreq.send(); types of requests a request made via xmlhttprequest can fetch the data in one of two ways, asynchronously or synchronously.
...*/ } oreq.open("get", url); oreq.responsetype = "arraybuffer"; oreq.send(); for more examples check out the sending and receiving binary data page monitoring progress xmlhttprequest provides the ability to listen to various events that can occur while the request is being processed.
... load the transfer is complete; all data is now in the response var oreq = new xmlhttprequest(); oreq.addeventlistener("progress", updateprogress); oreq.addeventlistener("load", transfercomplete); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ...
...And 5 more matches

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.
... for example, this content script will fail with the error "themessage is not defined": var themessage = "hello from content script!"; anelement.setattribute("onclick", "alert(themessage);"); second, if you define an event listener by direct assignment to a global event handler like onclick, then the assignment might be overridden by the page.
...("sdk/page-mod").pagemod({ include: "*", contentscript: myscript, contentscriptwhen: "start" }); this will work fine on most pages, but will fail on pages which also assign to onclick: <html> <head> </head> <body> <script> window.onclick = function() { window.alert("it's my click now!"); } </script> </body> </html> for these reasons, it's better to add event listeners using addeventlistener(), defining the listener as a function: var themessage = "hello from content script!"; anelement.onclick = function() { alert(themessage); }; anotherelement.addeventlistener("click", function() { alert(themessage); }); communicating with the add-on to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has acces...
...And 4 more matches

Content Processes - Archive of obsolete content
an event emitter maintains a list of callbacks (or listeners) for one or more named events.
... each event emitter has several methods: the method on is used to add a listener for an event.
... conversely, the method removelistener is used to remove a listener for an event.
...And 4 more matches

Downloading Files - Archive of obsolete content
downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/nswebbrowserpersist;1", "nsiwebbrowserpersist"); var persist = webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ...
...var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewindow); var progresselement = document.getelementbyid("progress_element"); persist.progresslistener = { onprogresschange: function(awebprogress, arequest, acurselfprogress, amaxselfprogress, acurtotalprogress, amaxtotalprogress) { var percentcomplete = math.round((acurtotalprogress / amaxtotalprogress) * 100); progresselement.textcontent = percentcomplete +"%"; }, onstatechange: function(awebprogress, arequest, astateflags, astatus) { // do something } } persist.saveuri(ob...
...j_uri, null, null, null, "", targetfile, privacy); downloading files that require credentials before calling nsiwebbrowserpersist.saveuri(), you need to set the progresslistener property of the nsiwebbrowserpersist instance to an object that implements nsiauthprompt.
...And 4 more matches

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
passing around functions/code as strings often you'll want to pass functions or code to other functions, most notoriously settimeout and addeventlistener.
...settimeout("dosomething();", 100); addeventlistener("load", "myaddon.init(); myaddon.onload();", true); setinterval(am_i_a_string_or_function_reference_qmark, 100); that in itself is certainly not elegant, but it may also become a security issue if you pass code that was externally retrieved (or at least contains bits of externally retrieved data): // do not use!
... addeventlistener("load", function() { myaddon.init(); myaddon.onload(); }, true); function doxhr() { //...
...And 4 more matches

A XUL Bestiary - Archive of obsolete content
if, however, you write event handlers inside event listeners, as we will describe shortly, you can use these events to set off other actions.
... the term isn't used very often, but an "event listener" is a special attribute of an object that listens to its own events.
... the document, for example, has an "onload" event listener to listen for its "load" event.
...And 4 more matches

A first splash into JavaScript - Learn web development
{ lastresult.textcontent = 'wrong!'; lastresult.style.backgroundcolor = 'red'; if(userguess < randomnumber) { loworhi.textcontent = 'last guess was too low!' ; } else if(userguess > randomnumber) { loworhi.textcontent = 'last guess was too high!'; } } guesscount++; guessfield.value = ''; } guesssubmit.addeventlistener('click', checkguess); function setgameover() { guessfield.disabled = true; guesssubmit.disabled = true; resetbutton = document.createelement('button'); resetbutton.textcontent = 'start new game'; document.body.append(resetbutton); resetbutton.addeventlistener('click', resetgame); } function resetgame() { guesscount = 1; const resetpa...
...the constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.
... add the following line below your checkguess() function: guesssubmit.addeventlistener('click', checkguess); here we are adding an event listener to the guesssubmit button.
...And 4 more matches

Mozilla accessibility architecture
table of gecko event to accessible event translation accessible documents listen for dom events on nodes within them, and consequently fire the appropriate accessible event.
... event_destroy (atk) event_reorder (msaa) checkboxstatechange, radiostatechange mozilla dom event_state_change popupshowing mozilla dom event_menustart popuphiding mozilla dom event_menuend nsdocaccessible::scrollpositiondidchange(), then nsdocaccessible::scrolltimercallback() nsiscrollpositonlistener and nsitimer callbacks event_scrollingend (quick timer is used to determine when scrolling pauses or stops, to avoid extra events being fired) nsdocaccessible::onstatechange(), :nsdocaccessible:onlocationchange() nsiwebprogresslistener callback event_state_change (msaa) event_reorder (atk) dom mutation events - multiple uses dom mutation events are a g...
...we listen to dom mutation events for several resons: to broadcast document changes to the assistive technology client.
...And 4 more matches

nsICacheSession
inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void asyncopencacheentry(in acstring key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait); void evictentries(); prbool isstorageenabled(); nsicacheentrydescriptor opencacheentry(in acstring key, in nscacheaccessmode accessrequested, in boolean blockingmode); void doomentry(in acstring key, in nsicachelistener listener); attributes attribute type description doomentriesifexpired prbool expired entries will be doomed or evicted ...
...instead, the listener will be notified when the descriptor is available.
... void asyncopencacheentry( in acstring key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait ); parameters key the key for cache entry.
...And 4 more matches

nsIConsoleService
method overview void getmessagearray([array, size_is(count)] out nsiconsolemessage messages, out uint32_t count);obsolete since gecko 19 void getmessagearray([optional] out uint32_t count, [retval, array, size_is(count)] out nsiconsolemessage messages); void logmessage(in nsiconsolemessage message); void logstringmessage(in wstring message); void registerlistener(in nsiconsolelistener listener); void reset(); void unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an array of all logged messages.
... registerlistener() registers a listener, to notify when an error is logged.
... note: to guard against stack overflows from listeners which could log messages (this could be done inadvertently through listeners implemented in javascript), we do not call any listeners when another error is already being logged.
...And 4 more matches

nsIDNSService
method overview nsicancelable asyncresolve(in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget); void init(); obsolete since gecko 1.8 nsidnsrecord resolve(in autf8string ahostname, in unsigned long aflags); void shutdown(); obsolete since gecko 1.8 attributes attribute type description myhostname autf8string read only.
...a specified nsidnslistener is invoked when the resolution process is completed.
... nsicancelable asyncresolve( in autf8string ahostname, in unsigned long aflags, in nsidnslistener alistener, in nsieventtarget alistenertarget ); parameters ahostname the host name or ip-address-literal to resolve.
...And 4 more matches

nsIDOMOfflineResourceList
onchecking nsidomeventlistener an event listener to be called when fetching the application cache manifest and checking for updates.
... onerror nsidomeventlistener an event listener to be called when an error occurs during the caching process.
... onnoupdate nsidomeventlistener an event listener to be called when there is no update to download.
...And 4 more matches

nsIHttpChannelInternal
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled.
...the nsihttpupgradelistener will have its nsihttpupgradelistener.ontransportavailable() method invoked if a matching 101 is processed.
... the arguments to nsihttpupgradelistener.ontransportavailable() provide to the new protocol the low level transport streams that are no longer used by http.
...And 4 more matches

nsIWebSocketChannel
to create an instance, use: var websocketchannel = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsiwebsocketchannel); method overview void asyncopen(in nsiuri auri, in acstring aorigin, in nsiwebsocketlistener alistener, in nsisupports acontext); void close(in unsigned short acode, in autf8string areason); void sendbinarymsg(in acstring amsg); void sendmsg(in autf8string amsg); attributes attribute type description extensions acstring sec-websocket-extensions response header value.
...received messages are fed to the socket listener as they arrive.
... the socket listener's methods are called on the thread that calls asyncopen() and are not called until after asyncopen() returns.
...And 4 more matches

nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 inherits from: nsidomeventtarget last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) attributes attribute type description onabort nsidomeventlistener a javascript function object that gets invoked if the operation is canceled by the user.
... onerror nsidomeventlistener a javascript function object that gets invoked if the operation fails to complete due to an error.
...And 4 more matches

Element - Web APIs
eventtarget.addeventlistener() registers an event handler to a specific event type on the element.
... eventtarget.removeeventlistener() removes an event listener from the element.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 4 more matches

Using the Gamepad API - Web APIs
you can use gamepadconnected like this: window.addeventlistener("gamepadconnected", function(e) { console.log("gamepad connected at index %d: %s.
...gamepadconnected), a second event is dispatched to the focused window, gamepaddisconnected: window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); the gamepad's index property will be unique per-device connected to the system, even if multiple controllers of the same type are used.
... var gamepads = {}; function gamepadhandler(event, connecting) { var gamepad = event.gamepad; // note: // gamepad === navigator.getgamepads()[gamepad.index] if (connecting) { gamepads[gamepad.index] = gamepad; } else { delete gamepads[gamepad.index]; } } window.addeventlistener("gamepadconnected", function(e) { gamepadhandler(e, true); }, false); window.addeventlistener("gamepaddisconnected", function(e) { gamepadhandler(e, false); }, false); this previous example also demonstrates how the gamepad property can be held after the event has completed — a technique we will use for device state querying later.
...And 4 more matches

MediaQueryList - Web APIs
the resulting object handles sending notifications to listeners when the media query state changes (i.e.
... addlistener() adds to the mediaquerylist a callback which is invoked whenever the media query status—whether or not the document matches the media queries in the list—changes.
... this method exists primarily for backward compatibility; if possible, you should instead use addeventlistener() to watch for the change event.
...And 4 more matches

Inputs and input sources - Web APIs
for example, if you need to keep up with which controller is held in each of the player's hands, you might do something like this: let inputsourcelist = null; let lefthandsource = null; let righthandsource = null; xrsession.addeventlistener("inputsourceschange", event => { inputsourcelist = event.session.inputsources; inputsourcelist.foreach(source => { switch(source) { case "left": lefthandsource = source; break; case "right": righthandsource = source; break; } }); }); the inputsourceschange event is also fired once when the session's creation callback first completes exe...
... xrsession.addeventlistener("select", event => { let inputsource = event.inputsource; let frame = event.frame; /* handle the event */ }); some actions may send these events very quickly, one after the other.
... picking up an object: handling squeezestart events xrsession.addeventlistener("squeezestart", event => { const targetrayspace = event.inputsource.targetrayspace; const hand = event.inputsource.handedness; let targetraypose = event.frame.getpose(targetrayspace, viewerrefspace); if (!targetraypose) { return; } let targetraytransform = targetraypose.transform; let targetobject = findtargetobject(targetraytransform); if (targetobject) { if (avatar.
...And 4 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
if you are unaware of how one sounds you can listen to one here.
...tack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.addeventlistener('input', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
... let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator(); osc.ty...
...And 4 more matches

window.postMessage() - Web APIs
the dispatched event otherwindow can listen for dispatched messages by executing the following javascript: window.addeventlistener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:8080") return; // ...
... security concerns if you do not expect to receive messages from other sites, do not add any event listeners for message events.
... the secret response is: rheeeeet!" } window.addeventlistener("message", receivemessage, false); /* * in the popup's scripts, running on <http://example.com>: */ // called sometime after postmessage is called function receivemessage(event) { // do we trust the sender of this message?
...And 4 more matches

Border-radius generator - CSS: Cascading Style Sheets
text; -ms-user-select: text; user-select: text; float: right; } javascript content 'use strict'; /** * ui-inputslidermanager */ var inputslidermanager = (function inputslidermanager() { var subscribers = {}; var sliders = []; var inputcomponent = function inputcomponent(obj) { var input = document.createelement('input'); input.setattribute('type', 'text'); input.addeventlistener('click', function(e) { this.select(); }); input.addeventlistener('change', function(e) { var value = parseint(e.target.value); if (isnan(value) === true) setvalue(obj.topic, obj.value); else setvalue(obj.topic, value); }); subscribe(obj.topic, function(value) { input.value = value + obj.unit; }); return input; } var slidercomponent = function slidercomp...
...onent(obj, sign) { var slider = document.createelement('div'); var startx = null; var start_value = 0; slider.addeventlistener("click", function(e) { setvalue(obj.topic, obj.value + obj.step * sign); }); slider.addeventlistener("mousedown", function(e) { startx = e.clientx; start_value = obj.value; document.body.style.cursor = "e-resize"; document.addeventlistener("mousemove", slidermotion); }); document.addeventlistener("mouseup", function(e) { document.removeeventlistener("mousemove", slidermotion); document.body.style.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + sta...
...checkbox.id = id; checkbox.setattribute('type', 'checkbox'); checkbox.checked = state; label.setattribute('for', id); if (name) { label.classname = 'text'; if (align) label.classname += ' ' + align; label.textcontent = name; } node.appendchild(checkbox); node.appendchild(label); this.node = node; this.topic = topic; this.checkbox = checkbox; checkbox.addeventlistener('change', function(e) { notify.call(this); }.bind(this)); buttons[topic] = this; } var getnode = function getnode(topic) { return buttons[topic].node; } var setvalue = function setvalue(topic, value) { try { buttons[topic].checkbox.checked = value; } catch(error) { console.log(error); } } var subscribe = function subscribe(topic, callback) { if (subscribers[t...
...And 4 more matches

Creating and triggering events - Developer guides
creating custom events events can be created with the event constructor as follows: const event = new event('build'); // listen for the event.
... elem.addeventlistener('build', function (e) { /* ...
... for example, the event could be created as follows: const event = new customevent('build', { detail: elem.dataset.time }); this will then allow you to access the additional data in the event listener: function eventhandler(e) { console.log('the time is: ' + e.detail); } the old-fashioned way the older approach to creating events uses apis inspired by java.
...And 4 more matches

dev/panel - Archive of obsolete content
"my new devtool's panel", icon: "./my-icon.png", url: "./my-panel.html", onready: function() { this.postmessage("message from the add-on"); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document script: // my-panel.js window.addeventlistener("message", function(event) { var content = document.getelementbyid("content"); content.textcontent = event.data; }); note that at the moment you have to pass an array of ports into postmessage, even if you don't need to use them: // main.js // require the sdk modules const { panel } = require("dev/panel"); const { tool } = require("dev/toolbox"); const { class } = require("sdk/core/heri...
...document this.postmessage("message from the add-on", [panelside]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in the panel document: retrieve the messageport from the event, and use it to send messages to the add-on // my-panel.js window.addeventlistener("message", function(event) { // retrieve the port var toaddon = event.ports[0]; toaddon.start(); toaddon.postmessage("message from the panel document"); console.log(toaddon); }); communicating with the debugger server the firefox developer tools use a client/server protocol: a tool, such as a javascript debugger or style editor, is the client, and the program being debugged, such a...
...ee = null; }, onready: function() { this.debuggee.start(); this.postmessage("port", [this.debuggee]); } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); in my-panel.js: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; console.log(debuggee); debuggee.onmessage = function(event) { content.textcontent = json.stringify(event.data); } debuggee.postmessage({ "to":"root", "type":"listtabs" }); }); if you do this, don't forget to call start() on the port before passing it over to the panel document.
...And 3 more matches

remote/parent - Archive of obsolete content
t argument is always the process, then the message payload process.port.once("id", (process, id) => { console.log("child process is remote:" + process.isremote); console.log("child process id:" + id); }); }); content frame manipulation this demonstrates telling every current frame to link to a specific anchor element: // remote.js const { frames } = require("sdk/remote/child"); // listeners receive the frame the event was for as the first argument frames.port.on("changelocation", (frame, ref) => { frame.content.location += "#" + ref; }); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); frames.port.emit("changelocation", "foo"); tab information this shows sending a message when a tab loads; this is similar to ...
... // remote.js const { frames } = require("sdk/remote/child"); frames.addeventlistener("pageshow", function() { // `this` is bound to the frame the event came from let frame = this; frame.port.emit("pageshow"); }, true); // main.js const { frames, remoterequire } = require("sdk/remote/parent"); remoterequire("./remote.js", module); // the first argument is the frame the message came from frames.port.on("pageshow", (frame) => { console.log(frame.frameelement.currenturi.host + ": pageshow"); }); globals functions remoterequire(id, module = null) loads a module in any existing and future child processes.
...listen to attach and detach events to hear as processes are started and stopped: const { processes } = require("sdk/remote/parent"); processes.on("attach", function(process) { console.log("new process is remote: " + process.isremote); }); methods forevery(callback) calls the callback for every existing process and any new processes created in the future.
...And 3 more matches

Miscellaneous - Archive of obsolete content
</div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences.
... you can listen to mouse wheel click events just like normal click events (via mousedown and mouseup events).
... var focusedcontrol; window.addeventlistener("load", function(e) { onwindowload(e); }, false); function onwindowload() { gbrowser.addeventlistener("load", onpageload, true); } function onpageload() { pagedoc = document.commanddispatcher.focusedwindow.document; var inputlist = pagedoc.getelementsbytagname('input'); for (var i=1; i<inputlist.length; i++) { inputlist.item(i).
...And 3 more matches

Performance best practices in extensions - Archive of obsolete content
defer everything that you can most extensions have a load event listener in the main overlay that runs their startup functions.
... avoid dom mutation event listeners dom mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance.
... avoid mouse movement events avoid using mouse event listeners, including mouseover, mouseout, mouseenter, mouseexit, and especially mousemove.
...And 3 more matches

Paddle and keyboard controls - Game development
two event listeners for keydown and keyup events.
...to listen for key presses, we will set up two event listeners.
... add the following lines just above the setinterval() line at the bottom of your javascript: document.addeventlistener("keydown", keydownhandler, false); document.addeventlistener("keyup", keyuphandler, false); when the keydown event is fired on any of the keys on your keyboard (when they are pressed), the keydownhandler() function will be executed.
...And 3 more matches

Advanced text formatting - Learn web development
8%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...how solution'; } updatecode(); }); const htmlsolution = '<dl>\n <dt>bacon</dt>\n <dd>the glue that binds the world together.</dd>\n <dt>eggs</dt>\n <dd>the glue that binds the cake together.</dd>\n <dt>coffee</dt>\n <dd>the drink that gets the world running in the morning.</dd>\n <dd>a light brown color.</dd>\n</dl>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caret...
...8%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...And 3 more matches

Getting started with HTML - Learn web development
width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...how solution'; } updatecode(); }); var htmlsolution = '<em>this is my text.</em>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea.selectionstart; var front = (textarea.value).substring(0, caretpos); var back = (textarea.value).substring(textarea.selectionend, textarea.value.length); textarea.value = front + text + back; caretpos = caretpos + text.
...; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...And 3 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
with "cancel", not "clear" as with the "set..." methods.) just pass it the value returned by the requestanimationframe() call to cancel, which you stored in the variable raf: cancelanimationframe(raf); active learning: starting and stopping our spinner in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.
...the following block also adds an event listener to your button to run the start() function when it is clicked.
... btn.addeventlistener('click', start); function start() { draw(); spinnercontainer.style.display = 'block'; btn.style.display = 'none'; settimeout(setendgame, random(5000,10000)); } note: you'll see this example is calling settimeout() without storing the return value.
...And 3 more matches

Useful string methods - Learn web development
{ margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'sho...
...ell soon\'];' + '\n' + '\nfor (let i = 0; i < greetings.length; i++) {' + '\n let input = greetings[i];' + '\n if (greetings[i].indexof(\'christmas\') !== -1) {' + '\n let result = input;' + '\n let listitem = document.createelement(\'li\');' + '\n listitem.textcontent = result;' + '\n list.appendchild(listitem);' + '\n }' + '\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scr...
...{ margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'sho...
...And 3 more matches

What went wrong? Troubleshooting JavaScript - Learn web development
an error message to indicate what's gone wrong: "typeerror: guesssubmit.addeventlistener is not a function" a "learn more" link that links through to an mdn page that explains what this error means in greater detail.
... if we look at line 86 in our code editor, we'll find this line: guesssubmit.addeventlistener('click', checkguess); the error message says "guesssubmit.addeventlistener is not a function", which means that the function we're calling is not recognized by the javascript interpreter.
...here's a shortcut to save you some time in this instance: addeventlistener().
...And 3 more matches

Frame script environment
addeventlistener() listen to events from content.
... removeeventlistener() stop listening to events from content.
... addmessagelistener() listen to messages from chrome.
...And 3 more matches

Frame script environment
addeventlistener() listen to events from content.
... removeeventlistener() stop listening to events from content.
... addmessagelistener() listen to messages from chrome.
...And 3 more matches

Frame script loading and lifetime
if you want a frame script to do something when a new document is loaded, you need to listen for an appropriate dom event, generally domwindowcreated, domcontentloaded, or load.
... to listen for an event, when your frame script is unloaded (due to tab close for instance), you must set the third argument of addmessagelistener to true.
... for example, from bootstrap.js: services.mm.addmessagelistener( 'my-addon-id', { receivemessage: function() { console.log('incoming message from frame script:', amsg.data); } }, true // must set this argument to true, otherwise sending message from framescript will not work during and after the unload event on the contentmessagemanager triggers ); then in your frame script, listen for the unload event of the message manager (which is the global this), and sending a message.
...And 3 more matches

Message manager overview
communicate with frame scripts using addmessagelistener() and broadcastasyncmessage() or sendasyncmessage() functions.
... it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster you can access the global message manager like this: // chrome script let globalmm = cc["@mozilla.org/globalmessagemanager;1"] .getservice(ci.nsimessagelistenermanager); window message manager the window message manager is associated with a specific browser window, and operates on every <browser> (that is, every content tab) loaded into that window: loadf...
... it's a chromemessagebroadcaster object, which implements the following interfaces: nsiframescriptloader nsimessagelistenermanager nsimessagebroadcaster the window message manager can be accessed as a property of the browser window: // chrome script let windowmm = window.messagemanager; browser message manager the browser message manager is specific to a single xul <browser> element (which essentially corresponds to a single tab): loadframescript() loads the given script only into its <browser> sendasyncmessage() sends the message only to that <browser>.
...And 3 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.
...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().
... the methods removed in firefox 65 are: htmliframeelement.addnextpaintlistener() defines a handler to listen for the next mozafterpaint event in the browser <iframe>.
...And 3 more matches

AddonInstall
method overview void install() void cancel() void addlistener(in installlistener listener) void removelistener(in installlistener listener) properties attribute type description name string the name of the add-on being installed.
...the process will continue in the background until it fails, completes, one of the registered installlisteners pauses it, or the process is canceled by a call to the cancel() method.
... void cancel( ) addlistener() adds a new installlistener if the listener is not already registered to monitor this specific addoninstall.
...And 3 more matches

Scroll-linked effects
scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases.
... <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
... as the scroll event listener runs in the javascript on the browser's main thread, it will be asynchronous relative to the user-visible scrolling.
...And 3 more matches

Fun With XBL and XPConnect
<method name="autocomplete"> <argument name="asearchstring"/> <argument name="resultlistener"/> <body> <![cdata[ return this.autocompletesession.autocomplete(null, anonymouscontent[0], asearchstring, this.autocompletelistener); ]]> </body> </method> you can see that the body of the method is just getting the auto complete session object and calling the auto complete method on it.
...i could apply a trick similar to what i did for the xpcom object: <property name="autocompletelistener"> <![cdata[ ({ onautocompleteresult: function(aitem, aoriginalstring, amatch) { if ( aitem ) { anonymouscontent[0].value = amatch; } } }) ]]> </property> as long as the js for the value of autocompletelistener evaluates to an object (and wrapping the expression with a set of parens like i did, does this), then the value of autocompl...
...etelistener is an object that implements my interface.
...And 3 more matches

nsIApplicationUpdateService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void adddownloadlistener(in nsirequestobserver listener); astring downloadupdate(in nsiupdate update, in boolean background); void pausedownload(); void removedownloadlistener(in nsirequestobserver listener); nsiupdate selectupdate([array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); attributes attribute type description backgroundchecker nsiupdatechecker the update checker...
... methods adddownloadlistener() adds a listener that receives progress and state information about the update that is currently being downloaded.
...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.
...And 3 more matches

nsIExternalHelperAppService
to access this service, use: var externalhelperappservice = components.classes["@mozilla.org/uriloader/external-helper-app-service;1"] .getservice(components.interfaces.nsiexternalhelperappservice); method overview boolean applydecodingforextension(in autf8string aextension, in acstring aencodingtype); nsistreamlistener docontent(in acstring amimecontenttype, in nsirequest arequest, in nsiinterfacerequestor awindowcontext, in boolean aforcesave); methods applydecodingforextension() determines whether or not data whose filename has the specified extension should be decoded from the specified encoding type before being saved or delivered to helper applications.
...docontent() binds an external helper application to a stream listener.
... the caller should pump data into the returned stream listener.
...And 3 more matches

nsIHTMLEditor
inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring at...
...ormatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlistener(in nsicontentfilter infilter); void removelist(in astring alisttype); void replaceheadcontentswithhtml(in astring asourcetoinsert); void selectelement(in nsidomelement aelement); void setbackgroundcolor(in astring acolor); void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); ...
...example: aproperty="font", aattribute="color", avalue="0x00ffff" addinsertionlistener() add listener for insertion override.
...And 3 more matches

nsIThreadPool
listener nsithreadpoollistener an optional listener that will be notified when a thread is created or destroyed in the course of the thread pool's operation.
... a listener will only receive notifications about threads created after the listener is set so it is recommended that the consumer set the listener before dispatching the first event.
... a listener that receives an nsithreadpoollistener.onthreadcreated() notification is guaranteed to always receive the corresponding nsithreadpoollistener.onthreadshuttingdown() notification.
...And 3 more matches

nsIXMLHttpRequest
here is a comment from johnny stenback <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomeventtarget and that's how you're supported to add event listeners.
... try something like this: nscomptr<nsidomeventtarget> target(do_queryinterface(myxmlhttpreq)); target->addeventlistener(ns_literal_string("load"), mylistener, pr_false) where mylistener is your event listener object that implements the interface nsidomeventlistener.
... though actually, if you use addeventlistener from c++ weird things will happen too, since the result will depend on what js happens to be on the stack when you do it....
...And 3 more matches

nsIXULTemplateBuilder
getresultforid(in astring aid); nsixultemplateresult getresultforcontent(in nsidomelement aelement); boolean hasgeneratedcontent(in nsirdfresource anode, in nsiatom atag); void addrulefilter(in nsidomnode arule, in nsixultemplaterulefilter afilter); [noscript] void init(in nsicontent aelement); [noscript] void createcontents(in nsicontent aelement, in boolean aforcecreation); void addlistener(in nsixulbuilderlistener alistener); void removelistener(in nsixulbuilderlistener alistener); attributes attribute type description root nsidomelement readonly: the root node in the dom to which this builder is attached.
... addlistener() adds a listener to this template builder.
... the template builder holds a strong reference to the listener.
...And 3 more matches

Mail and RDF
in the example of mail folders, each folder datasource first registers itself with the mail session as a nsifolderlistener because it wants information about when a folder changes.
...when a folder's contents or properties change, it tells the mail session to notify the folder listeners that the data has changed.
... the calling chain essentially looks like this: registration: folder datasource registers itself with the mail session as a folder listener rdf template registers itself with the datasource as a content observer.
...And 3 more matches

Event - Web APIs
many dom elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them.
... event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes.
... further, when properly added, such handlers can also be disconnected if needed using removeeventlistener().
...And 3 more matches

EventTarget - Web APIs
eventtarget is a dom interface implemented by objects that can receive events and may have listeners for them.
... methods eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget.
... eventtarget.removeeventlistener() removes an event listener from the eventtarget.
...And 3 more matches

Page Visibility API - Web APIs
when the user minimizes the window or switches to another tab, the api sends a visibilitychange event to let listeners know the state of the page has changed.
... hidden = "webkithidden"; visibilitychange = "webkitvisibilitychange"; } var videoelement = document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { videoelement.pause(); } else { videoelement.play(); } } // warn if the browser doesn't support addeventlistener or the page visibility api if (typeof document.addeventlistener === "undefined" || hidden === undefined) { console.log("this demo requires a browser, such as google chrome or firefox, that supports the page visibility api."); } else { // handle page visibility change document.addeventlistener(visibilitychange, handlevisibilitychange, false); // when the video pauses, set the title.
... // this shows the paused videoelement.addeventlistener("pause", function(){ document.title = 'paused'; }, false); // when the video plays, set the title.
...And 3 more matches

A simple RTCDataChannel sample - Web APIs
starting up when the script is run, we set up an load event listener, so that once the page is fully loaded, our startup() function is called.
... function startup() { connectbutton = document.getelementbyid('connectbutton'); disconnectbutton = document.getelementbyid('disconnectbutton'); sendbutton = document.getelementbyid('sendbutton'); messageinputbox = document.getelementbyid('message'); receivebox = document.getelementbyid('receivebox'); // set event listeners for user interface widgets connectbutton.addeventlistener('click', connectpeers, false); disconnectbutton.addeventlistener('click', disconnectpeers, false); sendbutton.addeventlistener('click', sendmessage, false); } this is quite straightforward.
... we grab references to all the page elements we'll need to access, then set event listeners on the three buttons.
...And 3 more matches

Taking still photos with WebRTC - Web APIs
the startup() function the startup() function is run when the page has finished loading, courtesy of window.addeventlistener().
... this function's job is to request access to the user's webcam, initialize the output <img> to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image.
... listen for the video to start playing after calling htmlmediaelement.play() on the <video>, there's a (hopefully brief) period of time that elapses before the stream of video begins to flow.
...And 3 more matches

WebSocket - Web APIs
websocket.onclose an event listener to be called when the connection is closed.
... websocket.onerror an event listener to be called when an error occurs.
... websocket.onmessage an event listener to be called when a message is received from the server.
...And 3 more matches

Writing WebSocket servers - Web APIs
a websocket server is nothing more than an application listening on any port of a tcp server that follows a specific protocol.
... the websocket handshake first, the server must listen for incoming socket connections using a standard tcp socket.
...for example, let's assume that your server is listening on example.com, port 8000, and your socket server responds to get requests at example.com/chat.
...And 3 more matches

Overview of events and handlers - Developer guides
the function is said to be a 'listener' or a 'handler' with both names used interchangeably.
...browsers use as the registration method for the function which will handle those data structures a method called addeventlistener which expects as arguments a string event type name and the handler function.
...we could define in the html page a button as: <button id="buttonone">click here to emit a 'click' event</button> and, in our javascript code, we could first define a function to listen to that 'click' event: var example_click_handler = function (ev){ var objkind = (ev instanceof event) ?
...And 3 more matches

Browser detection using the user agent - HTTP
ack to user agent sniffing var ua = navigator.useragent; hastouchscreen = ( /\b(blackberry|webos|iphone|iemobile)\b/i.test(ua) || /\b(android|windows phone|ipad|ipod)\b/i.test(ua) ); } } if (hastouchscreen) document.getelementbyid("examplebutton").style.padding="1em"; as for the screen size, simply use window.innerwidth and window.addeventlistener("resize", function(){ /*refresh screen size dependent things*/ }).
...if there is a lot calculated by this layout function before it determines the new layout of the page, then consider debouncing the event listener such that it is not called as often.
...for example, webkit 6 has a bug whereby when the device orientation changes, the browser might not fire mediaquerylist listeners when it should.
...And 3 more matches

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
installation the api allows us to add event listeners for key events we are interested in — the first one is the install event: self.addeventlistener('install', (e) => { console.log('[service worker] install'); }); in the install listener, we can initialize the cache and add files to it for offline use.
... var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); then we can manage the install event itself: self.addeventlistener('install', (e) => { console.log('[service worker] install'); e.waituntil( caches.open(cachename).then((cache) => { console.log('[service worker] caching all: app shell and content'); return cache.addall(contenttocache); }) ); }); there are two things that need an explanation here: what extendableevent.waituntil does, and what the caches object is.
...here is a simple usage example: self.addeventlistener('fetch', (e) => { console.log('[service worker] fetched resource '+e.request.url); }); the response can be anything we want: the requested file, its cached copy, or a piece of javascript code that will do something specific — the possibilities are endless.
...And 3 more matches

self - Archive of obsolete content
postmessage() send a message from a content script to a listener in the main add-on code: self.postmessage(contentscriptmessage); this takes a single parameter, the message payload, which may be any json-serializable value.
... on() start listening to messages from the main add-on code: self.on("message", function(addonmessage) { // handle the message }); this takes two parameters: the name of the event, and the handler function.
... once() exactly like on(), but stop listening after the first message is received.
...And 2 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.
... destroy() destroy the worker by removing the content script from the page and removing all registered listeners.
...And 2 more matches

Preferences - Archive of obsolete content
in this case, you can use the nsiprefbranch2 interface to "listen" for changes to preferences in a certain branch.
...ed break; } } } myprefobserver.register(); and next, here is a more evolved version of the previous code better fit for code reuse both within a project and across projects (for example, using javascript code modules): /** * @constructor * * @param {string} branch_name * @param {function} callback must have the following arguments: * branch, pref_leaf_name */ function preflistener(branch_name, callback) { // keeping a reference to the observed preference branch or it will get // garbage collected.
... var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); this._branch = prefservice.getbranch(branch_name); this._branch.queryinterface(components.interfaces.nsiprefbranch2); this._callback = callback; } preflistener.prototype.observe = function(subject, topic, data) { if (topic == 'nspref:changed') this._callback(this._branch, data); }; /** * @param {boolean=} trigger if true triggers the registered function * on registration, that is, when this method is called.
...And 2 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
until you get your bootstrap.js running you should use a basic overlay onto the xul window with an event listener for "load" to catch overlay load and then run your manual ui construction function.
...a basic bootstrap.js file: components.utils.import("resource://gre/modules/services.jsm"); function startup(data,reason) { components.utils.import("chrome://myaddon/content/mymodule.jsm"); mymodule.startup(); // do whatever initial startup stuff you need to do foreachopenwindow(loadintowindow); services.wm.addlistener(windowlistener); } function shutdown(data,reason) { if (reason == app_shutdown) return; foreachopenwindow(unloadfromwindow); services.wm.removelistener(windowlistener); mymodule.shutdown(); // do whatever shutdown stuff you need to do on addon disable components.utils.unload("chrome://myaddon/content/mymodule.jsm"); // same url as above // hack warning: the...
...nstruction function here */ } function unloadfromwindow(window) { /* call/move your ui tear down function here */ } function foreachopenwindow(todo) // apply a function to all open browser windows { var windows = services.wm.getenumerator("navigator:browser"); while (windows.hasmoreelements()) todo(windows.getnext().queryinterface(components.interfaces.nsidomwindow)); } var windowlistener = { onopenwindow: function(xulwindow) { var window = xulwindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); function onwindowload() { window.removeeventlistener("load",onwindowload); if (window.document.documentelement.getattribute("windowtype")...
...And 2 more matches

Adding Events and Commands - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
...also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix.
... there's a long list of events you can listen to, and which you use depend on the situation.
...And 2 more matches

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
for (var key in elemattr) { var val = elemattr[key]; if (nodes && key == "key") { nodes[val] = elem; continue; } var attrns = namespace(key); if (typeof val == "function") { // special case for function attributes; don't just add them as 'on...' attributes, but as events, using addeventlistener elem.addeventlistener(key.replace(/^on/, ""), val, false); } else { // note that the default namespace for xml attributes is, and should be, blank (ie.
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, ...
... safely generating event listeners and scripts it is occasionally necessary to generate event listeners and script fragments from dynamic content.
...And 2 more matches

Monitoring downloads - Archive of obsolete content
firefox 3 introduces new api that allows any number of listeners to observe downloads.
... onload: function() { // initialization code this.initialized = true; this.strings = document.getelementbyid("downloadlogger-strings"); this.dlmgr = components.classes["@mozilla.org/download-manager;1"] .getservice(components.interfaces.nsidownloadmanager); this.dlmgr.addlistener(downloadlogger); // open the database, placing its file in the profile directory this.dbfile = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("profd", components.interfaces.nsifile); this.dbfile.append("downloadlogger.sqlite"); // get access to the storage service and open t...
...the download manager instance is cached into a member variable in the downloadlogger object for reuse later, and its addlistener() method is called to start listening for download status updates.
...And 2 more matches

browser - Archive of obsolete content
nkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set t...
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), h...
...asattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addprogresslistener( listener ) return type: no return value add a progress listener to the browser which will monitor loaded documents.
...And 2 more matches

tabbox - Archive of obsolete content
<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.
...And 2 more matches

Video and Audio APIs - Learn web development
first of all, add the following to the bottom of your code, so that the playpausemedia() function is invoked when the play button is clicked: play.addeventlistener('click', playpausemedia); now to define playpausemedia() — add the following, again at the bottom of your code: function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play.setattribute('data-icon','p'); media.pause(); } } here we use an if statement to check whether the video is paused.
...add the following addeventlistener() lines below the previous one you added: stop.addeventlistener('click', stopmedia); media.addeventlistener('ended', stopmedia); the click event is obvious — we want to stop the video by running our stopmedia() function when the stop button is clicked.
... we do however also want to stop the video when it finishes playing — this is marked by the ended event firing, so we also set up a listener to run the function on that event firing too.
...And 2 more matches

React interactivity: Events and state - Learn web development
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.
... for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
...for this, we can listen to the onchange event.
...And 2 more matches

Componentizing our Svelte app - Learn web development
when you dispatch an event you have to pass the name of the event and, optionally, an object with additional information that you want to pass to every listener.
... now we have to listen to that event from inside todos.svelte and act accordingly.
...in addition, the remove event listener is sending the daa change back up to the parent, so our "x out of y items completed" status heading will now update appropriately when todos are deleted.
...And 2 more matches

Add-on Manager
for example: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getalladdons(function(aaddons) { // here aaddons is an array of addon objects }); // this code will execute before the code inside the callback notifications about changes to installed add-ons are dispatched to any registered addonlisteners.
... they must be registered through the addaddonlistener() method.
...addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getinstallforurl("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
...And 2 more matches

sslfnc.html
when pr_accept accepts a new connection from a listen file descriptor and creates a new file descriptor for the new connection, the listen file descriptor also acts as a model for the new file descriptor, and the new file descriptor inherits its values from the model.
...if the application has not previously set the cipher preference for this cipher on this socket, the value will be either the process default value or the value inherited from a listen socket or a model socket.
... ssl_configsecureserver configures a listen socket with the information needed to handshake as an ssl server.
...And 2 more matches

Feed content access API
nsifeedprogresslistener implemented by the program that wants to parse an rss or atom feed to receive messages during the parsing process.
... nsifeedresultlistener implemented by the program that wants to parse an rss or atom feed to receive notification when parsing is complete.
...s.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } ...
...And 2 more matches

nsIMsgSendLater
inherits from: nsistreamlistener implemented by: @mozilla.org/messengercompose/sendlater;1.
... to create an instance, use var msgsendlater = components.classes["@mozilla.org/messengercompose/sendlater;1"] .getservice(components.interfaces.nsimsgsendlater); method overview void sendunsentmessages(in nsimsgidentity identity); void removelistener(in nsimsgsendlaterlistener listener); void addlistener(in nsimsgsendlaterlistener listener); nsimsgfolder getunsentmessagesfolder](in nsimsgidentity identity); attributes attribute type description msgwindow nsimsgwindow methods sendunsentmessages() sends all unsent messages for an identity.
... void sendunsentmessages(in nsimsgidentity identity) parameters identity the nsimsgidentity to send unsent messages for removelistener() remove an event listener from this nsisendmsglater instance void removelistener(in nsimsgsendlaterlistener listener); parameters listener the nsimsgsendlaterlistener to remove.
...And 2 more matches

nsIWifiMonitor
implemented by @mozilla.org/wifi/monitor;1 as a service: var wifimonitor = components.classes["@mozilla.org/wifi/monitor;1"] .getservice(components.interfaces.nsiwifimonitor); method overview void startwatching(in nsiwifilistener alistener); void stopwatching(in nsiwifilistener alistener); methods startwatching() starts listening for changes to the wifi access point list.
... void startwatching( in nsiwifilistener alistener ); parameters alistener the nsiwifilistener object to receive notifications when the wifi access point list changes.
... stopwatching() stops listening for changes to the wifi access point list.
...And 2 more matches

Creating a gloda message query
create a collection from the query your listener is notified as messages are added to the collection as the database query completes.
... let mylistener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function mylistener_onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function mylistener_onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */ onitemsremoved: function mylistener_onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function mylistener_onquerycompleted(acollection) { } }; let collection = query.getcollection(mylistener); message attributes look at the...
... the max number of messages which are returned is governed by a preference: "mailnews.database.global.search.msg.limit" although you can deal with the messages as they show up via the listener, the list of messages in the collection is available in collection.items.
...And 2 more matches

Gloda examples
a) show all messages in a conversation regardless of the folder in which they are stored, b) search messages by subject assuming that you have a message (glodamessage) in the conversation already, this is straight forward using glodamessage.conversation.getmessagescollection() alistener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function _onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function _onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purged from the system */...
...s, acollection) { }, /* called when our database query completes */ onquerycompleted: function _onquerycompleted(conversation_coll) { try { for (var conv in conversation_coll) { //do something with the conversation here alert(conv.subject); } } catch (e) {} } } glodamessage.conversation.getmessagescollection(alistener) alternatively if you need to get a conversation based on the subject, you need to do a query (using the same listener as above).
... if you search for a message based on subject, use noun_message instead of noun_conversation and modify the listener accordingly.
...And 2 more matches

Advanced animations - Web APIs
radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly.
...); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will just bou...
...learrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ball.vy *= .99; ball.vy += .25; if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames.
...And 2 more matches

Detecting device orientation - Web APIs
it is different from the deviceorientationevent because it is listening for changes in acceleration as opposed to orientation.
... 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.
... window.addeventlistener("deviceorientation", handleorientation, true); after registering your event listener (in this case, a javascript function called handleorientation()), your listener function periodically gets called with updated orientation data.
...And 2 more matches

Events and the DOM - Web APIs
the event interface itself is described, as well as the interfaces for event registration on nodes in the dom, and event listeners, and several longer examples that show how the various event interfaces relate to one another.
... registering event listeners there are 3 ways to register event handlers for a dom element.
... eventtarget.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
...And 2 more matches

Event.eventPhase - Web APIs
event listeners registered for capture mode when eventtarget.addeventlistener() was called are triggered during this phase.
...event listeners registered for this phase are called at this time.
...event listeners registered for this phase are triggered during this process.
...And 2 more matches

HTMLElement: animationcancel event - Web APIs
an event handler for this event can be added by setting the onanimationcancel property, or using addeventlistener().
... bubbles yes cancelable no interface animationevent event handler property onanimationcancel examples this code gets an element that's currently being animated and adds a listener to the animationcancel event.
... const animated = document.queryselector('.animated'); animated.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div>...
...And 2 more matches

Using IndexedDB - Web APIs
wait for the operation to complete by listening to the right kind of dom event.
...} you should also listen for versionerror errors to handle the situation where already opened apps may initiate code leading to a new attempt to open the database, but using an outdated version.
...you can use the idbdatabase.onclose event handler to listen for these events, so that you know when a database is unexpectedly closed.
...And 2 more matches

MessagePort - Web APIs
the messageport interface of the channel messaging api represents one of the two ports of a messagechannel, allowing messages to be sent from one port and listening out for them arriving at the other.
... start() starts the sending of messages queued on the port (only needed when using eventtarget.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer active.
... event handlers inherits event handlers from its parent, eventtarget onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message.
...And 2 more matches

MutationEvent - Web APIs
performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... moreover, removing the listeners does not reverse the damage.
... the performance effect is limited to the documents that have the mutation event listeners.
...And 2 more matches

PannerNode.orientationX - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
...however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches

PannerNode.orientationY - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
...however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches

PannerNode.orientationZ - Web APIs
if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
...however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...And 2 more matches

Sensor APIs - Web APIs
listening for errors thrown during its use.
... let accelerometer = null; try { accelerometer = new accelerometer({ referenceframe: 'device' }); accelerometer.addeventlistener('error', event => { // handle runtime errors.
... } else if (event.error.name === 'notreadableerror' ) { console.log('cannot connect to the sensor.'); } }); accelerometer.addeventlistener('reading', () => reloadonshake(accelerometer)); accelerometer.start(); } catch (error) { // handle construction errors.
...And 2 more matches

SpeechRecognition - Web APIs
speechrecognition.abort() stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a speechrecognitionresult.
... speechrecognition.start() starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
... speechrecognition.stop() stops the speech recognition service from listening to incoming audio, and attempts to return a speechrecognitionresult using the audio captured so far.
...And 2 more matches

Writing a WebSocket server in C# - Web APIs
luckily, c# has a tcplistener class which does as the name suggests.
... tcplistener constructor: tcplistener(system.net.ipaddress localaddr, int port) localaddr specifies the ip of the listener, and port specifies the port.
... here's a barebones server implementation: ​using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"), 80); server.start(); console.writeline("server has started on 127.0.0.1:80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the s...
...And 2 more matches

Window.ondragdrop - Web APIs
syntax window.ondragdrop = funcref; window.addeventlistener("dragdrop", funcref, usecapturing); funcref the event handler function to be registered.
... the window.ondragdrop property and the ondragdrop attribute are not implemented in gecko (bug 112288), you have to use addeventlistener.
... see addeventlistener for details.
...And 2 more matches

Using CSS animations - CSS: Cascading Style Sheets
.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.
... this code configures our event listeners; we call it when the document is first loaded in order to set things up.
... var element = document.getelementbyid("watchme"); element.addeventlistener("animationstart", listener, false); element.addeventlistener("animationend", listener, false); element.addeventlistener("animationiteration", listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the documentation for eventtarget.addeventlistener().
...And 2 more matches

Video player styling basics - Developer guides
'unmute' : 'mute'); } } this function is then called by the relevant event handlers: video.addeventlistener('play', function() { changebuttonstate('playpause'); }, false); video.addeventlistener('pause', function() { changebuttonstate('playpause'); }, false); stop.addeventlistener('click', function(e) { video.pause(); video.currenttime = 0; progress.value = 0; // update the play/pause button's 'data-state' which allows the correct button image to be 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.
...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 === '+') { ...
...And 2 more matches

Audio and video manipulation - Developer guides
o.ended) { return; } this.computeframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, computeframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var gre...
...utton" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setplaybackrate(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setplaybackrate); window.addeventlistener('load', setplaybackrate); note: try the playbackrate example live.
...diaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setfilter); note: unless you have cors enabled, to avoid security issues your video should be on the same domain as your code.
...And 2 more matches

DOM onevent handlers - Developer guides
two common approaches are addeventlistener() and the specific onevent handlers.
...in order to allow multiple handlers to be installed for the same event on a given object, you can call its addeventlistener() method, which manages a list of handlers for the given event on the object.
... a handler can then be removed from the object by calling its removeeventlistener() function.
...And 2 more matches

Mutation events - Developer guides
performance adding dom mutation listeners to a document profoundly degrades the performance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... moreover, removing the listeners does not reverse the damage.
... the performance effect is limited to the documents that have the mutation event listeners.
...And 2 more matches

<input type="button"> - HTML: Hypertext Markup Language
ple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the htmlinputelement object representing the <input> in the dom, saving t...
...addeventlistener() is then used to establish a function that will be run when click events occur on the button.
... <form> <input type="button" value="start machine" accesskey="s"> </form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } note: the problem with the above example of course is that the user will not know what the access ke...
...And 2 more matches

Digital audio concepts - Web media technologies
special low frequency enhancement (lfe) channels provide the signal for special speakers designed to produce the low frequency sounds and vibration to create a visceral sensation when listening to the audio.
...generally, lossy compression results in significantly smaller output than lossless compression methods; also, many lossy codecs are excellent, with the loss in quality and detail being difficult or even impossible for the average listener to discern.
... use cases for lossless audio include scenarios such as: any situation in which the listener expects precise audio reproduction and may have an ear for sound that's good enough to make out the intricate details of unaltered audio audio loops and samples used in music and sound effects production work situations in which audio clips or samples may be remixed and then compressed; using lossless audio for the mastering process avoids compressing previously compressed data, resulting in ...
...And 2 more matches

Communicating using "postMessage" - Archive of obsolete content
again, panel and page integrate worker directly: // post a message to the panel's content scripts panel.postmessage(addonmessage); however, for page-mod objects you need to listen to the onattach event and use the worker supplied to that: var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.postmessage(addonmessage); } }); to receive messages from a content script, use the worker's on function.
... to simplify this most content modules provide an onmessage property as an argument to the constructor: panel = require("sdk/panel").panel({ onmessage: function(contentscriptmessage) { // handle message from the content script } }); message events versus user-defined events you can use message events as an alternative to user-defined events: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage(event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.on('message', function(message) { console.log('mouseover: ' + message); }); } }); the reason to prefer user-defi...
...now we have to embed the event type in the message payload, and implement a switch function in the receiver to dispatch the message: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.postmessage({" + " kind: 'mouseover'," + " element: event.target.tostring()" + " });" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.postmessage({" + " kind: 'mo...
... worker.on('message', function(message) { switch(message.kind) { case 'mouseover': console.log('mouseover: ' + message.element); break; case 'mouseout': console.log('mouseout: ' + message.element); break; } }); } }); implementing the same add-on with user-defined events is shorter and more readable: var pagemodscript = "window.addeventlistener('mouseover', function(event) {" + " self.port.emit('mouseover', event.target.tostring());" + "}, false);" + "window.addeventlistener('mouseout', function(event) {" + " self.port.emit('mouseout', event.target.tostring());" + "}, false);"; var pagemod = require('sdk/page-mod').pagemod({ includ...

Porting the Library Detector - Archive of obsolete content
the script listens to gbrowser's domcontentloaded event.
... finally, it listens to gbrowser's tabselect event, to update the contents of the box for that window.
...however, instead of maintaining its own state by listening for gbrowser events and updating the user interface, the content script will just run when it's loaded, collect the array of library names, and post it back to main.js: function testlibraries() { var win = unsafewindow; var librarylist = []; for(var i in ld_tests) { var passed = ld_tests[i].test(win); if (passed) { var libraryinfo = { name: i, version: pass...
...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, ...

selection - Archive of obsolete content
usage registering for selection notifications to be notified when the user makes a selection, register a listener for the "select" event.
... each listener will be called after a selection is made.
... function mylistener() { console.log("a selection has been made."); } var selection = require("sdk/selection"); selection.on('select', mylistener); // you can remove listeners too.
... selection.removelistener('select', mylistener); iterating over discontiguous selections discontiguous selections can be accessed by iterating over the selection module itself.

preferences/event-target - Archive of obsolete content
listen to changes to the preferences system in firefox.
... this enables add-ons to listen to change events to the system-wide settings.
... example var { prefstarget } = require("sdk/preferences/event-target"); // listen to the same branch which reqire("sdk/simple-prefs") does var target = prefstarget({ branchname: "extensions." + require("sdk/self").preferencesbranch + "." }); target.once("test", function(prefname) { console.log(prefname) // logs "test" console.log(target.prefs[name]) // logs true }); target.once("", function() { console.log(prefname) // logs "test" console.log(target.prefs[name]) // l...
...ogs true }) // changing a pref which our target listens to require("sdk/simple-prefs").prefs.test = true; ...

Display a Popup - Archive of obsolete content
function handleclick(state) { text_entry.show(); } // when the panel is displayed it generated an event called // "show": we will listen for that event and when it happens, // send our own "show" event to the panel's script, so the // script can prepare the panel for display.
... text_entry.on("show", function() { text_entry.port.emit("show"); }); // listen for messages called "text-entered" coming from // the content script.
...var textarea = document.getelementbyid("edit-box"); textarea.addeventlistener('keyup', function onkeyup(event) { if (event.keycode == 13) { // remove the newline.
... text = textarea.value.replace(/(\r\n|\n|\r)/gm,""); self.port.emit("text-entered", text); textarea.value = ''; } }, false); // listen for the "show" event being sent from the // main add-on code.

Forms related code snippets - Archive of obsolete content
g", "sep", "oct", "nov", "dec"], sdays = ["m", "t", "w", "t", "f", "s", "s"], bzeroismonday = true, /* internal usage */ ainstances = [], amonthlengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], rbgnnan = /^\d+/, rbgnandend = /^\d+|\d+\d+$/g, rmonth = /\-month\-/, rdecrease = /\-decr\-/; var /* customizable by user */ nzindex = 1000; window.addeventlistener ?
... addeventlistener("load", buildcalendars, false) : window.attachevent ?
... attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ?
... document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ?

Inline options - Archive of obsolete content
some discussion on the subject at stackoverflow: how to use addeventlistener on inputchanged of inline options display notifications if you want to use the settings ui for anything more than storing preferences, then you will probably need to initialize them when they first appear.
... you can't do this until your options xul has been loaded into the add-on manager window, so you should listen for the addon-options-displayed notification to initialize your settings.
... note: starting in gecko 13.0, you can also listen for the addon-options-hidden notification, which has the same subject and data as above, to find out when the ui is about to be removed.
... use this notification to remove event listeners, or any other references that might otherwise be leaked.

Observer Notifications - Archive of obsolete content
observerservice.removeobserver(testobserver, "xulschoolhello-test-topic"); after you have registered some observers to listen to a notification topic, you can then use the notifyobservers method to send a notification to all of them.
... in a chrome browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads.
... */ observe : function(asubject, atopic, adata) { if (atopic == "xulschoolhello-test-topic") { asubject.queryinterface(ci.nsisupportsstring); window.alert("subject: " + asubject.data); // => "this is a test" window.alert("data: " + adata); // => "hello" } } } window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); window.addeventlistener( "unload", function() { xulschoolchrome.browseroverlay.uninit(); }, false); in the observe method the notification topic is verified because you can have one observer listening to several topics.
... you can always listen for multiple notification topics using the same observer.

jspage - Archive of obsolete content
||"iframe",d);var b=function(){var g=$try(function(){return c.contentwindow.location.host;});if(!g||g==window.location.host){var h=new window(c.contentwindow); new document(c.contentwindow.document);$extend(h.element.prototype,element.prototype);}e.call(c.contentwindow,c.contentwindow.document);};var a=$try(function(){return c.contentwindow; });((a&&a.document.body)||window.frames[d.id])?b():c.addlistener("load",b);return c;}});var elements=new native({initialize:function(f,b){b=$extend({ddup:true,cash:true},b); f=f||[];if(b.ddup||b.cash){var g={},e=[];for(var c=0,a=f.length;c<a;c++){var d=document.id(f[c],!b.cash);if(b.ddup){if(g[d.uid]){continue;}g[d.uid]=true; }if(d){e.push(d);}}f=e;}return(b.cash)?$extend(f,this):f;}});elements.implement({filter:function(a,b){if(!a){return this;}return new e...
...this;},haschild:function(l){l=document.id(l,true);if(!l){return false; }if(browser.engine.webkit&&browser.engine.version<420){return $a(this.getelementsbytagname(l.tagname)).contains(l);}return(this.contains)?(this!=l&&this.contains(l)):!!(this.comparedocumentposition(l)&16); },match:function(l){return(!l||(l==this)||(element.get(this,"tag")==l));}});native.implement([element,window,document],{addlistener:function(o,n){if(o=="unload"){var l=n,m=this; n=function(){m.removelistener("unload",n);l();};}else{h[this.uid]=this;}if(this.addeventlistener){this.addeventlistener(o,n,false);}else{this.attachevent("on"+o,n); }return this;},removelistener:function(m,l){if(this.removeeventlistener){this.removeeventlistener(m,l,false);}else{this.detachevent("on"+m,l);}return this; },retrieve:function(m,l){var o...
...=c(this.uid),n=o[m];if(l!=undefined&&n==undefined){n=o[m]=l;}return $pick(n);},store:function(m,l){var n=c(this.uid);n[m]=l; return this;},eliminate:function(l){var m=c(this.uid);delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.csstext=a; },get:function(){return this.style.csstext;},erase:function(){this.style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbody></table>"]}; a.thead=a.tfoot=a.tbody;var b={set:function(){var e=array.flatt...
...g)){return this; }h[e].keys.push(g);var f=e,a=element.events.get(e),c=g,i=this;if(a){if(a.onadd){a.onadd.call(this,g);}if(a.condition){c=function(j){if(a.condition.call(this,j)){return g.call(this,j); }return true;};}f=a.base||f;}var d=function(){return g.call(i);};var b=element.nativeevents[f];if(b){if(b==2){d=function(j){j=new event(j,i.getwindow()); if(c.call(i,j)===false){j.stop();}};}this.addlistener(f,d);}h[e].values.push(d);return this;},removeevent:function(c,b){var a=this.retrieve("events");if(!a||!a[c]){return this; }var f=a[c].keys.indexof(b);if(f==-1){return this;}a[c].keys.splice(f,1);var e=a[c].values.splice(f,1)[0];var d=element.events.get(c);if(d){if(d.onremove){d.onremove.call(this,b); }c=d.base||c;}return(element.nativeevents[c])?this.removelistener(c,e):this;},addevents:functi...

Supporting private browsing mode - Archive of obsolete content
a private browser listener helper object this helper object registers listeners for private browsing mode changes.
...function privatebrowsinglistener() { this.init(); } privatebrowsinglistener.prototype = { _os: null, _inprivatebrowsing: false, // whether we are in private browsing mode _watcher: null, // the watcher object init : function () { this._inited = true; this._os = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); this._os.addobserver(this, "private-browsing", false); this._os.addobserver(this, "quit-application", false); try { var pbs = components.classes["@mozilla.org/privatebrowsing;1"] .getservice(components.interfaces.nsiprivatebrowsingservice); this._inprivatebr...
... simply instantiate the helper, then you can use its inprivatebrowsing flag to detect whether or not private browsing is currently enabled, as shown here: var listener = new privatebrowsinglistener(); if (listener.inprivatebrowsing) { // we are in private browsing mode!
...var listener = new privatebrowsinglistener(); listener.watcher = { onenterprivatebrowsing : function() { // we have just entered private browsing mode!

Building accessible custom components in XUL - Archive of obsolete content
<code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } function spreadsheet_focus(e) { if (e.target.tagname == 'grid') { if (!gfocuscell) { gfocuscell = e.target.getelementsbytagname('label')[0]; } gfocuscell.focus(); } else { gfocuscell = e.target; } } function spreadsheet_click(e) { ...
...<code> function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('keypress', spreadsheet_keypress, true); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spreadsheet_click, true); } </code> with this new event handler and associated helper functions, we can navigate between cells and headers using the arrow keys.
...master/gatekeeper/there.is.only.xul"; const x2_ns ="http://www.w3.org/tr/xhtml2" function start_edit(label) { var value = label.value; settimeout(function(){ var textbox = document.createelementns(xul_ns, "textbox"); label.parentnode.replacechild(textbox, label); textbox.value = value; textbox.origvalue = value; textbox.flex = 1; textbox.focus(); textbox.select(); textbox.addeventlistener("blur", editable_cell_blur, true); textbox.addeventlistener("keypress", editable_cell_keypress, true); }, 0); } function done_edit(textbox, keepvalue) { var value = textbox.value; var label = document.createelementns(xul_ns, "label"); label.setattributens(x2_ns, "role", "wairole:gridcell"); textbox.parentnode.replacechild(label, textbox); if (keepvalue) { label.value ...
...= value; } else { label.value = textbox.origvalue; } label.flex = 1; label.addeventlistener("keypress", cell_keypress, true); return label; } function editable_cell_blur(e) { var textbox = e.target; settimeout(function() { done_edit(textbox, true); }, 0); } function editable_cell_keypress(e) { var textbox = e.target; switch (e.keycode) { case key_enter: settimeout(function() { var label = done_edit(textbox, true); label.focus(); }, 0); break; case key_escape: settimeout(function() { var label = done_edit(textbox, false); label.focus(); }, 0); break; } } </code> with this new code, we can now navigate to a specific cell within the spreadsheet and press enter to edit the value.

Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clearresults clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstv...
... movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection r...
...elated dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:element.hasattributens dom:element.hasattributes dom:element.haschildnodes dom:element.insertbefore dom:element.isequalnode dom:element.issamenode dom:element.issupported dom:element.lookupnamespaceuri dom:element.lookupprefix dom:element.normalize dom:element.removeattribute dom:element.removeattributenode dom:element.removeattributen...
...s dom:element.removechild dom:element.removeeventlistener dom:element.replacechild dom:element.setattribute dom:element.setattributenode dom:element.setattributenodens dom:element.setattributens dom:element.setuserdata ...

ContextMenus - Archive of obsolete content
although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case.
... <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute.
... function checkcontextmenu(event) { if (event.target.localname == "textbox") event.preventdefault(); } function init() { var container = document.getelementbyid("container"); container.addeventlistener("contextmenu", checkcontextmenu, true); } the 'checkcontextmenu' function checks to see if the textbox was the target of the context menu and, if so, cancels the event using the preventdefault method.
...the event listener is attached using the addeventlistener method within the 'init' function.

textbox (Toolkit autocomplete) - Archive of obsolete content
overview an onchange attribute is an event listener to the object for the event change.
...a listener for the command event should update search results.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), h...
...asattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata getsearchat( index ) return type: string returns the search component with the given index.

Textbox (XPFE autocomplete) - Archive of obsolete content
overview an onchange attribute is an event listener to the object for the event change.
...a listener for the command event should update search results.
... methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getuserdata, hasattribute(), hasattributens(), h...
...asattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata addsession( session ) obsolete since gecko 26 return type: nsiautocompletesession adds a new session object to the autocomplete widget.

XUL Questions and Answers - Archive of obsolete content
specifying window.onload function to specify a function to run when the window is loaded,add the following code between the script tags in the xul file: window.addeventlistener("load", function(e) { startup(); }, false); similarly, for onunload use the code: window.addeventlistener("unload", function(e) { shutdown(); }, false); is there an event which is called when the firefox browser is initialized?
... what is an example of addprogresslistener?
... an example of this is this: // associate the progress listener for a "browser" to a listener object browserobject.addprogresslistener( listobj, components.interfaces.nsiwebprogress.notify_state_window ); // remember to define the object, something like this: listobj = new object(); listobj.wpl = components.interfaces.nsiwebprogresslistener; listobj.queryinterface = function(aiid) { if (aiid.equals(listobj.wpl) || aiid.equals(components.interfaces.nsisupportsweakreference) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; } listobj.onstatechange = function(aprogress, arequest, aflag, astatus) { if (aflag & listobj.wpl.state_start) { // this fires when the load event is initiated } else { if (afla...
...onlocationchange = function(aprogress, arequest, auri) { // do whatever you want to do return 0; } // for definitions of the remaining functions see xulplanet.com listobj.onprogresschange = function() { return 0 }; listobj.onstatuschange = function() { return 0 }; listobj.onsecuritychange = function() { return 0 }; listobj.onlinkiconavailable = function() { return 0 }; /* i use the progress listener to trap the end of a local html "template" file loading, and run xslt transormations.

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, a...
...the function touchhandler will assign proper variables to the ship's position so that we can use it for both cases: when the player touches the screen but doesn't move it (touchstart), and when the finger is moved on the screen (touchmove): document.addeventlistener("touchstart", touchhandler); document.addeventlistener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; output.innerhtml = "touch: "+ " x: " + playerx + ", y: " + pla...
... input events instead of using the pointers directly it is also possible to listen for this.game.input events, like ondown, onup, ontap and onhold: this.game.input.ondown.add(itemtouched, this); function itemtouched(pointer) { // do something } the itemtouched() function will be executed when the ondown event is dispatched by touching the screen.
... implementation the easiest way to add an interactive object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched.

Unconventional controls - Game development
you can check them by printing the responses out in the console: window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console.
...all that is needed is checking for key presses: window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case 588: { // detonate bomb break; } // ...
...we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * tod...
... an event listener for device proximity would look like this: window.addeventlistener('deviceproximity', function(event) { var min = event.min; var max = event.max; var proximity = event.value; }); the min and max values are the minimum and the maximum distances respectively between which the sensor can detect the exact proximity value.

Client-side form validation - Learn web development
simple html (feel free to put this in a blank html file; use a fresh copy of fruit-start.html as a basis, if you like): <form> <label for="mail">i would like you to provide me with an e-mail address:</label> <input type="email" id="mail" name="mail"> <button>submit</button> </form> and add the following javascript to the page: const email = document.getelementbyid("mail"); email.addeventlistener("input", function (event) { if (email.validity.typemismatch) { email.setcustomvalidity("i am expecting an e-mail address!"); } else { email.setcustomvalidity(""); } }); here we store a reference to the email input, then add an event listener to it that runs the contained code each time the value inside the input is changed.
...const form = document.getelementsbytagname('form')[0]; const email = document.getelementbyid('mail'); const emailerror = document.queryselector('#mail + span.error'); email.addeventlistener('input', function (event) { // each time the user types something, we check if the // form fields are valid.
... emailerror.innerhtml = ''; // reset the content of the message emailerror.classname = 'error'; // reset the visual state of the message } else { // if there is still an error, show the correct error showerror(); } }); form.addeventlistener('submit', function (event) { // if the email field is valid, we let the form submit if(!email.validity.valid) { // if it isn't, we display an appropriate error message showerror(); // then we prevent the form from being sent by canceling the event event.preventdefault(); } }); function showerror() { if(email.validity.valuemissing) { // if the field is empty // display...
...// in modern browsers, you should prefer using element.nextelementsibling let error = email; while ((error = error.nextsibling).nodetype != 1); // as per the html5 specification const emailregexp = /^[a-za-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-za-z0-9-]+(?:\.[a-za-z0-9-]+)*$/; // many legacy browsers do not support the addeventlistener method.

Images in HTML - Learn web development
; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...how solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrolltop; var caretpos = textarea...
...; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 's...
...tion'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { var scrollpos = textarea.scrol...

Introducing asynchronous JavaScript - Learn web development
let's look at a simple example (see it live here, and see the source): const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); in this block, the lines are executed one after the other: we grab a reference to a <button> element that is already available in the dom.
... we add a click event listener to it so that when the button is clicked: an alert() message appears.
... an example of an async callback is the second parameter of the addeventlistener() method (as we saw in action above): btn.addeventlistener('click', () => { alert('you clicked me!'); let pelem = document.createelement('p'); pelem.textcontent = 'this is a newly-added paragraph.'; document.body.appendchild(pelem); }); the first parameter is the type of event to be listened for, and the second parameter is a callback function that is invoked when the event is fired.
... it worked :) if this confuses you, then consider the following smaller example: console.log("registering click handler"); button.addeventlistener('click', () => { console.log("get click"); }); console.log("all done"); this is very similar in behavior — the first and third console.log() messages will be shown immediately, but the second one is blocked from running until someone clicks the mouse button.

Arrays - Learn web development
ns"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'sho...
...et subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n}\n\ntotalbox.textcontent = \'total: $\' + total.tofixed(2);'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.sc...
...{ margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'sho...
...ut.value);\n\n list.innerhtml = \'\';\n\n for(let i = 0; i < myhistory.length; i++) {\n itemtext = myhistory[i];\n const listitem = document.createelement(\'li\');\n listitem.textcontent = itemtext;\n list.appendchild(listitem);\n }\n\n if(myhistory.length >= 5) {\n myhistory.pop();\n }\n\n searchinput.value = \'\';\n searchinput.focus();\n }\n}'; let solutionentry = jssolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scr...

How to implement a custom autocomplete search component
) { return this._results[index]; }, queryinterface: xpcomutils.generateqi([ ci.nsiautocompleteresult ]) }; /** * @constructor * * @implements {nsiautocompletesearch} */ function providerautocompletesearch() { } providerautocompletesearch.prototype = { classid: class_id, classdescription : class_name, contractid : contract_id, /** * searches for a given string and notifies a listener (either synchronously * or asynchronously) of the result * * @param searchstring the string to search for * @param searchparam an extra parameter * @param previousresult a previous result to use for faster searchinig * @param listener the listener to notify when the search is complete */ startsearch: function(searchstring, searchparam, previousresult, listener) { var ...
...results = ['mary', 'john']; var autocomplete_result = new providerautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, null); listener.onsearchresult(this, autocomplete_result); }, /** * stops an asynchronous search that is in progress */ stopsearch: function() { }, queryinterface: xpcomutils.generateqi([ ci.nsiautocompletesearch ]) }; // the following line is what xpcom uses to create components const nsgetfactory = xpcomutils.generatensgetfactory([ providerautocompletesearch ]); then register your xpcom component.
...his._comments.splice(index, 1); }, queryinterface: function(aiid) { if (!aiid.equals(ci.nsiautocompleteresult) && !aiid.equals(ci.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; // implements nsiautocompletesearch function simpleautocompletesearch() { } simpleautocompletesearch.prototype = { /* * search for a given string and notify a listener (either synchronously * or asynchronously) of the result * * @param searchstring - the string to search for * @param searchparam - an extra parameter * @param previousresult - a previous result to use for faster searchinig * @param listener - a listener to notify when the search is complete */ startsearch: function(searchstring, searchparam, result, listener) { // thi...
...(searchresults[i].value.indexof(searchstring) == 0) { results.push(searchresults[i].value); if (searchresults[i].comment) comments.push(searchresults[i].comment); else comments.push(null); } } var newresult = new simpleautocompleteresult(searchstring, ci.nsiautocompleteresult.result_success, 0, "", results, comments); listener.onsearchresult(this, newresult); } }, /* * stop an asynchronous search that is in progress */ stopsearch: function() { }, queryinterface: function(aiid) { if (!aiid.equals(ci.nsiautocompletesearch) && !aiid.equals(ci.nsisupports)) throw components.results.ns_error_no_interface; return this; } }; // factory var simpleautocompletesearchfactory = { single...

Implementing Download Resuming
if the download gets interrupted, necko will call the stream listener's onstoprequest method with a failure status.
...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).
... detecting when a file changed if the file changed (that is, the entity id does not match), then necko will notify the stream listener with an ns_error_entity_changed error code.
...in such a case, the stream listener will get an ns_error_not_resumable status.

WebChannel.jsm
method overview listen(function callback); stoplistening(); send(object message, eventtarget target); attributes id string webchannel id methods listen() registers the callback for messages on this channel.
... id - webchannel id of the incoming messages message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the callback for messages on this channel.
... parameters message the message object that will be sent sendercontext the sendercontext parameter passed to the .listen method.
... examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); }, true); send messages to an existing webchannel in chrome code window.dispatchevent(new window.customevent("webchannelmessagetochrome", { detail: { id: webchannelid, message: { something: true } } })); ...

L20n Javascript API
you can listen to the ready event (emitted by the context instance when all the resources have been compiled) and use ctx.getsync and ctx.getentitysync to get translations synchronously.
... ctx.addeventlistener(event: string, callback: function) register an event handler on the context instance.
... ctx.removeeventlistener(event: string, callback: function) remove an event listener previously registered with addeventlistener.
...otherwise it sets the event listener and fire as soon as the context is ready.

Necko Architecture
receiving data & nsistreamlistener you can read or write, from or to a channel using either the synchronous api, or the asynchronous api.
... if you want to move data asynchronously you need to be able to receive callbacks using an implementation of nsistreamlistener.
... an nsistreamlistener is told when the uri transaction has "started," when data is available (in the case of reading data), and when it has "stopped." it is up to the nsistreamlistener implementation to decide what to do with these various notifications.
... the ondataavailable() notification provides a chance for the nsistreamlistener to actually retrieve data that the channel has acquired.

Observer Notifications
extension manager note: these notifications are no longer available starting with gecko 2.0, instead use addonmanager.addaddonlistener() to receive similar events.
... remote-listening string sent after when the remote agent is listening for incoming connections after remoteagent.listen() is called.
...by listening for message-manager-disconnect you will be informed when this happens.
...it is sent, and received, in the content process: you can't listen to it in the chrome process.

nsIAppShell
hod overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorperformancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void run(); void runinstablestate(in nsirunnable arunnable); void spindown(); obsolete since gecko 1.9 void spinup(); obsolete since gecko 1.9 void suspendnative(); attributes attribute type description eventloopnestinglevel unsigned long the current event loop nesting lev...
... listentoeventqueue() obsolete since gecko 1.9 (firefox 3) an event queue has been created or destroyed.
...void listentoeventqueue( in nsieventqueue aqueue, in prbool alisten ); parameters aqueue the queue in question.
... alisten pr_true for a new queue wanting hooking up.

nsIAutoCompleteSearch
results can be sent to the listener either synchronously or asynchronously, depending on the implementation.
... method overview void startsearch(in astring searchstring, in astring searchparam, in nsiautocompleteresult previousresult, in nsiautocompleteobserver listener); void stopsearch(); methods startsearch() search for a given string and notify a listener (either synchronously or asynchronously) of the result.
... void startsearch( in astring searchstring, in astring searchparam, in nsiautocompleteresult previousresult, in nsiautocompleteobserver listener ); parameters searchstring the string to search for.
...listener an nsiautocompleteobserver listener to notify when the search is complete.

nsICachingChannel
an error of ns_error_document_not_cached will be sent to the listener's onstoprequest if network io is necessary to complete the request.
...an error of ns_error_document_not_cached will be sent to the listener's onstoprequest in this case.
...a stream listener can check isfromcache() to determine if the asyncopen will actually result in data being streamed.
...the listener will only see onstartrequest followed by onstoprequest.

nsIDOMEvent
currenttarget nsidomeventtarget used to indicate the eventtarget whose eventlisteners are currently being processed.
... void serialize( in ipcmessageptr amsg, in boolean aserializeinterfacetype ); parameters amsg aserializeinterfacetype native code only!settarget void settarget( in nsidomeventtarget atarget ); parameters atarget native code only!settrusted void settrusted( in boolean atrusted ); parameters atrusted stopimmediatepropagation() prevents other event listeners from being triggered and, unlike stoppropagation() its effect is immediate.
...if this method is called by any eventlistener the event will cease propagating through the tree.
... the event will complete dispatch to all listeners on the current eventtarget before event flow stops.

nsIFeedProcessor
1.0 66 introduced gecko 1.8.1 inherits from: nsistreamlistener last changed in gecko 1.8.1 (firefox 2 / thunderbird 2 / seamonkey 1.1) implemented by: @mozilla.org/feed-processor;1.
...g/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); 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.
...the caller must then call the processor's nsistreamlistener methods to drive the parsing process.
... see also nsistreamlistener nsifeedresultlistener interwiki link ...

nsIMessageBroadcaster
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message "broadcasters" don't have a single "other side" that they send messages to, but rather a set of subordinate message managers.
...methods void broadcastasyncmessage([optional] in astring messagename, [optional] in jsval obj, [optional] in jsval objects); nsimessagelistenermanager getchildat(in unsigned long aindex); broadcastasyncmessage() like sendasyncmessage(), but also broadcasts this message to all "child" message managers of this message manager.
... see nsimessagelistener::receivemessage() for the format of the data delivered to listeners.
... returns nsimessagelistenermanager: the message manager at the given index.

nsIMsgSearchSession
alse; searchsession.appendterm(searchterm); searchsession.search(null); inherits from: nsisupports method overview void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in string arbitraryheader); nsimsgsearchterm createterm(); void appendterm(in nsimsgsearchterm term); void registerlistener(in nsimsgsearchnotify listener); void unregisterlistener(in nsimsgsearchnotify listener); void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); long countsearchscopes(); void getnthsearchscope(in long which,out nsmsgsearchscopevalue scopeid, out nsimsgfolder folder); void add...
... createterm() nsimsgsearchterm createterm(); appendterm() void appendterm(in nsimsgsearchterm term); parameters term registerlistener() adds a listener to the search session.
... void registerlistener(in nsimsgsearchnotify listener); parameters listener unregisterlistener() removes a listener from the search session.
... void unregisterlistener (in nsimsgsearchnotify listener); parameters listener getnthsearchterm() void getnthsearchterm(in long whichterm, in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value); parameters whichterm attrib op value note: this parameter should be an out.

nsIPluginHost
void instantiateembededplugin(in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner); obsolete since gecko 1.8 void instantiatefullpageplugin(in string amimetype, in nsiuri auri, in nsiplugininstanceowner aowner, out nsistreamlistener astreamlistener); native code only!
... nsistreamlistener instantiatepluginforchannel(in nsichannel achannel, in nsiplugininstanceowner aowner); native code only!
...ce gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void instantiateembededplugin( in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner ); parameters amimetype aurl aowner native code only!instantiatefullpageplugin void instantiatefullpageplugin( in string amimetype, in nsiuri auri, in nsiplugininstanceowner aowner, out nsistreamlistener astreamlistener ); parameters amimetype auri aowner astreamlistener native code only!instantiatepluginforchannel instantiate an embedded plugin for an existing channel.
... nsistreamlistener instantiatepluginforchannel( in nsichannel achannel, in nsiplugininstanceowner aowner ); parameters achannel aowner return value native code only!ispluginenabledforextension void ispluginenabledforextension( in string aextension, in constcharstarref amimetype ); parameters aextension amimetype native code only!ispluginenabledfortype void ispluginenabledfortype( in string amimetype ); parameters amimetype native code only!loadplugins void loadplugins(); parameters none.

nsISelectionPrivate
method overview void addselectionlistener(in nsiselectionlistener newlistener); void endbatchchanges(); void getcachedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only!
...obsolete since gecko 12.0 long gettableselectiontype(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only!
... constants constant value description endofprecedingline 0 startofnextline 1 tableselection_none 0 tableselection_cell 1 tableselection_row 2 tableselection_column 3 tableselection_table 4 tableselection_allcells 5 methods addselectionlistener() void addselectionlistener( in nsiselectionlistener newlistener ); parameters newlistener endbatchchanges() will resume user interface updates after a previous call to startbatchchanges().
... removeselectionlistener() void removeselectionlistener( in nsiselectionlistener listenertoremove ); parameters listenertoremove scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view.

nsIUpdateChecker
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void checkforupdates(in nsiupdatechecklistener listener, in boolean force); void stopchecking(in unsigned short duration); constants constant value description current_check 1 constant for the stopchecking() method indicating that only the current update check should be stopped.
... methods checkforupdates() checks for available updates, notifying a listener of the results.
... void checkforupdates( in nsiupdatechecklistener listener, in boolean force ); parameters listener an object implementing nsiupdatechecklistener to be notified of the results of an update check.
... see also nsiupdatepatch nsiupdate nsiupdatechecklistener nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...

Demo Addon
let query = gloda.newquery(gloda.noun_message); query.subjectmatches(searchterm); let mylistener = { /* called when new items are returned by the database query or freshly indexed */ onitemsadded: function mylistener_onitemsadded(aitems, acollection) { }, /* called when items that are already in our collection get re-indexed */ onitemsmodified: function mylistener_onitemsmodified(aitems, acollection) { }, /* called when items that are in our collection are purge...
...d from the system */ onitemsremoved: function mylistener_onitemsremoved(aitems, acollection) { }, /* called when our database query completes */ onquerycompleted: function mylistener_onquerycompleted(acollection) { let items = acollection.items; let data = { messages: [], }; for (let i in items) { data.messages.push({ subject: items[i].subject, date: items[i].date, author: items[i].from.value, }); // ...
... }; let collection = query.getcollection(mylistener); at first, a new gloda query for finding messages is created.
...in the gloda query result listener the variable acollection is a glodacollections.

Document: DOMContentLoaded event - Web APIs
examples basic usage document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the domcontentloaded event is going to launc...
...</script> checking whether loading is already complete domcontentloaded may fire before your script has a chance to run, so it is wise to check before adding a listener.
... function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { ...
... height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'domcontentloaded' in that specificat...

Element.classList - Web APIs
string.prototype.trim polyfill if (!"".trim) string.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.domexception) (domexception = function(reason){this.message = reason}).prototype = new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) throw new domexception("failed to execute '"+o+"' on 'domtokenlist': " + "the token provided ('"+v[wsindex]+"') contains html space characters, which are not valid in tokens."); } // 2.
...tion) throw typeerror("illegal constructor"); // internally let it through } domtokenlist.prototype.tostring = domtokenlist.prototype.tolocalestring = function(){return this.value}; domtokenlist.prototype.add = function(){ a: for(var v=0, arglen=arguments.length,val="",ele=this[" ucl"],proto=ele[" uclp"]; v!==arglen; ++v) { val = arguments[v] + "", checkifvalidclasslistentry("add", val); for (var i=0, len=proto.length, resstr=val; i !== len; ++i) if (this[i] === val) continue a; else resstr += " " + this[i]; this[len] = val, proto.length += 1, proto.value = resstr; } skippropchange = 1, ele.classname = proto.value, skippropchange = 0; }; domtokenlist.prototype.remove = function(){ for (var v=0...
..., arglen=arguments.length,val="",ele=this[" ucl"],proto=ele[" uclp"]; v !== arglen; ++v) { val = arguments[v] + "", checkifvalidclasslistentry("remove", val); for (var i=0, len=proto.length, resstr="", is=0; i !== len; ++i) if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resstr+=this[i]+" "; }else{ is=1; } } if (!is) continue; delete this[len], proto.length -= 1, proto.value = resstr; } skippropchange = 1, ele.classname = proto.value, skippropchange = 0; }; window.domtokenlist = domtokenlist; function whenpropchanges(){ var evt = window.event, prop = evt.propertyname; if ( !skippropchange && (prop==="classname" || (prop==="classlist" && !defineproperty)) ) { var target = ...
..."add" : "remove"](val), !!arguments[1]); var oldvalue = this.value; return (this.remove(oldvalue), oldvalue === this.value && (this.add(val), true) /*|| false*/); }; if (!domtokenlistproto.replace || typeof testclass.replace("a", "b") !== "boolean") domtokenlistproto.replace = function(oldtoken, newtoken){ checkifvalidclasslistentry("replace", oldtoken), checkifvalidclasslistentry("replace", newtoken); var oldvalue = this.value; return (this.remove(oldtoken), this.value !== oldvalue && (this.add(newtoken), true)); }; if (!domtokenlistproto.contains) domtokenlistproto.contains = function(value){ for (var i=0,len=this.length; i !== len; ++i) if (this[i] === value) return true; ...

Event.cancelable - Web APIs
if the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
... event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventdefault() methods.
... example for example, browser vendors are proposing that the wheel event can only be canceled the first time the listener is called — any following wheel events cannot be canceled.
... console.warn(`the following event couldn't be canceled:`); console.dir(event); } } document.addeventlistener('wheel', preventscrollwheel); notes whether an event can be canceled or not is something that's determined when that event is initialized.

Event.composedPath() - Web APIs
the composedpath() method of the event interface returns the event’s path which is an array of the objects on which listeners will be invoked.
... return value an array of eventtarget objects representing the objects on which an event listener will be invoked.
... let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...ement's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes inside the shadow boundary.

GlobalEventHandlers.onerror - Web APIs
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.
... syntax for historical reasons, different arguments are passed to window.onerror and element.onerror handlers (as well as on error-type window.addeventlistener handlers).
... window.addeventlistener('error') window.addeventlistener('error', function(event) { ...

Audio() - Web APIs
the audio() constructor creates and returns a new htmlaudioelement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.
... listen for the canplay event.
... listen for the canplaythrough event.
... the event-based approach is best: myaudioelement.addeventlistener("canplaythrough", event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway.

KeyboardEvent.code - Web APIs
examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.
... 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.
... window.addeventlistener("keydown", function(event) { if (event.defaultprevented) { return; // do nothing if event already handled } switch(event.code) { case "keys": case "arrowdown": // handle "back" updateposition(-moverate); break; case "keyw": case "arrowup": // handle "forward" updateposition(moverate); break; case "keya": case "arrowleft": // handle "turn left" angle -= turnrate; break; case "keyd": case "arrowright": // handle "turn right" angle += turnrate; break; } refresh(); // consume the event so it doesn't get handled twice event.preventdefault(); }, true); try it out to ensure that keystrokes go to the sample code, click inside the black game play field b...

KeyboardEvent.key - Web APIs
1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.addeventlistener('input', (e) => { logmessage(`key "${e.data}" input [event: input]`);...
... }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; } }); result note: on browsers that don't fully implement the inputevent interface which is used for the beforeinput and input events, you may get incorrect output on those lines of the log output.
... example this example uses eventtarget.addeventlistener() to listen for keydown events.
... window.addeventlistener("keydown", function (event) { if (event.defaultprevented) { return; // do nothing if the event was already processed } switch (event.key) { case "down": // ie/edge specific value case "arrowdown": // do something for "down arrow" key press.

Capabilities, constraints, and settings - Web APIs
we also need to set up an event listener to watch for the "start video" button to be clicked: document.getelementbyid("startbutton").addeventlistener("click", function() { startvideo(); }, false); applying constraint set updates next, we set up an event listener for the "apply constraints" button.
... document.getelementbyid("applybutton").addeventlistener("click", function() { if (!videotrack && !audiotrack) { startvideo(); } else { buildconstraints(); if (videotrack) { videotrack.applyconstraints(videoconstraints).then(function() { videosettingstext.value = json.stringify(videotrack.getsettings(), null, 2); }).catch(handleerror); } if (audiotrack) { audiotrack.applyconstraints(audioconstraints)...
... document.getelementbyid("stopbutton").addeventlistener("click", function() { if (videotrack) { videotrack.stop(); } if (audiotrack) { audiotrack.stop(); } videotrack = audiotrack = null; videoelement.srcobject = null; }); this simply stops the active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null.
...keydownhandler(event) { if (event.key == "tab") { let elem = event.target; let str = elem.value; let position = elem.selectionstart; let newstr = str.substring(0, position) + " " + str.substring(position, str.length); elem.value = newstr; elem.selectionstart = elem.selectionend = position + 2; event.preventdefault(); } } videoconstrainteditor.addeventlistener("keydown", keydownhandler, false); audioconstrainteditor.addeventlistener("keydown", keydownhandler, false); show constrainable properties the browser supports the last significant piece of the puzzle: code that displays, for the user's reference, a list of the constrainable properties which their browser supports.

Online and offline events - Web APIs
you can register listeners for these events in a few familiar ways: using addeventlistener on the window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object.
... example there's a simple test case that you can run to verify that the events are working (does not work in chrome due to attaching the event listener to document.body).
... here's the javascript part: window.addeventlistener('load', function() { var status = document.getelementbyid("status"); var log = document.getelementbyid("log"); function updateonlinestatus(event) { var condition = navigator.online ?
... "online" : "offline"; status.classname = condition; status.innerhtml = condition.touppercase(); log.insertadjacenthtml("beforeend", "event: " + event.type + "; status: " + condition); } window.addeventlistener('online', updateonlinestatus); window.addeventlistener('offline', updateonlinestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result not...

Using the Notifications API - Web APIs
var n = new notification('my great song'); document.addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification.
...because notification also inherits from eventtarget, it's possible to use the addeventlistener() method on it.
... tag example assume the following basic html: <button>notify me!</button> it's possible to handle multiple notifications this way: window.addeventlistener('load', function () { // at first, let's check if we have permission for notification // if not, let's ask for it if (window.notification && notification.permission !== "granted") { notification.requestpermission(function (status) { if (notification.permission !== status) { notification.permission = status; } }); } var button = document.getelementsbytagnam...
...e('button')[0]; button.addeventlistener('click', function () { // if the user agreed to get notified // let's try to send ten notifications if (window.notification && notification.permission === "granted") { var i = 0; // using an interval cause some browsers (including firefox) are blocking notifications if there are too much in a certain time.

PannerNode.coneInnerAngle - Web APIs
however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.ori...

PannerNode.coneOuterAngle - Web APIs
however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.ori...

PannerNode.coneOuterGain - Web APIs
however, normally this would mean the pannernode points to the left of the listener at 0° rotation – since `x = cos(0) = 1` and `z = sin(0) = 0`.
... it's more useful to offset the angle by -90°, which means the pannernode will point directly at the listener at 0° rotation.
...rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the output values are always normalised // i.e.
...ll decrease gradually panner.coneouterangle = 45; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.ori...

Screen Wake Lock API - Web APIs
wakelock.release() .then(() => { wakelock = null; }); listening for wake lock release this example updates the ui if the wake lock has been released for any reason (such as navigating away from the active window/tab).
... wakelock.addeventlistener('release', () => { // the wake lock has been released statuselem.textcontent = 'wake lock has been released'; }); reacquiring a wake lock the following code reacquires the wake lock should the visibility of the document change and the wake lock is released.
... document.addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } }); putting it all together you can find the complete code on github here.
...therefore make sure to re-acquire screen wake lock if necessary when document becomes active (listen for visibilitychange event).

ServiceWorker.onstatechange - Web APIs
an eventlistener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
...} serviceworker.addeventlistener('statechange', function(statechangeevent) { ...
...the code listens for any change in the serviceworker.state and returns its value.
...nt.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed.

ServiceWorkerRegistration - Web APIs
event handlers serviceworkerregistration.onupdatefound read only an eventlistener property called whenever an event of type updatefound is fired; it is fired any time the serviceworkerregistration.installing property acquires a new service worker.
...next, it adds an updatefound listener in which it uses the service worker registration to listen for further changes to the service worker's state.
... if ('serviceworker' in navigator) { navigator.serviceworker.register('/sw.js') .then(function(registration) { registration.addeventlistener('updatefound', function() { // if updatefound is fired, it means that there's // a new service worker being installed.
... var installingworker = registration.installing; console.log('a new service worker is being installed:', installingworker); // you can listen for changes to the installing service worker's // state via installingworker.onstatechange }); }) .catch(function(error) { console.log('service worker registration failed:', error); }); } else { console.log('service workers are not supported.'); } specifications specification status comment service workersthe definition of 'serviceworkerregistration' in that specification.

Using DTMF with WebRTC - Web APIs
initialization when the page loads, we do some basic setup: we fetch references to the dial button and the log output box elements, and we use addeventlistener() to add an event listener to the dial button so that clicking it calls the connectanddial() function to begin the connection process.
... window.addeventlistener("load", function() { logelement = document.queryselector(".log"); dialbutton = document.queryselector("#dial"); dialbutton.addeventlistener("click", connectanddial, false); }); starting the connection process when the dial button is clicked, connectanddial() is called.
...the event listener for these is implemented as the handletonechangeevent() function.
...we could simply have not set up these event listeners at all.

Using the Web Animations API - Web APIs
nommingcake.play(); } when a user holds their mouse down or presses their finger on the cake on a touch screen, we can now call growalice to make all the animations play: cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); other useful methods in addition to pausing and playing, we can use the following animation methods: animation.finish() skips to the end of the animation.
...this is because the bottle changes her animation’s playbackrate from 1 to -1: var shrinkalice = function() { alicechange.playbackrate = -1; alicechange.play(); } bottle.addeventlistener("mousedown", shrinkalice, false); bottle.addeventlistener("touchstart", shrinkalice, false); in through the looking-glass, alice travels to a world where she must run to stay in place — and run twice as fast to move forward!
...ke sure the playback rate never falls below .4 if (redqueen_alice.playbackrate > .4) { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * .9); } }, 3000); but urging them on by clicking or tapping causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.updateplaybackrate(redqueen_alice.playbackrate * 1.1); } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); the background elements also have playbackrates that are impacted when you click or tap.
... callbacks and promises css animations and transitions have their own event listeners, and these are also possible with the web animations api: onfinish is the event handler for the finish event and can be triggered manually with finish().

Using the Web Audio API - Web APIs
// select our play button const playbutton = document.queryselector('button'); playbutton.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audiocontext.state === 'suspended') { audiocontext.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (this.dataset.playing === 'true') { audioeleme...
...our htmlmediaelement fires an ended event once it's finished playing, so we can listen for that and run code accordingly: audioelement.addeventlistener('ended', () => { playbutton.dataset.playing = 'false'; }, false); modifying sound let's delve into some basic modification nodes, to change the sound that we have.
... so let's grab this input's value and update the gain value when the input node has its value changed by the user: const volumecontrol = document.queryselector('#volume'); volumecontrol.addeventlistener('input', function() { gainnode.gain.value = this.value; }, false); note: the values of node objects (e.g.
...again let's use a range type input to vary this parameter: <input type="range" id="panner" min="-1" max="1" value="0" step="0.01"> we use the values from that input to adjust our panner values in the same way as we did before: const pannercontrol = document.queryselector('#panner'); pannercontrol.addeventlistener('input', function() { panner.pan.value = this.value; }, false); let's adjust our audio graph again, to connect all the nodes together: track.connect(gainnode).connect(panner).connect(audiocontext.destination); the only thing left to do is give the app a try: check out the final demo here on codepen.

WindowEventHandlers.onhashchange - Web APIs
syntax using an event handler: window.onhashchange = funcref; using an html event handler: <body onhashchange="funcref();"> using an event listener: to add an event listener, use addeventlistener(): window.addeventlistener("hashchange", funcref, false); parameters funcref a reference to a function.
... function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; using an event listener this example uses an event listener to log a notification whenever the hash has changed.
... function hashhandler() { console.log('the hash has changed!'); } window.addeventlistener('hashchange', hashhandler, false); overriding the hash this function sets a new hash dynamically, setting it randomly to one of two values.
... polyfill for event.newurl and event.oldurl // let this snippet run before your hashchange event binding code if (!window.hashchangeevent)(function(){ var lasturl = document.url; window.addeventlistener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status comment html living standardthe definition of 'onhashchange' in ...

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
the cross-platform nsdocaccessible and nsrootaccessible classes they inherit from are then told to start listening for dom, page load and scroll events.
... when a potential accessibility-related event occurs within mozilla, it is typically listened for by nsdocaccessible or nsrootaccessible.
... the event listeners on these classes call firetoolkitevent(), which is implemented for every accessible.
...accessibility aids use the win32 call setwineventhook() to register as a listener for these events.

Media buffering, seeking, and time ranges - Developer guides
cument.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); context.stroke(); } }); } this works bet...
... height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; ...
... break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.
...for example: var played = audio.played; // returns a timeranges object this could be useful for establishing the parts of your media that are most listened to or watched.

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.
... htmlmediaelement.videotracks add an addtrack listener to this videotracklist object to be informed when video tracks are added to the element.
... htmlmediaelement.texttracks add an addtrack event listener to this texttracklist to be notified when new text tracks are added to the element.
... you can also use addeventlistener() to listen for the addtrack and removetrack events.

<video>: The Video Embed element - HTML: Hypertext Markup Language
you can add a listener for addtrack to this object to be alerted when new audio tracks are added to the element.
... htmlmediaelement.videotracks add an addtrack listener to this videotracklist object to be informed when video tracks are added to the element.
... htmlmediaelement.texttracks add an addtrack event listener to this texttracklist to be notified when new text tracks are added to the element.
... you can also use addeventlistener() to listen for the addtrack and removetrack events.

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... to receive push messages, we can listen to the push event in the service worker file: self.addeventlistener('push', function(e) { /* ...
...req.body.ttl }; settimeout(function() { webpush.sendnotification(subscription, payload, options) .then(function() { res.sendstatus(201); }) .catch(function(error) { console.log(error); res.sendstatus(500); }); }, req.body.delay * 1000); }); }; service-worker.js the last file we will look at is the service worker: self.addeventlistener('push', function(event) { const payload = event.data ?
... event.data.text() : 'no payload'; event.waituntil( self.registration.shownotification('serviceworker cookbook', { body: payload, }) ); }); all it does is add a listener for the push event, create the payload variable consisting of the text taken from the data (or create a string to use if data is empty), and then wait until the notification is shown to the user.

Creating annotations - Archive of obsolete content
off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event.
... the page-mod matches all pages, so each time the user loads a page the page-mod emits the attach event, which will call the listener function we've assigned to onattach.
... annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return key and when it is pressed, send the contents of the text area to the add-on.

Modifying Web Pages Based on URL - Archive of obsolete content
to send a message from one side to the other, sender calls port.emit() and receiver listens using port.on().
... in the add-on script, you need to listen for the onattach event to get passed a worker object that contains port.
... the content script now needs to look like this: // "self" is a global object in content scripts // listen for a message, and replace the document's // contents with the message payload.

Bookmarks - Archive of obsolete content
var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitemadded: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: fun...
...ction() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...

HTML to DOM - Archive of obsolete content
main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnavigation.allowimages = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settime...
...if (donkeybrowser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
... the most interesting piece of code here is the domcontentloaded event listener we define for the element.

JavaScript Daemons Management - Archive of obsolete content
mydaemon.onstart the start listener (read/write).
... mydaemon.onstop the stop listener (read/write).
...if it exists a stop listener will be called with three arguments: index (the iterative index of each invocation), length (the number of total invocations assigned to the daemon - finite or infinity), and backwards (a boolean expressing whether the process is going backwards or not).

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.browseroverlay.init(); }, false); then all we need is some persistent flag that ensures that the first run code is only run once.
... so, in order to detect the first stage, you'll need to add an event listener using the addaddonlistener method.
...so, you should listen to other events, like canceling the operation, to make sure that you know what is going on.

Index of archived content - Archive of obsolete content
the widget overview storing annotations chrome authority creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) ...
...service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous modules on page load page loading post data to window preferences progress listeners queryselector rosetta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets ...
... snackbars.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 shoul...

Monitoring WiFi access points - Archive of obsolete content
erhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = "<p>" + count++ + "</p>"; }, onerror: function (value) { alert("error: " +value); }, queryinterface: function(iid) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); if (iid.equals(components.interfaces.nsiwifilistener) || iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var listener = new test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].getservice(components.interfaces.nsiwifimonitor); wifi_service.s...
...tartwatching(listener); </script> </head> <body> <div id="d"><p></p></div> <div id="c"><p></p></div> </body> </html> the nsiwifilistener object the first thing the code above does is to prototype the listener object that will be receiving notifications of changes to the access point list.
...starting to monitor access points to start monitoring the access points, we instantiate the listener (on line 44), then get access to the wifi monitor interface on line 45.

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.
... function footracker(name) { tracker.call(this, name); // register yourself as event listener or observer for whatever // you want to track.

Introducing the Audio API extension - Archive of obsolete content
o-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the mozaudioavailable event as the audio is played, sample data is made available to the audio layer and the audio buffer (size defined in mozframebufferlength) gets filled with those samples.
...th; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.time; var text = "samples at: " + t + "\n"; text += framebuffer[0] + " " + framebuffer[1]; raw.innerhtml = text; } var raw = document.getelementbyid('raw'); var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> creating an audio stream it is also possible to create and setup an <audio> element for raw writing from script (i.e., without a src attribute).
... a2.mozsetup(a1.mozchannels, a1.mozsamplerate); } function audioavailable(event) { // write the current framebuffer var framebuffer = event.framebuffer; writeaudio(framebuffer); } a1.addeventlistener('mozaudioavailable', audioavailable, false); a1.addeventlistener('loadedmetadata', loadedmetadata, false); function writeaudio(audio) { buffers.push(audio); // if there's buffered data, write that while(buffers.length > 0) { var buffer = buffers.shift(); var written = a2.mozwriteaudio(buffer); // // if all data wasn't written, keep it in the buffers: if(written < buffer.

JavaScript crypto - Archive of obsolete content
handling smart card events web sites can make themselves more smartcard friendly by listening for smartcard insertion and removal events.
...you can then register event handlers for these events with the document.addeventlistener() method.
...<script> function onsmartcardchange() { window.location.reload(); } function register() { window.crypto.enablesmartcardevents = true; document.addeventlistener("smartcard-insert", onsmartcardchange, false); document.addeventlistener("smartcard-remove", onsmartcardchange, false); } function deregister() { document.removeeventlistener("smartcard-insert", onsmartcardchange, false); document.removeeventlistener("smartcard-remove", onsmartcardchange, false); } document.body.onload = register; document.body.onunload = deregister; </script> with the...

The life of an HTML HTTP request - Archive of obsolete content
for html document this is an nsparser, which also implements nsistreamlistener.
... this streamlistener is returned to the documentloader and connected to the nsichannel of the request.
...the parser then parses the stream it gets via its streamlistener interface and converts it to nsiparsernodes which it places in the contentsink.

Extensions - Archive of obsolete content
showing and hiding context menu items to have a menuitem you have added be shown or hidden based on the context, you can use an event handler that listens for the popupshowing event.
... function init() { var contextmenu = document.getelementbyid("contentareacontextmenu"); if (contextmenu) contextmenu.addeventlistener("popupshowing", thumbnailsshowhideitems, false); } function thumbnailsshowhideitems(event) { var show = document.getelementbyid("thumbnail-show"); show.hidden = (document.popupnode.localname != "img"); } the init function should be called within the handler for the load event so that the popupshowing event handler is hooked up before it would be opened by the user.
... determining what element was context clicked for general information about how to determine which element was the target of the context menu, that is, the element that was context clicked, see determining what was context clicked firefox uses its own popupshowing event listener to adjust the items on the context menu.

Menus - Archive of obsolete content
in this example, a command event listener is attached to the item using the oncommand attribute.
...the example below has the same effect as the previous example, however it uses a command element instead of listening to the command event directly.
... if you wish to have slight differences between each window, one possibility is to show or hide menu items in a load event listener.

OpenClose - Archive of obsolete content
if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener.
...attaching an event listener which listens for the popuphiding event can be used to remove any commands that were adding during the popupshowing event.
...here is an example mouse click event listener: function mouseclicked(event) { var panel = document.getelementbyid("some-panel"); panel.openpopup(null, "", event.clientx, event.clienty, false, false); } the openpopupatscreen method a second method, openpopupatscreen, may be used to open up a popup and place it at a specific screen coordinate.

Focus and Selection - Archive of obsolete content
you can also add event handlers dynamically using the dom function addeventlistener.
...example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <button label="hello"/> <checkbox label="remember this decision"/> <label id="focused" value="-no focus-...
...we want to use a capturing event handler, so the addeventlistener method needs to be used.

Updating Commands - Archive of obsolete content
a command updater will listen for these situations and code can be executed which enables and disables commands as necessary.
...the events attribute is used to list the events that the command updater listens for.
...in the example above, the command updater listens for the focus event.

colorpicker - Archive of obsolete content
overview an onchange attribute is an event listener to the object for the event change.
... value property gets and sets color attribute methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsidomxulcontrolelement bugs the onchange event only fires if attribute type is set to "button".

command - 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.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related xul:list of commands ...

key - Archive of obsolete content
in order to use (non-default) key commands within specific elements, you will need to listen for key events.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata details on key, keycode, and modifiers attributes for example, consider the following key: <key key="r" modifiers="shift"/> this key will only match when the shift key is pressed as well as the r key, and no other keys.

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.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata ...

preference - Archive of obsolete content
overview an onchange attribute is an event listener to the object for the event change.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), 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.

textbox - Archive of obsolete content
a listener for the command event should update search results.
... inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata style classes the following classes may be used to style the element.

window - Archive of obsolete content
listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes.
...llowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(), getelementsbyattribute, getelementsbyattributens, getelementsbyclassname(), getelementsbytagname(), getelementsbytagnamens(), getfeature, getuserdata, hasattribute(), hasattr...
...ibutens(), hasattributes(), haschildnodes(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata see also: dom window object methods note the error message "xml parsing error: undefined entity...<window" can be caused by a missing or unreachable dtd file referenced in the xul file.

Desktop mouse and keyboard controls - Game development
first, we'd need an event listener to listen for the pressed keys: document.addeventlistener('keydown', keydownhandler, false); document.addeventlistener('keyup', keyuphandler, false); whenever any key is pressed down, we're executing the keydownhandler function, and when press finishes we're executing the keyuphandler function, so we know when it's no longer pressed.
... to do that we'll hold the information on whether the keys we are interested in are pressed or not: var rightpressed = false; var leftpressed = false; var uppressed = false; var downpressed = false; then we will listen for the keydown and keyup events and act accordingly in both handler functions.
... to skip the how to play screen, we can listen for any key being pressed and move on: this.input.keyboard.ondowncallback = function() { if(this.statestatus == 'intro') { this.hideintro(); } }; this hides the intro and starts the actual game, without us having to set up another new key control just for this.

Implementing controls using the Gamepad API - Game development
next, we set up two event listeners to get the data: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); due to security policy, you have to interact with the controller first while the page is visible for the event to fire.
... detecting button presses the buttonpressed() method is also placed in the main game loop to listen for button presses.
... it takes two parameters — the button we want to listen to and the (optional) way to tell the game that holding the button is accepted.

Example 4 - Learn web development
value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { op...
...tion.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function...
... (option, index) { option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); }); result ...

Graceful asynchronous programming with Promises - Learn web development
at their most basic, promises are similar to event listeners, but with a few differences: a promise can only succeed or fail once.
... note: the way that a .then() block works is similar to when you add an event listener to an object using addeventlistener().
...the most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.

Introduction to web APIs - Learn web development
tn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it } e...
...lse if (this.getattribute('class') === 'playing') { audioelement.pause(); this.setattribute('class', 'paused'); this.textcontent = 'play'; } }); // if track ends audioelement.addeventlistener('ended', function() { playbtn.setattribute('class', 'paused'); playbtn.textcontent = 'play'; }); note: some of you may notice that the play() and pause() methods being used to play and pause the track are not part of the web audio api; they are part of the htmlmediaelement api, which is different but closely-related.
... next, we create a gainnode object using the audiocontext.creategain() method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed: const gainnode = audioctx.creategain(); volumeslider.addeventlistener('input', function() { gainnode.gain.value = this.value; }); the final thing to do to get this to work is to connect the different nodes in the audio graph up, which is done using the audionode.connect() method available on every node type: audiosource.connect(gainnode).connect(audioctx.destination); the audio starts in the source, which is then connected to the gain node so the audio's volume can be adjusted.

Third-party APIs - Learn web development
add the following line to your javascript, below the "// event listeners to control the functionality" comment.
... searchform.addeventlistener('submit', submitsearch); now add the submitsearch() and fetchresults() function definitions, below the previous line: function submitsearch(e) { pagenumber = 0; fetchresults(e); } function fetchresults(e) { // use preventdefault() to stop the form submitting e.preventdefault(); // assemble the full url url = baseurl + '?api-key=' + key + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== '') { url += '&begin_date=' + startdate.value; }; if(enddate.value !== '') { url += '&end_date=' + enddate.value; }; } submitsearch() sets the page number back to 0 to begin with, then c...
... below the existing addeventlistener() call, add these two new ones, which cause the nextpage() and previouspage() functions to be invoked when the relevant buttons are clicked: nextbtn.addeventlistener('click', nextpage); previousbtn.addeventlistener('click', previouspage); below your previous addition, let's define the two functions — add this code now: function nextpage(e) { pagenumber++; fetchresults(e); }; ...

Dynamic behavior in Svelte: working with variables and props - Learn web development
svelte has the on:eventname directive for listening to dom events.
...reactivity in svelte is implemented in a very lightweight and performant way, without using listeners, setters, getters, or any other complex mechanism.
... listening to dom events.

HTML parser threading
actual network data is passed to an nsistreamlistener.
... nshtml5streamparser is the nsistreamlistener implementation obtained by calling nsistreamlistener* nshtml5parser::getstreamlistener().
... the nsistreamlistener methods (onstartrequest, ondataavailable and onstoprequest) are called on the main thread.

IME handling guide
editor/libeditor mozilla::editoreventlistener listens for trusted dom compositionstart, text and compositionend events and notifies mozilla::editorbase and mozilla::texteditor of the events.
... when imestatemanager in parent process is notified of pseudo focus move from or to menubar while a remote process has focus, it notifies the remote process of "menu keyboard listener installed".
... then, tabchild calls imestatemanager::oninstalledmenukeyboardlistener() in the remote process.

Addon
overview of required methods void iscompatiblewith(in string appversion, in string platformversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string platformversion) overview of optional methods void uninstall() void canceluninstall() boolean hasresource(in string path) nsiuri getresourceuri(in string path) void getdatadirectory(in datadirectorycallback callback) required properties attribute type descrip...
...this will perform asynchronously and deliver results to the given listener.
... void findupdates( in updatelistener listener, in integer reason, in string appversion, in string platformversion ) parameters listener an updatelistener for the update process reason a reason code for performing the update appversion an application version to check for updates for platformversion a platform version to check for updates for optional methods uninstall() uninstalls this add-on.

Investigating leaks using DMD heap scan mode
the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
... known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f08967e7b20 [js object (htmlscriptelement)] --[unwrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the eventlistenermanager 0x7f0899b4e550.
... "[via hash] mlistenermanager" is a description of that strong reference.

AsyncTestUtils extended framework
if you have the following types of listeners you can use the following pre-defined helpers: nsiurllistener: asyncurllistener (predefined).
... if you need to wrap an existing url listener or need a callback or fancy promise, create an instance of asyncurllistener.
... copy listener: asynccopylistener.

Nonblocking IO In NSPR
the potentially-blocking io functions include <tt>pr_connect()</tt>, <tt>pr_accept()</tt>, <tt>pr_acceptread()</tt>, <tt>pr_read()</tt>, <tt>pr_write()</tt>, <tt>pr_writev()</tt>, <tt>pr_recv()</tt>, <tt>pr_send()</tt>, <tt>pr_recvfrom()</tt>, <tt>pr_sendto()</tt>, and <tt>pr_transmitfile(),</tt> and do not include <tt>pr_bind()</tt> and <tt>pr_listen()</tt>.
...there is a second constraint, due to the use of nt asynchronous i/o and the recycling of used sockets: the new socket returned by <tt>pr_accept()</tt> or <tt>pr_acceptread()</tt> inherits the blocking/nonblocking io mode of the listening socket and this cannot be changed.
... the socket returned by <tt>pr_accept()</tt> or <tt>pr_acceptread()</tt> on a blocking, listening socket may be a recycled socket previously used in a <tt>pr_transmitfile()</tt> call.

Necko walkthrough
nsdocshell::internalload nsdocshell::douriload opens the nsichannel for the uri (ns_newchannel) if "http:", it will be an nsihttpchannel nsdocshell::dochannelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::openchannel - it creates an nsdocumentopeninfo object, which implements nsistreamlistener, i.e.
... receive response get a callback to each of these: nsistreamlistener::onstartrequest (header info) nsistreamlistener::ondataavailable (data in single or multiple chunks) nsistreamlistener::onstoprequest (no more data from http) this all happens on the main thread, in a non-blocking fashion: make your request on the main thread, then carry on and get the async response later, also on the main thread.
... these functions call nsistreamlistener::onstartrequest, nsistreamlistener::ondataavailable and nsistreamlistener::onstoprequest respectively.

Redis Tips
subscribe and unsubscribe attach and remove listeners to or from a channel.
...(press ctrl-c to quit) 1) "subscribe" 2) "message-channel" 3) (integer) 1 in the same way the blpopping redis-cli blocked, this redis-cli is not capable of doing anything but listen for messages.
... so if that's 0, you know nobody's listening.

Manipulating bookmarks using Places
var parentfolderid = bmsvc.getfolderidforitem(newbkmkid); observing changes to bookmarks and tags to set up an observer to listen for changes related to bookmarks, you will need to create an nsinavbookmarkobserver object and use the nsinavbookmarksservice.addobserver() and nsinavbookmarksservice.removeobserver() methods.
... // an nsinavbookmarkobserver var myext_bookmarklistener = { onbeginupdatebatch: function() {}, onendupdatebatch: function() {}, onitemadded: function(aitemid, afolder, aindex) {}, onitemremoved: function(aitemid, afolder, aindex) {}, onitemchanged: function(abookmarkid, aproperty, aisannotationproperty, avalue) { myextension.dosomething(); }, onitemvisited: function(abookmarkid, avisitid, time) {}, onitemmoved: function(aitemid, aoldparent, aoldindex, anewparent, anewindex) {}, queryinterface: xpcomutils.generateqi([components.interfaces.nsinavbookmarkobserver]) }; // an extension var myextension = { // this function is called when my add-on is loaded onload: fun...
...ction() { bmsvc.addobserver(myext_bookmarklistener, false); }, // this function is called when my add-on is unloaded onunload: function() { bmsvc.removeobserver(myext_bookmarklistener); }, dosomething: function() { alert("did something."); } }; see also nsinavbookmarksservice nsinavbookmarkobserver places using xpcom without chrome - bookmark observer ...

Components.utils.cloneInto
example this add-on script creates an object, clones it into the content window and makes it a property of the content window global: // add-on script var addonscriptobject = {"greeting" : "hello from add-on"}; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow); scripts running in the page can now access the object: // page script button.addeventlistener("click", function() { console.log(window.addonscriptobject.greeting); // "hello from add-on" }, false); of course, you don't have to assign the clone to the window itself: you can assign it to some other object in the target scope: contentwindow.foo.addonscriptobject = cloneinto(addonscriptobject, contentwindow); you can also pass it into a function defined in the page script.
...nents.utils.exportfunction: // add-on script var addonscriptobject = { greetme: function() { alert("hello from add-on"); } }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {clonefunctions: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.addonscriptobject.greetme(); }, false); cloning objects that contain dom elements by default, if the object you clone contains objects that are reflected from c++, such as dom elements, the cloning operation will fail with an error.
...bject you clone is allowed to contain these objects: // add-on script var addonscriptobject = { body: contentwindow.document.body }; contentwindow.addonscriptobject = cloneinto(addonscriptobject, contentwindow, {wrapreflectors: true}); // page script var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(window.addonscriptobject.body.innerhtml); }, false); access to these objects in the target scope is subject to the normal security checks.

Components.utils.exportFunction
the exported function will affect the original object that was passed in: // privileged scope: for example, a content script function changemyname(user) { user.name = "bill"; } exportfunction(changemyname, contentwindow, { defineas: "changemyname" }); // less-privileged scope: for example, a page script var user = {name: "jim"}; var test = document.getelementbyid("test"); test.addeventlistener("click", function() { console.log(user.name); // "jim" window.changemyname(user); console.log(user.name); // "bill" }, false); note that this is subject to the normal rules of xrays: for example, an expando property added to a dom node will not be visible in the original object.
...ample, a content script function loguser(user) { // console.log(user.getuser()); // error console.log(user.wrappedjsobject.getuser()); // "bill" } exportfunction(loguser, contentwindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script var user = {getuser: function() {return "bill";}} var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(user); }, false); passing functions as arguments if functions are given as arguments, these are also passed as xrays.
...on just works, making the allowcallbacks option redundant: // privileged scope: for example, a content script function loguser(getuser) { console.log(getuser()); // "bill" } exportfunction(loguser, unsafewindow, { defineas: "loguser" }); // less-privileged scope: for example, a page script function getuser() { return "bill"; } var test = document.getelementbyid("test"); test.addeventlistener("click", function() { window.loguser(getuser); }, false); cross-origin checking when the exported function is called each argument, including this, is checked to make sure that the caller subsumes that argument.

imgILoader
ainitialdocumenturl, in nsiuri areferreruri, in nsiprincipal aloadingprincipal, in nsiloadgroup aloadgroup, in imgidecoderobserver aobserver, in nsisupports acx, in nsloadflags aloadflags, in nsisupports cachekey, in imgirequest arequest, in nsichannelpolicy channelpolicy); imgirequest loadimagewithchannel(in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener); boolean supportimagewithmimetype(in string mimetype); constants constant value description load_cors_anonymous 1 << 16 load_cors_use_credentials 1 << 17 methods loadimage() start the load and decode of an image.
...imgirequest loadimagewithchannel( in nsichannel achannel, in imgidecoderobserver aobserver, in nsisupports cx, out nsistreamlistener alistener ); parameters achannel the channel to load the image from.
...alistener a listener that you must send the channel's notifications and data to.

nsIDirIndexParser
netwerk/streamconv/public/nsidirindexlistener.idlscriptable a parser for 'application/http-index-format' directories.
... inherits from: nsistreamlistener last changed in gecko 1.7 called for each directory entry.
... listener nsidirindexlistener the interface to use as a callback for new entries.

nsIDocShell
parenturicontentlistener nsiuricontentlistener uri content listener parent.
... beginrestore() begin firing webprogresslistener notifications for restoring a page presentation.
...finishrestore() finish firing webprogresslistener notifications and dom events for restoring a page presentation.

nsIHttpServer
(not supported) * @param function callback optional callback */ listen: function(port, opt, callback) { if (arguments.length == 2 && "function" == typeof opt) { callback = opt; } if (callback) { this.registerprefixhandler("/", callback); } let host = "localhost"; if (typeof port === "string" && port.indexof(':') != -1){ [host, port] = port.split(':...
... }); }, close: function(){ server.stop(function(){}); }, get port() { return server.identity.primaryport } } } reference : mozilla-release/netwerk/test/httpserver/nsihttpserver.idl [scriptable, uuid(cea8812e-faa6-4013-9396-f9936cbb74ec)] interface nsihttpserver : nsisupports { /** * starts up this server, listening upon the given port.
... * * @param port * the port upon which listening should happen, or -1 if no specific port is * desired * @throws ns_error_already_initialized * if this server is already started * @throws ns_error_not_available * if the server is not started and cannot be started on the desired port * (perhaps because the port is already in use or because the process does * not have privileges to do so) * @note * behavior is undefined if this method is called after stop() has been * called on this but before the provided callback function has been * called.

nsIMacDockSupport
ocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) macmenu.appendchild(macmenuitem); var mainpopupset = win.document.getelementbyid('mainpopupset'); mainpopupset.appendchild(macmenu); let dockmenuelement = macmenu; //document.getelemen...
...this can be done by adding a event listenr for load of the hidden window.
...var macmenuitem = services.appshell.hiddendomwindow.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplication(true); services.wm.getmostrecentwindow(null).focus() }) services.appshell.hiddendomwindow.document.getelementbyid('menu_mac_dockmenu').appendchild(macmenuitem) this adds the "show most recent window" menuitem from the previous example as a third item.

nsIMessageSender
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsimessagelistenermanager message senders enable clients to send asynchronous messages to a single "other side".
...this invokes listeners who registered for messagename using a nsimessagelistenermanager.
... see nsimessagelistener::receivemessage() for the format of the data delivered to listeners.

nsIMessenger
ttachment); void saveallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string urlarray, [array, size_is(count)] in string displaynamearray, [array, size_is(count)] in string messageuriarray); void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontenttype, in nsiurllistener alistener); void detachattachment(in string contenttpe, in string url, in string displayname, in string messageuri, in boolean savefirst, [optional] in boolean withoutwarning); void detachallattachments(in unsigned long count, [array, size_is(count)] in string contenttypearray, [array, size_is(count)] in string urlarray, [array, size_is(count)] in string displaynamearray, [arr...
... void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontenttype, in nsiurllistener alistener); parameters afile the nsifile to save to.
... alistener an nsiurllistener to be notified when the file is saved.

nsIMsgFilterCustomAction
*/ /** * apply the custom action to an array of messages * * @param msghdrs array of nsimsgdbhdr objects of messages * @param actionvalue user-set value to use in the action * @param copylistener calling method (filtertype manual only) * @param filtertype type of filter being applied * @param msgwindow message window */ void apply(in nsiarray msghdrs /* nsimsgdbhdr array */, in autf8string actionvalue, in nsimsgcopyservicelistener copylistener, in nsmsgfiltertypetype filtertype, in nsimsgwindow msgwindow); /...
...if so, a copy listener must * be used to continue filter processing after the action.
...call onstopcopy when done * using the copylistener to continue.

nsIPrintingPrompt
xul dialog method overview void showpagesetup(in nsiprintsettings printsettings, in nsiobserver aobs); void showprintdialog(in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings); void showprogress(in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen); methods showpagesetup() shows the print progress dialog.
... void showprogress( in nsiwebbrowserprint webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen ); parameters webbrowserprint represents the document to be printed.
... webprogresslistener additional listener can be registered for progress notifications.

nsIProgressEventSink
notifications will cease once the channel calls its listener's onstoprequest method or once the channel is canceled (via nsirequest.cancel()).
... acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen().
... acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen().

nsIPushService
you can use the global nsiobserverservice to listen for these notifications.
... serviceworkerglobalscope.onpushsubscriptionchange please make sure you listen for push-subscription-change.
... if the subscription is lost, and your code isn't listening for this notification, you won't be able to receive messages until you create a new subscription.

nsIResumableChannel
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void asyncopenat(in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid); obsolete since gecko 1.8 void resumeat(in unsigned long long startpos, in acstring entityid); attributes attribute type description entityid acstring the entity id for this uri.
...the request given to the nsistreamlistener will be qiable to nsiresumableinfo.
... void asyncopenat( in nsistreamlistener listener, in nsisupports ctxt, in unsigned long startpos, in nsiresumableentityid entityid ); parameters listener as for asyncopen.

nsIWorkerScope
1.0 66 introduced gecko 1.9.1 inherits from: nsiworkerglobalscope last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void postmessage(in domstring amessage, [optional] in nsiworkermessageport amessageport); void close(); attributes attribute type description onclose nsidomeventlistener a listener object to be called when the worker stops running.
... onmessage nsidomeventlistener a listener object to be called when a message is posted on the port.
...if a listener has been established by setting the value of the onclose attribute, it gets called.

Setting HTTP request headers
var headername = "x-hello"; var headervalue = "world"; function log(text) { // var consoleservice = components.classes["@mozilla.org/consoleservice;1"].getservice(components.interfaces.nsiconsoleservice); // consoleservice.logstringmessage(text); } function myhttplistener() { } myhttplistener.prototype = { observe: function(subject, topic, data) { if (topic == "http-on-modify-request") { log("----------------------------> (" + subject + ") mod request"); var httpchannel = subject.queryinterface(components.interfaces.nsihttpchannel); httpchannel.setrequestheader(headername, headervalue, false); return; }...
...service(components.interfaces.nsicategorymanager); catmgr.addcategoryentry("app-startup", this.myname, this.myprogid, true, true); }, getclassobject: function (compmgr, cid, iid) { log("----------------------------> getclassobject"); return this.myfactory; }, mycid: components.id("{9cf5f3df-2505-42dd-9094-c1631bd1be1c}"), myprogid: "@dougt/myhttplistener;1", myname: "simple http listener", myfactory: { queryinterface: function (aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsifactory)) throw components.results.ns_error_no_interface; return this; }, createinstance: function (outer, iid) { log...
...("----------------------------> createinstance"); return new myhttplistener(); } }, canunload: function(compmgr) { return true; } }; function nsgetmodule(compmgr, filespec) { return mymodule; } privacy and security good practice a use case for setting specific a http request header is to have a specific web site be able to check if a specific plugin / addon / extension is installed.

Address Book examples
load and save listeners edit dialogs for both contacts and mailing lists expose functions for registering load and save listeners.
... for example, in order to register a load listener for a contact, the following should take place within the scope of the contact editor dialog: /* an example load listener for a contact * acard the nsiabcard being loaded * adocument a reference to the contact editor document */ function foo(acard, adocument) { // do something useful, like disabling // input fields that cards for this // address book type do not support.
... } registerloadlistener(foo); save listeners are functions that take the same parameters, and can be registered with: registersavelistener(foo); load and save listeners can be unregistered using unregisterloadlistener(foo) and unregistersavelistener(foo), respectively.

Address book sync client design
this interface is defined in mozilla/mailnews/addrbook/public/nsiabsyncdriver.idl #include "nsrootidl.idl" #include "nsiabsynclistener.idl" [scriptable, uuid(91fdfee1-efbc-11d3-8f97-000073757374)] interface nsiabsyncdriver : nsiabsynclistener { void kickit(); }; as you can see, this is a very simple interface which allows for the starting of the address book sync operation.
... the interface of greater interest is the address book sync listener.
...this interface is as follows: #include "nsisupports.idl" #include "nsrootidl.idl" #include "nsifilespec.idl" [scriptable, uuid(e0ed29e0-098a-11d4-8fd6-00a024a7d144)] interface nsiabsynclistener : nsisupports { /** * notify the observer that the ab sync authorization operation has begun.

Autoconfiguration in Thunderbird
in the apache configuration files, that means something like: listen 10.2.3.4:80 (of course, you use a public ip address that you own) <virtualhost 10.2.3.4:80> #must be the first and only virtual host with this ip!
...either, you can redirect them to a common hostname: server { listen 10.2.3.4:80; #use your server's public ip here!
... server_name autoconfig.*; return 301 http://autoconfig.hoster.com$request_uri; } or serve them directly from a common directory: server { listen 10.2.3.4:80; #again, use your server's public ip here!

Building a Thunderbird extension 6: Adding JavaScript
window.addeventlistener("load", function(e) { startup(); }, false); window.setinterval( function() { startup(); }, 60000); //update date every minute function startup() { var mypanel = document.getelementbyid("my-panel"); var date = new date(); var day = date.getday(); var datestring = date.getfullyear() + "." + (date.getmonth()+1) + "." + date.getdate(); mypanel.label = "date: " + datestring; } the first...
... part registers a new event listener that will be executed automatically when thunderbird loads.
... the event listener then calls our startup function which gets our <statusbarpanel>-element with the id my-panel from the document's dom tree.

Index - Firefox Developer Tools
61 examine event listeners guide, inspector, tools the inspector shows the word "event" next to elements in the html pane, that have event listeners bound to them: 62 examine and edit css guide, inspector, tools you can examine and edit css in the inspector's css pane.
...to turn on the feature: 136 set event listener breakpoints debugger, dev tools, event debugging, event handler, event listener, javascript debugging, tools, breakpoint, events starting with firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler.
...the web console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab.

Intensive JavaScript - Firefox Developer Tools
main thread code would look something like this: const iterations = 50; const multiplier = 1000000000; var worker = new worker("js/calculate.js"); function dopointlesscomputationsinworker() { function handleworkercompletion(message) { if (message.data.command == "done") { pointlesscomputationsbutton.disabled = false; console.log(message.data.primes); worker.removeeventlistener("message", handleworkercompletion); } } worker.addeventlistener("message", handleworkercompletion, false); worker.postmessage({ "multiplier": multiplier, "iterations": iterations }); } the main difference here, compared with the original, is that we need to: create a worker send it a message when we are ready to calculate listen for a message called "done", which ind...
... then we need a new file "calculate.js", that looks like this: self.addeventlistener("message", go); function go(message) { var iterations = message.data.iterations; var multiplier = message.data.multiplier; primes = calculateprimes(iterations, multiplier); self.postmessage({ "command":"done", "primes": primes }); } function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } return pr...
...imes; } in the worker, we have to listen for a message telling us to start, and send a "done" message back when we are done.

AbortSignal - Web APIs
events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...this associates the signal and controller with the fetch request and allows us to abort it by calling abortcontroller.abort(), as seen below in the second event listener.
... var controller = new abortcontroller(); var signal = controller.signal; var downloadbtn = document.queryselector('.download'); var abortbtn = document.queryselector('.abort'); downloadbtn.addeventlistener('click', fetchvideo); abortbtn.addeventlistener('click', function() { controller.abort(); console.log('download aborted'); }); function fetchvideo() { ...

Battery Status API - Web APIs
this is done by listening for the chargingchange, levelchange, chargingtimechange, dischargingtimechange events.
... navigator.getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.addeventlistener('chargingchange', function(){ updatechargeinfo(); }); function updatechargeinfo(){ console.log("battery charging?
..."yes" : "no")); } battery.addeventlistener('levelchange', function(){ updatelevelinfo(); }); function updatelevelinfo(){ console.log("battery level: " + battery.level * 100 + "%"); } battery.addeventlistener('chargingtimechange', function(){ updatecharginginfo(); }); function updatecharginginfo(){ console.log("battery charging time: " + battery.chargingtime + " seconds"); } battery.addeventlistener('dischargingtimechange', function(){ updatedischarginginfo(); }); function updatedischarginginfo(){ console.log("battery discharging time: " + battery.dischargingtime + " seconds"); } }); see also the example in the specification.

BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element.
...sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .5rem 0; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeven...
...tlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...

Manipulating video using canvas - Web APIs
this method's job is to prepare the variables needed by the chroma-key processing code, and to set up an event listener so we can detect when the user starts playing the video.
... var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements.
... then addeventlistener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video.

Pixel manipulation with canvas - Web APIs
yle.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick); painting pixel data into a context you can use the putimagedata() method to paint pixel data into a context: ctx.putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
...putimagedata(imagedata, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putimagedata(imagedata, 0, 0); }; var invertbtn = document.getelementbyid('invertbtn'); invertbtn.addeventlistener('click', invert); var grayscalebtn = document.getelementbyid('grayscalebtn'); grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details.
... var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesmoothingenabled = this.checked; zoomctx.webkitimagesmoothingenabled = this.checked; zoomctx.msimagesmoothingenabled = this.checked; }; smoothbtn.addeventlistener('change', togglesmoothing); var zoom = function(event) { var x = event.layerx; var y = event.layery; zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); }; canvas.addeventlist...

CustomEvent - Web APIs
event.composedpath() returns the event’s path (objects on which listeners will be invoked).
... event.stopimmediatepropagation() for this particular event, prevent all other listeners from being called.
... this includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).

DataTransfer.clearData() - Web APIs
</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventli...
...stener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.innerhtml = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...rhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; // change border to signify drag is no longer in process event.currenttarget.style.border = '1px solid black'; if (dropped) { // remove all event listeners draggable.removeeventlistener('dragstart', dragstarthandler); draggable.removeeventlistener('dragend', dragendhandler); dropable.removeeventlistener('dragover', dragoverhandler); dropable.removeeventlistener('dragleave', dragleavehandler); dropable.removeeventlistener('drop', drophandler); } } function dragoverhandler (event) { status.innerhtml = 'dro...

Document: animationcancel event - Web APIs
you can listen for this event on the document interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the animationcancel event.
... document.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener(): document.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.

Document: drag event - Web APIs
</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...
...f (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment html living standardthe definition of 'drag event' in that specification.

Document: keyup event - Web APIs
to ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples this example logs the keyboardevent.code value whenever you release a key.
... addeventlistener keyup example <p>focus the iframe first (e.g.
... by clicking in it), then try pressing some keys.</p> <p id="log"></p> const log = document.getelementbyid('log'); document.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent document.onkeyup = logkey; specifications specification status ui events working draft ...

Examples of web and XML development using the DOM - Web APIs
when the body of this html document loads, an event listener is registered with the top row of the table.
... the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the table.
... ev.stoppropagation(); alert("event propagation halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.addeventlistener("click", stopevent, false); } </script> </head> <body onload="load();"> <table id="t-daddy" onclick="alert('hi');"> <tr id="tbl1"> <td id="c1">one</td> </tr> <tr> <td id="c2">two</td> </tr> </table> </body> </html> example 6: getcomputedstyle this example demonstrates how the window.getcomputedstyle method can be used to get the styles of an element that are not set using ...

Comparison of Event Targets - Web APIs
there are five targets to consider: property defined in purpose event.target dom event interface the dom element on the lefthand side of the call that triggered this event, eg: element.dispatchevent(event) event.currenttarget dom event interface the eventtarget whose eventlisteners are currently being processed.
... min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class="non-standard">if there was a retargetting of the event for some reason <small> event.explicitoriginaltarget</small> contains the target before retargetting (never contains anonymous target...
...latedtarget; document.getelementbyid('explicitoriginaltarget').innerhtml = e.explicitoriginaltarget; document.getelementbyid('originaltarget').innerhtml = e.originaltarget; } function handlemouseover(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; } document.addeventlistener('click', handleclicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.

Event.preventDefault() - Web APIs
the event continues to propagate as usual, unless one of its event listeners calls stoppropagation() or stopimmediatepropagation(), either of which terminates propagation at once.
...this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
...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...

Event.stopImmediatePropagation() - Web APIs
the stopimmediatepropagation() method of the event interface prevents other listeners of the same event from being called.
... if several listeners are attached to the same element for the same event type, they are called in the order in which they were added.
... if stopimmediatepropagation() is invoked during one such call, no remaining listeners will be called.

EventSource - Web APIs
to listen to named events, you'll require a listener for each type of event sent.
... const sse = new eventsource('/api/v1/sse'); /* this will listen only for events * similar to the following: * * event: notice * data: useful data * id: someid * */ sse.addeventlistener("notice", function(e) { console.log(e.data) }) /* similarly, this will listen for events * with the field `event: update` */ sse.addeventlistener("update", function(e) { console.log(e.data) }) /* the event "message" is a special case, as it * will capture events without an event field * as well as events that have the specific type * `event: message` it will not trigger on any * other event type.
... */ sse.addeventlistener("message", function(e) { console.log(e.data) }) specifications specification status html living standardthe definition of 'eventsource' 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.
... fontfaceset.onloadingdone an eventlistener called whenever an event of type loadingdone is fired, indicating that a font face set has finished loading.
... fontfaceset.onloadingerror an eventlistener called whenever an event of type loadingerror is fired, indicating that an error occurred whilst loading a font-face set.

Using FormData Objects - Web APIs
32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.innerhtml = "uploaded!"; } else { ooutput.innerhtml = "error " + o...
... typically this is used as shown in our simple formdata event demo — in the javascript we reference a form: const formelem = document.queryselector('form'); in our submit event handler we use preventdefault to stop the default form submission, then invoke a formdata constructor to trigger the formdata event: formelem.addeventlistener('submit', (e) => { // on form submission, prevent default e.preventdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); when the formdata event fires we can access the formdata object using formdataevent.formdata, then do what we like with it (below we post it to the server using xmlhttprequest).
... formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr let request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); note: the formdata event and formdataevent object are available in chrome from version 77 (and other equivalent chromiums), and firefox 72 (first available behind the dom.formdata.event.enabled pref in firefox 71).

HTMLElement: animationend event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationend examples this example gets an element that's being animated and listens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <div class="an...
...@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent...
... = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

HTMLElement: animationiteration event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationiteration examples this code uses animationiteration to keep track of the number of iterations an animation has completed: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.addeventlistener('animationiteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; li...
...frames slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent...
... = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

HTMLElement: animationstart event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationstart examples this listens for the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live exampl...
...frames slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent...
... = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...

IDBDatabase: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain...
...que: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of adde...
...ventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month:...

IDBRequest: error event - Web APIs
bubbles yes cancelable no interface event event handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data it...
...ems the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.addeventlistener('success', event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objects...
...torerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false });...

IDBTransaction: abort event - Web APIs
examples this example opens a database (creating the database if it does not exist), then opens a transaction, adds a listener to the abort event, then aborts the transaction to trigger the event.
...ectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.resu...
...ectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.onabort = (event) => { console.log('transaction was aborted'); }; // abort the transaction transaction.abort(); }; ...

IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore...
....createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database cons...
...ectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.oncomplete = event => { console.log('transaction was competed'); }; const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; ...

Timing element visibility with the Intersection Observer API - Web APIs
setting up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(); r...
...then we set up an event listener for the visibilitychange event.
...therefore, we need to pause our timers while the page is tabbed out; hence this event listener.

MSCandidateWindowShow - Web APIs
syntax event property object.oncandidatewindowshow = handler; addeventlistener method object.addeventlistener("mscandidatewindowshow", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetinputcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getcan...
...developers could listen to them and shift the suggestion ui accordingly.

MessagePort: message event - Web APIs
to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received.textcontent = even...
...t.data; }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; }); specifications specification status html living standard living standard ...

MessagePort: messageerror event - Web APIs
to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages and message errors on it using code like this: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.addeventlistener('message', (event) => { received...
....textcontent = event.data; }); myport.addeventlistener('messageerror', (event) => { console.error(event.data); }); myport.start(); }); note that the listener must call messageport.start() before any messages will be delivered to this port.
... this is only needed when using the addeventlistener() method: if the receiver uses onmessage instead, start() is called implicitly: window.addeventlistener('message', (event) => { const myport = event.ports[0]; myport.onmessage = (event) => { received.textcontent = event.data; }; myport.onmessageerror = (event) => { console.error(event.data); }; }); specifications specification status html living standard living standard ...

MessagePort.onmessage - Web APIs
the onmessage event handler of the messageport interface is an eventlistener, called whenever an messageevent of type message is fired on the port — that is, when the port receives a message.
...the handlemessage handler then responds to a message being sent back from the iframe using onmessage, putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
... var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).

PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the depth axis (behind-in front of the listener).
...if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
... example the following example starts an oscillator and moves it in front of the listener after 1 second, behind the listener after 2 seconds, and back to the listener's position after 3 seconds.

PannerNode.refDistance - Web APIs
the refdistance property of the pannernode interface is a double value representing the reference distance for reducing volume as the audio source moves further from the listener – i.e.
... example this example demonstrates how different values of refdistance affect how the volume of a sound decays as it moves away from the listener.
... const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time, resulting in a decrease in volume (decay) const scheduletesttone = (refdistance, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.refdistance = refdistance; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.posit...

PaymentRequest.onshippingaddresschange - Web APIs
syntax paymentrequest.addeventlistener('shippingaddresschange', shippingaddresschangeevent => { ...
...to make sure an updated address is included when sending payment information to the server, you should add event listeners for a paymentrequest object after instantiation, but before the call to show().
...var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingaddresschange', function(evt) { evt.updatewith(new promise(function(resolve) { updatedetails(details, request.shippingaddress, resolve); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of clarity.

PaymentRequest.onshippingoptionchange - Web APIs
syntax paymentrequest.addeventlistener('shippingoptionchange', shippingoptionchangeevent => { ...
...to make sure an updated option is included when sending payment information to the server, you should add event listeners for a paymentrequest object after instantiation, but before the call to show().
...var request = new paymentrequest(supportedinstruments, details, options); // when user selects a shipping address request.addeventlistener('shippingaddresschange', e => { e.updatewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'inter...

Using the Payment Request API - Web APIs
const checkoutbutton = document.getelementbyid('checkout-button'); if (window.paymentrequest) { let request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment.
... the code looks something like this: checkoutbutton.addeventlistener('click', function() { var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); request.show().then(function(paymentresponse) { // here we would process the payment.
... }); the payment handler would include the following code: self.addeventlistener('canmakepayment', function(evt) { // pre-authorize here.

RTCDataChannel: bufferedamountlow event - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 65536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... then a listener is created for bufferedamountlow to refill the incoming data buffer any time its contents fall below 65536 bytes.
... you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.

RTCPeerConnection: iceconnectionstatechange event - Web APIs
bubbles no cancelable no interface event event handler property oniceconnectionstatechange one common task performed by the iceconnectionstatechange event listener: to trigger ice restart when the state changes to failed.
... examples an event handler for this event can be added using the rtcpeerconnection.oniceconnectionstatechange property or by using addeventlistener() on the rtcpeerconnection.
... pc.addeventlistener("iceconnectionstatechange", ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status comment webrtc 1.0: real-time communication between browsersth...

RTCTrackEvent - Web APIs
you can add a track event listener to be notified when the new track is available so that you can, for example, attach its media to a <video> element, using either rtcpeerconnection.addeventlistener() or the ontrack event handler property.
... example this simple example creates an event listener for the track event which sets the srcobject of the <video> element with the id videobox to the first stream in the list passed in the event's streams array.
... peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification.

Range.commonAncestorContainer - Web APIs
syntax rangeancestor = range.commonancestorcontainer; example in this example, we create an event listener to handle pointerup events on a list.
... the listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addeventlistener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight')...

Using server-sent events - Web APIs
for example, assuming the client script is on example.com: const evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.innerhtml = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do n...
... you can also listen for events with addeventlistener(): evtsource.addeventlistener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information.
...if this is specified, an event will be dispatched on the browser to the listener for the specified event name; the website source code should use addeventlistener() to listen for named events.

ServiceWorker - Web APIs
event handlers serviceworker.onstatechange read only an eventlistener property called whenever an event of type statechange is fired; it is basically fired anytime the serviceworker.state changes.
...the code listens for any change in the serviceworker.state and returns its value.
... { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { // logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function (e) { // logstate(e.target.state); }); } }).catch (function (error) { // something went wrong during registration.

ServiceWorkerGlobalScope.onpush - Web APIs
} self.addeventlistener('push', function(pushevent) { ...
...the data payload of the push message is available in the event object's data property (pushevent.data, which contains a pushmessagedata object.) self.addeventlistener('push', function(event) { if (!(self.notification && self.notification.permission === 'granted')) { return; } var data = {}; if (event.data) { data = event.data.json(); } var title = data.title || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.ad...
...deventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.

SharedWorker - Web APIs
abstractworker.onerror is an eventlistener that is called whenever an errorevent of type error bubbles through the worker.
...if the onmessage event is attached using addeventlistener, the port is manually started using its start() method: myworker.port.start(); when the port is started, both scripts post messages to the worker and handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = funct...
... onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); }); port.start(); // required when using addeventlistener.

SubtleCrypto.deriveBits() - Web APIs
y, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0, 5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely const generatealiceskeypair = window.crypto.subtle.gen...
...] ); const generatebobskeypair = window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false, ["derivebits"] ); promise.all([generatealiceskeypair, generatebobskeypair]).then(values => { const aliceskeypair = values[0]; const bobskeypair = values[1]; const derivebitsbutton = document.queryselector(".ecdh .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { // alice then generates a secret using her private key and bob's public key.
...st derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, 256 ); const buffer = new uint8array(derivedbits, 0, 5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { getderivedbits(); }); specifications specification status comment w...

VisualViewport - Web APIs
events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface.
... var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function resizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('resize', resizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport.
... bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.

Clearing by clicking - Web APIs
not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
... window.removeeventlistener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button.
... var canvas = document.queryselector("#canvas-view"); var button = document.queryselector("#color-switcher"); canvas.addeventlistener("click", switchcolor, false); button.addeventlistener("click", switchcolor, false); // a variable to hold the webglrenderingcontext.

Hello vertex attributes - Web APIs
x" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = docum...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxinwebglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxinwebglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); ...
...} var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array([0.0]), gl.static_draw); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.inner...

Scissor animation - Web APIs
n</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
... var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the browser window, vertical position in webgl is // measured from bottom to top.
... position = [0, gl.drawingbufferheight]; var button = document.queryselector("button"); var timer; function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").innerhtml = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold t...

Simple color animation - Web APIs
vas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
... var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong"); function startanimation(evt) { button.removeeventlistener(evt.type, startanimation, false); button.addeventlistener("click", stopanimation, false); verb.innerhtml="stop"; // setup animation loop by redrawing every second.
... drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); verb.innerhtml="start"; // stop animation by clearing the timer.

Basic concepts behind Web Audio API - Web APIs
spatialisations an audio spatialisation (handled by the pannernode and audiolistener nodes in the web audio api) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio.
... the listener's position is described using right-hand cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front.
... these respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another.

Example and tutorial: Simple synth keyboard - Web APIs
function setup() { notefreq = createnotetable(); volumecontrol.addeventlistener("change", changevolume, false); mastergainnode = audiocontext.creategain(); mastergainnode.connect(audiocontext.destination); mastergainnode.gain.value = volumecontrol.value; // create the keys; skip any that are sharp or flat; for // our purposes we don't need them.
... an event handler is established (by calling our old friend addeventlistener() to handle change events on the master gain control.
...e, octave, freq) { let keyelement = document.createelement("div"); let labelelement = document.createelement("div"); keyelement.classname = "key"; keyelement.dataset["octave"] = octave; keyelement.dataset["note"] = note; keyelement.dataset["frequency"] = freq; labelelement.innerhtml = note + "_{" + octave + "}"; keyelement.appendchild(labelelement); keyelement.addeventlistener("mousedown", notepressed, false); keyelement.addeventlistener("mouseup", notereleased, false); keyelement.addeventlistener("mouseover", notepressed, false); keyelement.addeventlistener("mouseleave", notereleased, false); return keyelement; } after creating the elements that will represent the key and its label, we configure the key's element by setting its class to "key" (which estab...

Window: animationcancel event - Web APIs
you can listen for this event on the window interface to handle it in the capture or bubbling phases.
... examples this code adds a listener to the animationcancel event.
... window.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); the same, but using the onanimationcancel property instead of addeventlistener(): window.onanimationcancel = () => { console.log('animation canceled'); }; see a live example of this event.

Window - Web APIs
methods implemented from elsewhere eventtarget.addeventlistener() register an event handler to a specific event type on the window.
... eventtarget.removeeventlistener removes an event listener from the window.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.

WindowEventHandlers.onbeforeunload - Web APIs
syntax window.addeventlistener("beforeunload", function(event) { ...
...}; typically, it is better to use window.addeventlistener() and the beforeunload event, instead of onbeforeunload.
... window.addeventlistener('beforeunload', function (e) { // cancel the event e.preventdefault(); // if you prevent default behavior in mozilla firefox prompt will always be shown // chrome requires returnvalue to be set e.returnvalue = ''; }); guarantee the browser unload by removing the returnvalue property of the event window.addeventlistener('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the browser unload happens delete e['returnvalue']; }); notes when your page uses javascript to render content, the javascript may stop when...

How to check the security state of an XMLHTTPRequest over SSL - Web APIs
me + "\n"); } let secinfo = channel.securityinfo; // print general connection security state dump("security information:\n"); if (secinfo instanceof ci.nsitransportsecurityinfo) { secinfo.queryinterface(ci.nsitransportsecurityinfo); dump("\tsecurity state of connection: "); // check security state flags if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_secure) == ci.nsiwebprogresslistener.state_is_secure) { dump("secure connection\n"); } else if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_insecure) == ci.nsiwebprogresslistener.state_is_insecure) { dump("insecure connection\n"); } else if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_broken) ...
... == ci.nsiwebprogresslistener.state_is_broken) { dump("unknown\n"); dump("\tsecurity description: " + secinfo.shortsecuritydescription + "\n"); dump("\tsecurity error message: " + secinfo.errormessage + "\n"); } } else { dump("\tno security info available for this channel\n"); } // print ssl certificate details if (secinfo instanceof ci.nsisslstatusprovider) { var cert = secinfo.queryinterface(ci.nsisslstatusprovider) .sslstatus.queryinterface(ci.nsisslstatus).servercert; dump("\tcommon name (cn) = " + cert.commonname + "\n"); dump("\tissuer = " + cert.issuerorganization + "\n"); dump("\torganisation = " + cert.organization + "\n"); dump("\tsha1 fingerprint = " + ...
... + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: connection status: succeeded security info: security state: secure comm...

Synchronous and asynchronous requests - Web APIs
this is a standard function which uses the xmlhttprequest object asynchronously in order to switch the content of the read file to a specified listener.
... window.addeventlistener('unload', logdata, false); function logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr.
... window.addeventlistener('unload', logdata, false); function logdata() { navigator.sendbeacon("/log", analyticsdata); } ...

XRSession: squeeze event - Web APIs
examples the following example uses addeventlistener() to set up a handler for the squeeze event.
...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...