Search completed in 1.81 seconds.
IDBDatabase.onversionchange - Web APIs
the onversi
onchange event handler of the idbdatabase interface handles the versi
onchange event, fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same computer).
... this is different from the versi
onchange transaction (but it is related).
... syntax idbdatabase.onversi
onchange = function(event) { ...
...And 4 more matches
IDBVersionChangeEvent - Web APIs
the idbversi
onchangeevent interface of the indexeddb api indicates that the version of the database has changed, as the result of an idbopendbrequest.onupgradeneeded event handler function.
... idbversi
onchangeevent.oldversion read only returns the old version of the database.
... idbversi
onchangeevent.newversion read only returns the new version of the database.
...And 4 more matches
PaymentRequest.onshippingoptionchange - Web APIs
the onshippingopti
onchange event of the paymentrequest interface is fired whenever the user changes a shipping option.
... syntax paymentrequest.addeventlistener('shippingopti
onchange', shippingopti
onchangeevent => { ...
... }); paymentrequest.onshippingopti
onchange = function(shippingopti
onchangeevent) { ...
...And 3 more matches
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
the pushsubscripti
onchange event is sent to the global scope of a serviceworker to indicate a change in push subscription that was triggered outside the application's control.
... bubbles no cancelable no interface pushsubscripti
onchangeevent event handler property onpushsubscripti
onchange usage notes although examples demonstrating how to share subscription related information with the application server tend to use fetch(), this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for example.
... examples this example, run in the context of a service worker, listens for a pushsubscripti
onchange event and re-subscribes to the lapsed subscription.
...And 3 more matches
AudioTrackList.onchange - Web APIs
the audiotracklist property
onchange is an event handler which is called when the change event occurs, indicating that one or more of the audiotracks in the audiotracklist have been enabled or disabled.
... syntax audiotracklist.
onchange = eventhandler; value set
onchange to a function that should be called whenever tracks are enabled or disabled on the media element.
... var tracklist = document.queryselector("video").audiotracks; tracklist.
onchange = function(event) { tracklist.foreach(function(track) { updatetrackenabledbutton(track.id, track.enabled); }); }; the updatetrackenabledbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's enabled flag to determine which state the control should be in now.
...And 2 more matches
GlobalEventHandlers.onselectionchange - Web APIs
the onselecti
onchange property of the globaleventhandlers mixin is an eventhandler that processes selecti
onchange events.
... the selecti
onchange event fires when the text selected on a webpage changes.
... syntax object.onselecti
onchange = functionref; value functionref is a function name or a function expression.
...And 2 more matches
GlobalEventHandlers.onchange - Web APIs
the
onchange property of the globaleventhandlers mixin is an eventhandler for processing change events.
... note: unlike oninput, the
onchange event handler is not necessarily called for each alteration to an element's value.
... syntax target.
onchange = functionref; functionref is a function name or a function expression.
... html <input type="text" placeholder="type something here, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.
onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specification specification status comment html living standardthe definition of '
onchange' in that specification.
GlobalEventHandlers.ondurationchange - Web APIs
the ondurati
onchange property of the globaleventhandlers mixin is the eventhandler for processing durati
onchange events.
... the durati
onchange event is fired when the duration attribute has been updated.
... syntax element.ondurati
onchange = handlerfunction; var handlerfunction = element.ondurati
onchange; handlerfunction is either null or a javascript function specifying the handler for the event.
... specification specification status comment html living standardthe definition of 'ondurati
onchange' in that specification.
HTMLMediaElement: durationchange event - Web APIs
the durati
onchange event is fired when the duration attribute has been updated.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ondurati
onchange specification html5 media examples these examples add an event listener for the htmlmediaelement's durati
onchange event, then post a message when that event handler has reacted to the event firing.
... using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('durati
onchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurati
onchange event handler property: const video = document.queryselector('video'); video.ondurati
onchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status html living standardthe definition of 'durati
onchange media event' in that specification.
... living standard html5the definition of 'durati
onchange media event' in that specification.
IDBDatabase: versionchange event - Web APIs
the versi
onchange event is fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested.
... bubbles no cancelable no interface event event handler property onversi
onchange examples this example opens a database and, on success, adds a listener to versi
onchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'mont...
...h', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.result; db.addeventlistener('versi
onchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversi
onchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('m...
...inutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.target.result; db.onversi
onchange = event => { console.log('the version of this database has changed'); }; }; ...
IDBVersionChangeRequest - Web APIs
the idbversi
onchangerequest interface the indexeddb api represents a request to change the version of a database.
... methods inherits from: idbrequest idbversi
onchangerequest.setversion updates the version of the database.
... returns immediately and runs a versi
onchange transaction on the connected database in a separate thread.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbversi
onchangerequest deprecatednon-standardchrome no support 12 — 23prefixed no support 12 — 23prefixed prefixed implemented with the vendor prefix: webkitedge ?
PaymentRequest: shippingoptionchange event - Web APIs
for payment requests that request shipping information, and for which shipping options are offered, the shippingopti
onchange event is sent to the paymentrequest whenever the user chooses a shipping option from the list of available options.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingopti
onchange examples this code snippet sets up a handler for the shippingopti
onchange event.
... paymentrequest.addeventlistener("shippingopti
onchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to compute the updated total based on the newly-selected shipping option as specified by the shippingoption.
... you can also create an event handler for shippingopti
onchange using its corresponding event handler property, onshippingopti
onchange: paymentrequest.onshippingopti
onchange = event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }; specifications specification status comment payment request apithe definition of 'shippingopti
onchange' in that specification.
Screen.onorientationchange - Web APIs
use screenorientation.
onchange instead.
... an event handler for the orientati
onchange events sent to the screen object.
... syntax screen.onorientati
onchange = funcref; where funcref is a reference to a function.
... specifications specification status comment screen orientation apithe definition of 'onorientati
onchange' in that specification.
ScreenOrientation.onchange - Web APIs
the
onchange property of the screenorientation is an event handler fired whenever is the eventhandler called when the screen changes orientation.
...}) screenorientation.
onchange = function(e) { ...
... } specifications specification status comment screen orientation apithe definition of '
onchange' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet
onchangechrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview ...
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
the serviceworkerglobalscope.onpushsubscripti
onchange event of the serviceworkerglobalscope interface is fired to indicate a change in push subscription that was triggered outside the application's control, e.g.
... syntax serviceworkerglobalscope.onpushsubscripti
onchange = function() { ...
... } self.addeventlistener('pushsubscripti
onchange', function() { ...
... }) example self.addeventlistener('pushsubscripti
onchange', function() { // do something, usually resubscribe to push and // send the new subscription details back to the // server via xhr or fetch }); specifications specification status comment push apithe definition of 'onpushsubscripti
onchange' in that specification.
TextTrackList.onchange - Web APIs
the texttracklist property
onchange is an event handler which is called when the change event occurs, indicating that a change has occurred on a texttrack in the videotracklist.
... syntax texttracklist.
onchange = eventhandler; example this snippet establishes a handler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track.
... var tracklist = document.queryselector("video, audio").texttracks; tracklist.
onchange = function(event) { ....
... /* do something */ }; specifications specification status comment html living standardthe definition of 'texttracklist:
onchange' in that specification.
VideoTrackList.onchange - Web APIs
the videotracklist property
onchange is an event handler which is called when the change event occurs, indicating that a videotrack in the videotracklist has been made active.
... syntax videotracklist.
onchange = eventhandler; value set
onchange to a function that should be called whenever a track is made active.
... var tracklist = document.queryselector("video").videotracks; tracklist.
onchange = function(event) { tracklist.foreach(function(track) { updatetrackselectedbutton(track.id, track.selected); }); }; the updatetrackselectedbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's selected flag to determine which state the control should be in now.
... specifications specification status comment html living standardthe definition of 'videotracklist:
onchange' in that specification.
onchange - Archive of obsolete content
« xul reference home overview an
onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below:
onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"
onchange="return myfunction(event);"/> </window> ...
IDBVersionChangeEvent.newVersion - Web APIs
the newversion read-only property of the idbversi
onchangeevent interface returns the new version number of the database.
... syntax var newversion = idbversi
onchangeevent.newversion value a 64-bit integer.
...these events are fired via the custom idbversi
onchangeevent interface.
IDBVersionChangeRequest.setVersion() - Web APIs
the idbversi
onchangerequest.setversion method updates the version of the database, returning immediately and running a versi
onchange transaction on the connected database in a separate thread.
... syntax idbversi
onchangerequest setversion ([treatnullas=emptystring] in domstring version); example tbd parameters version the version to store in the database.
... returns idbversi
onchangerequest the request to change the version of a database.
MediaQueryList.onchange - Web APIs
the
onchange property of the mediaquerylist interface is an event handler property representing a function that is invoked when the change event fires, i.e when the status of media query support changes.
... syntax mediaquerylist.
onchange = function() { ...
...ches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of '
onchange' in that specification.
NetworkInformation.onchange - Web APIs
the networkinformation.
onchange event handler contains the code that is fired when connection information changes, and the change is received by the networkinformation object.
... syntax netinfo.
onchange = function() { ...
...} // register for event changes: navigator.connection.
onchange = changehandler; // another way: navigator.connection.addeventlistener('change', changehandler); specifications specification status comment network information apithe definition of '
onchange' in that specification.
PermissionStatus.onchange - Web APIs
the
onchange event handler of the permissionstatus interface is called whenever the permissionstatus.state property changes.
... syntax permissionstatus.
onchange = function() { ...
...}) example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission state is ', permissionstatus.state); permissionstatus.
onchange = function() { console.log('geolocation permission state has changed to ', this.state); }; }); specification specification status comment permissionsthe definition of '
onchange' in that specification.
mozbrowsericonchange
the mozbrowseric
onchange event is sent when a new icon (e.g.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseric
onchange", function( event ) { console.log("the url of the new favicon is:" + event.details.href); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserlocationchange
the mozbrowserlocati
onchange event is fired when a browser <iframe>'s location changes — it is fired every time navigation occurs.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserlocati
onchange', function (event) { urlbar.value = event.detail.url; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
Document: selectionchange event - Web APIs
the selecti
onchange event of the selection api is fired when the current text selection on a document is changed.
... bubbles no cancelable no interface event event handler property onselecti
onchange examples // addeventlistener version document.addeventlistener('selecti
onchange', () => { console.log(document.getselection()); }); // onselecti
onchange version document.onselecti
onchange = () => { console.log(document.getselection()); }; specifications specification status comment selection apithe definition of 'selecti
onchange' in that specification.
IDBVersionChangeEvent.oldVersion - Web APIs
the oldversion read-only property of the idbversi
onchangeevent interface returns the old version number of the database.
... syntax var oldversion = idbversi
onchangeevent.oldversion value a 64-bit integer.
Window: orientationchange event - Web APIs
the orientati
onchange event is fired when the orientation of the device has changed.
... bubbles no cancelable no interface event event handler onorientati
onchange example you can use the orientati
onchange event in an addeventlistener method: window.addeventlistener("orientati
onchange", function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }); or use the onorientati
onchange event handler property: window.onorientati
onchange = function(event) { console.log("the orientation of the device is now " + event.target.screen.orientation.angle); }; specifications specification status compatibility standardthe definition of 'orientati
onchange' in that specification.
Index - Web APIs
197 audiotracklist.
onchange api, adding audio tracks, adding tracks, audio, audiotracklist, event handler, html dom, media, property, reference, addtrack,
onchange, track the audiotracklist property
onchange is an event handler which is called when the change event occurs, indicating that one or more of the audiotracks in the audiotracklist have been enabled or disabled.
... 1010 document: selecti
onchange event reference, selection, selection api, events, selecti
onchange no summary!
... 1486 globaleventhandlers.
onchange api, event handler, globaleventhandlers, html dom, property, reference the
onchange property of the globaleventhandlers mixin is an eventhandler for processing change events.
...And 31 more matches
IME handling guide
ecompositionupdate this is dispatched by textcomposition when an ecompoiti
onchange will change the composition string.
... ecompositi
onchange this is used internally only.
... mranges representing dom event ecompositionstart selected string before starting composition textcomposition nullptr compositionstart ecompositionupdate new composition string textcomposition nullptr compositionupdate ecompositionend commit string textcomposition nullptr compositionend ecompositi
onchange new composition string widget (or textcomposition) must not be nullptr text ecompositioncommitasis n/a (must be empty) nobody nullptr none ecompositioncommit commit string widget (or textcomposition) nullptr none presshell presshell receives the widget events and decides an event target from focused document and element.
...And 15 more matches
Event reference
durati
onchange the duration attribute has been updated.
... svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versi
onchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuiteminactive window events close popup events popuphidden popuphiding popupshowing popupshown tab events visibilitychange battery events chargingchange chargingtimechange dischargingtimechange levelchange call events alerting busy callschanged cfstatechange connecting dialing disconnected di...
...sconnecting error held, holding incoming resuming statechange voicechange sensor events compassneedscalibration devicemotion deviceorientation orientati
onchange smartcard events icccardlockerror iccinfochange smartcard-insert smartcard-remove stkcommand stksessionend cardstatechange sms and ussd events delivered received sent ussdreceived frame events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserlocati
onchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange dom mutation events domattributenamechanged domattrmodified domcharacterdatamodified domcontentloaded domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument do...
...And 9 more matches
ui/button/toggle - Archive of obsolete content
usage creating buttons to create a button you must give it an id, an icon, and a label: 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" },
onchange: function(state) { console.log(state.label + " checked state: " + state.checked); } }); by default, the button appears in the firefox toolbar: however, users can move it to the firefox menu panel: badged buttons new in firefox 36.
...by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png",
onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
...you can do this in the button's constructor, by assigning the listener to the onclick or
onchange option.
...And 5 more matches
Making decisions in your code — conditionals - Learn web development
</label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.
onchange = function() { ( select.value === 'black' ) ?
... finally, we've also got an
onchange event listener that serves to run a function containing a ternary operator.
... an
onchange event handler to detect when the value selected in the <select> menu is changed.
...And 5 more matches
Document - Web APIs
document.onselecti
onchange is an eventhandler representing the code to be called when the selecti
onchange event is raised.
... globaleventhandlers.
onchange is an eventhandler representing the code to be called when the change event is raised.
... globaleventhandlers.ondurati
onchange is an eventhandler representing the code to be called when the durati
onchange event is raised.
...And 5 more matches
nsIWebProgressListener
method overview void onlocati
onchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, [optional] in unsigned long aflags); void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long acurselfprogress, in long amaxselfprogress, in long acurtotalprogress, in long amaxtotalprogress); void onsecuritychange(in nsiwebprogress awebprogress, in nsirequest arequest, in u...
... methods onlocati
onchange() called when the location of the window being watched changes.
...for instance, a load that starts in a window might send progress and status messages for the new site, but it will not send the onlocati
onchange until we are sure that we are loading this new page here.
...And 4 more matches
nsINavHistoryResultViewer
method overview void containerclosed(in nsinavhistorycontainerresultnode acontainernode); void containeropened(in nsinavhistorycontainerresultnode acontainernode); void invalidatecontainer(in nsinavhistorycontainerresultnode acontainernode); void nodeannotati
onchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodelastaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nod...
...eic
onchanged(in nsinavhistoryresultnode anode); void nodekeywordchanged(in nsinavhistoryresultnode anode, in autf8string anewkeyword); void nodemoved(in nsinavhistoryresultnode anode, in nsinavhistorycontainerresultnode aoldparent, in unsigned long aoldindex, in nsinavhistorycontainerresultnode anewparent, in unsigned long anewindex); void nodetitlechanged(in nsinavhistoryresultnode anode, in autf8string anewtitle); void noderemoved(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode, in unsigned long aoldindex); void nodetagschanged(in nsinavhistoryresultnode anode); void nodeurichanged(in nsinavhistoryresultnode anode, in autf8string anewuri); void nodereplaced(in nsinavhistorycontainerresultnode parent...
... nodeannotati
onchanged() called right after the annotation on a node has changed.
...And 3 more matches
font - CSS: Cascading Style Sheets
</p> <form action="createshorthand()"> <div class="cf"> <div class="setpropcont"> font-style<br/> <input type="radio" id="font-style-none" name="font_style" checked="" value=""
onchange="setcss()"> <label for="font-style-none">none</label><br/> <input type="radio" id="font-style-normal" name="font_style" value="normal"
onchange="setcss()"> <label for="font-style-normal">normal</label><br/> <input type="radio" id="font-style-italic" name="font_style" value="italic"
onchange="setcss()"> <label for="font-style-italic">italic</label><br/> <input t...
...ype="radio" id="font-style-oblique" name="font_style" value="oblique"
onchange="setcss()"> <label for="font-style-oblique">oblique</label> </div> <div class="setpropcont"> font-variant<br> <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" "
onchange="setcss()"> <label for="font-variant-none">none</label><br/> <input type="radio" id="font-variant-normal" name="font_variant" value="normal"
onchange="setcss()"> <label for="font-variant-normal">normal</label><br/> <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps"
onchange="setcss()"> <label for="font-variant-small-caps">small-caps</label> </div> <div class="setpropcont"> font-weight<br/> ...
... <input type="radio" id="font-weight-none" name="font_weight" value=""
onchange="setcss()"> <label for="font-weight-none">none</label><br/> <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400"
onchange="setcss()"> <label for="font-weight-normal">normal</label><br/> <input type="radio" id="font-weight-bold" name="font_weight" value="700"
onchange="setcss()"> <label for="font-weight-bold">bold</label> </div> <div class="setpropcont"> font-size<br/> <input type="radio" id="font-size-12px" name="font_size" value="12px"
onchange="setcss()"> <label for="font-size-12px">12px</label><br/> <input type="radio" id="font-size-16px" name="font_size" value="16px" checked=""
onchange="setcss()">...
...And 3 more matches
colorpicker - Archive of obsolete content
attributes disabled, color,
onchange, preference, tabindex, type properties accessibletype, color, disabled, open, tabindex, value examples <colorpicker/> attributes disabled type: boolean indicates whether the element is disabled or not.
... overview an
onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below:
onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...And 2 more matches
preference - Archive of obsolete content
attributes disabled, instantapply, inverted, name,
onchange, readonly, tabindex, type properties defaultvalue, disabled, hasuservalue, inverted, locked, name, preferences, readonly, tabindex, type, value, valuefrompreferences methods reset examples <preferences> <preference id="pref_id" name="preference.name" type="int"/> </preferences> see preferences system for a complete example.
... overview an
onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below:
onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...And 2 more matches
React interactivity: Events and state - Learn web development
for this, we can listen to the
onchange event.
... // near the top of the `form` component function handlechange(e) { console.log("typing!"); } // down in the return statement <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name}
onchange={handlechange} /> currently, your input’s value will not change as you type, but your browser will log the word "typing!" to the javascript console, so we know our event listener is attached to the input.
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" value={name}
onchange={handlechange} /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> ); } export default form; putting it all together: adding a task now that we've practiced with events, callback props, and hooks we're ready to write functionality that will allow a user to add a new task from their browser.
...And 2 more matches
nsINavHistoryResultObserver
cko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containerstatechanged(in nsinavhistorycontainerresultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate); void invalidatecontainer(in nsinavhistorycontainerresultnode acontainernode); void nodeannotati
onchanged(in nsinavhistoryresultnode anode, in autf8string aannoname); void nodedateaddedchanged(in nsinavhistoryresultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistoryresultnode anode, in prtime anewvisitdate, in unsigned long anewaccesscount); void nodeic
onchanged(in nsinavhistoryresultnode anode); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in ...
... nodeannotati
onchanged() called right after the annotation on a node has changed.
...void nodeannotati
onchanged( in nsinavhistoryresultnode anode, in autf8string aannoname ); parameters anode the node whose title has changed.
...And 2 more matches
GlobalEventHandlers - Web APIs
globaleventhandlers.
onchange is an eventhandler representing the code to be called when the change event is raised.
... globaleventhandlers.ondurati
onchange is an eventhandler representing the code to be called when the durati
onchange event is raised.
... globaleventhandlers.onselectstart is an eventhandler representing the code to be called when the selecti
onchange event is raised, i.e.
...And 2 more matches
Using IndexedDB - Web APIs
creating or updating the version of the database when you create a new database or increase the version number of an existing database (by specifying a higher version number than you did previously, when opening a database), the onupgradeneeded event will be triggered and an idbversi
onchangeevent object will be passed to any onversi
onchange event handler set up on request.result (i.e., db in the example).
...transactions have three available modes: readonly, readwrite, and versi
onchange.
... to change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versi
onchange mode.
...And 2 more matches
Testing media queries programmatically - CSS: Cascading Style Sheets
function handleorientati
onchange(mql) { // ...
...handleorientati
onchange(mediaquerylist); // add the callback function as a listener to the query list.
... mediaquerylist.addlistener(handleorientati
onchange); this code creates the orientation-testing media query list, then adds an event listener to it.
...And 2 more matches
Progress Listeners - Archive of obsolete content
quest, aflag, astatus) { // if you use mylistener for more than one tab/window, use // awebprogress.domwindow to obtain the tab/window which triggers the state change if (aflag & state_start) { // this fires when the load event is initiated } if (aflag & state_stop) { // this fires when the load finishes } }, onlocati
onchange: function(aprogress, arequest, auri) { // this fires when the location bar changes; that is load event is confirmed // or when the user switches tabs.
... alert(auri.spec); this.oldurl = auri.spec; }, // nsiwebprogresslistener queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", "nsisupportsweakreference"]), onlocati
onchange: function(aprogress, arequest, auri) { this.processnewurl(auri); }, onstatechange: function() {}, onprogresschange: function() {}, onstatuschange: function() {}, onsecuritychange: function() {} }; window.addeventlistener("load", function() { myextension.init() }, false); window.addeventlistener("unload", function() { myextension.uninit() }, false); note: if you use...
...to do this the optional aflags parameter of the onlocati
onchange listener is used.
... var myext_urlbarlistener = { onlocati
onchange: function (aprogress, arequest, auri, aflags) { if (aflags & ci.nsiwebprogresslistener.location_change_same_document) { //anchor clicked!
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch,
onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlengt...
... overview an
onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below:
onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"
onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
Textbox (XPFE autocomplete) - Archive of obsolete content
tocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch,
onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, di...
... overview an
onchange attribute is an event listener to the object for the event change.
... a change event is fired in different ways for different xul input elements as listed below:
onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
...href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text"
onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs when selecting a result from the popup.
Managing screen orientation - Web APIs
listening orientation change the orientati
onchange event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the screen.orientation property.
... screen.addeventlistener("orientati
onchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any web application can lock the screen to suits its own needs.
...if application a is locked to landscape and application b is locked to portrait, switching from application a to b or b to a will not fire an orientati
onchange event because both applications will keep the orientation they had.
... however, locking the orientation can fire an orientati
onchange event if the orientation had to be changed to satisfy the lock requirements.
IDBDatabase - Web APIs
versi
onchange fired when a database structure change was requested.
... also available via the onversi
onchange property.
... yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5onversi
onchangechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support ...
... yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5versi
onchange eventchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full supp...
Selection API - Web APIs
you can run code in response to the selection being changed, or a new selection being started, using the globaleventhandlers.onselecti
onchange and globaleventhandlers.onselectstart event handlers.
... globaleventhandlers.onselecti
onchange represents the event handler that is called when a selecti
onchange event is fired on the current object (i.e.
...roidfirefox for androidopera for androidsafari on iossamsung internetselection experimentalchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the globaleventhandlers.onselecti
onchange and globaleventhandlers.onselectstart event handlers are supported as of firefox 52.ie full support 9opera full support 9safari full support 1webview android full support 1chrome android full support ...
... 18firefox android full support 4notes full support 4notes notes the globaleventhandlers.onselecti
onchange and globaleventhandlers.onselectstart event handlers are supported as of firefox 52.opera android full support 10.1safari ios full support 1samsung internet android full support 1.0addrange experimentalchrome full support 1edge full support 12firefox full support yesie ?
Window - Web APIs
globaleventhandlers.
onchange an event handler property for change events on the window.
...if the resource fully fits in the window, then this event cannot be invoked globaleventhandlers.onwheel called when the mouse wheel is rotated around any axis globaleventhandlers.onselect called after text in an input field is selected globaleventhandlers.onselecti
onchange is an eventhandler representing the code to be called when the selecti
onchange event is raised.
... orientati
onchange fired when the orientation of the device has changed.
... also available via the onorientati
onchange property.
Rich-Text Editing in Mozilla - Developer guides
rflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select
onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option value="h6">subtitle <h6></op...
...tion> <option value="p">paragraph <p></option> <option value="pre">preformatted <pre></option> </select> <select
onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select
onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onch...
...ange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select
onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0c...
...//////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><input type="checkbox" name="switchmode" id="switchbox"
onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
Making content editable - Developer guides
rflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select
onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option value="h6">subtitle <h6></op...
...tion> <option value="p">paragraph <p></option> <option value="pre">preformatted <pre></option> </select> <select
onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select
onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onch...
...ange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select
onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </div> <div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0c...
...//////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><input type="checkbox" name="switchmode" id="switchbox"
onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
React interactivity: Editing, filtering, conditional rendering - Learn web development
on> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed}
onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn ...
...nderneath the existing hook: const [newname, setnewname] = usestate(''); next, create a handlechange() function that will set the new name; put this underneath the hooks but before the templates: function handlechange(e) { setnewname(e.target.value); } now we'll update our editingtemplate's <input /> field, setting a value attribute of newname, and binding our handlechange() function to its
onchange event.
... update it as follows: <input id={props.id} classname="todo-text" type="text" value={newname}
onchange={handlechange} /> finally, we need to create a function to handle the edit form’s onsubmit event; add the following just below the previous function you added: function handlesubmit(e) { e.preventdefault(); props.edittask(props.id, newname); setnewname(""); setediting(false); } remember that our edittask() callback prop needs the id of the task we're editing as well as its new name.
PopupNotifications.jsm
method overview void locati
onchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
... methods locati
onchange() the consumer can call this method to let the popup notification module know that the current browser's location has changed.
... void locati
onchange(); parameters none.
nsINavHistoryResultViewObserver
inherits from: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselecti
onchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishes to insert the dragged item before the indicated row.
... onselecti
onchanged() called when the selection in the tree changes.
... void onselecti
onchanged(); parameters none.
nsIPushService
serviceworkerglobalscope.onpushsubscripti
onchange please make sure you listen for push-subscription-change.
... if (data == this.scope) { if (topic == "push-message") { this.onpushmessage(subject); } else if (topic == "push-subscription-change") { this.onpushsubscripti
onchange(); } } }, onpushmessage(maybemessage) { if (!maybemesssage) { // the subject will be `null` for messages without data.
... }, onpushsubscripti
onchange() { // re-subscribe if the subscription was dropped.
nsITreeView
n long row, in nsitreecolumn col); boolean isselectable(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstring action, in long row); void selecti
onchanged(); void setcelltext(in long row, in nsitreecolumn col, in astring value); void setcellvalue(in long row, in nsitreecolumn col, in astring value); void settree(in nsitreeboxobject tree); void toggleopenstate(in long index); attributes attribute type description rowcount long the total number of rows in the tree (including ...
... selecti
onchanged() should be called from a xul onselect handler whenever the selection changes.
... void selecti
onchanged(); parameters none.
Basic concepts - Web APIs
this will start a versi
onchange transaction and fire an upgradeneeded event.
... the three modes of transactions are: readwrite, readonly, and versi
onchange.
... the only way to create and delete object stores and indexes is by using a versi
onchange transaction.
IndexedDB API - Web APIs
custom event interfaces this specification fires events with the following custom interface: idbversi
onchangeevent the idbversi
onchangeevent interface indicates that the version of the database has changed, as the result of an idbopendbrequest.onupgradeneeded event handler function.
...they are still documented in case you need to update previously written code: idbversi
onchangerequest represents a request to change the version of a database.
... the way to change the version of the database has since changed (by calling idbfactory.open without also calling idbdatabase.setversion), and the interface idbopendbrequest now has the functionality of the removed idbversi
onchangerequest.
Cross-browser audio basics - Developer guides
myaudio.addeventlistener("loadstart", function() { //grabbing the file }); durati
onchange if you just want to know as soon as the duration of your media is established, this is the event for you.
... myaudio.addeventlistener("durati
onchange", 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("canplaythrough", function() { //audio is ready to play all the way through }); media loading event order to recap, the order of the media loading events are: loadstart > durati
onchange > loadedmetadata > loadeddata > progress > canplay > canplaythrough loading interruption events we also have a few events available that will fire when there is some kind of interruption to the media loading process.
Constraint validation - Developer guides
basically, the idea is to trigger javascript on some form field event (like
onchange) to calculate whether the constraint is violated, and then to use the method field.setcustomvalidity() to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.
... if (constraint.test(zipfield.value)) { // the zip follows the constraint, we use the constraintapi to tell it zipfield.setcustomvalidity(""); } else { // the zip doesn't follow the constraint, we use the constraintapi to // give a message about the format required for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the
onchange event for the <select> and the oninput event for the <input>: window.onload = function () { document.getelementbyid("country").
onchange = checkzip; document.getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation.
...least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation fs.setcustomvalidity(""); } finally we hook the method with the correct event: window.onload = function () { document.getelementbyid("fs").
onchange = checkfilesize; } you can see a live example of the file size constraint validation.
Intercepting Page Loads - Archive of obsolete content
here are a couple of common use cases and the ways to implement them with web progress listeners: if you want simple detection and filtering like in the page load events, you can use onlocati
onchange.
...canceling the request works just like with onlocati
onchange.
Index - Archive of obsolete content
965
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.
... 1106 textbox.
onchange xul attributes, xul reference no summary!
Monitoring WiFi access points - Archive of obsolete content
<html> <head> <title>wifi monitor example</title> <script> var count = 0; function test() { } test.prototype = {
onchange: function (accesspoints) { netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var d = document.getelementbyid("d"); d.innerhtml = ""; for (var i=0; i<accesspoints.length; i++) { var a = accesspoints[i]; d.innerhtml += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>"; } var c = document.getelementbyid("c"); c.innerhtml = "<p>...
...the
onchange() method (lines 13 through 27) begins by enabling universalxpconnect privileges, then clearing out the div (d) that will receive the updated list of access points.
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.
... 375 textbox.
onchange xul attributes, xul reference no summary!
Toolbar customization events - Archive of obsolete content
customizati
onchange this event is delivered when the user makes a change to a toolbar while editing the toolbars, either by dragging an item to the toolbar or by dragging an item out of it.
...window.addeventlistener("beforecustomization", customizestart, false); window.addeventlistener("aftercustomization", customizeend, false); window.addeventlistener("customizati
onchange", customizechange, false); function customizestart(e) { let thetoolbox = e.target; /* now we know the user has started customizing */ } function customizeend(e) { let thetoolbox = e.target; /* the user has finished customizing */ } function customizechange(e) { let thetoolbox = e.target; /* the user has made a change to the toolbox */ } ...
textbox - Archive of obsolete content
attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur,
onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons,...
...
onchange type: script code this event is sent when the value of the textbox is changed.
Function return values - Learn web development
enter the following event handler below the existing functions: input.
onchange = function() { const num = input.value; if (isnan(num)) { para.textcontent = 'you need to enter a number!'; } else { para.textcontent = num + ' squared is ' + squared(num) + '.
...' + num + ' factorial is ' + factorial(num) + '.'; } } here we are creating an
onchange event handler.
Fetching data from the server - Learn web development
this stores a reference to the <select> and <pre> elements in constants and defines an
onchange event handler function so that when the select's value is changed, its value is passed to an invoked function updatedisplay() as a parameter.
... const versechoose = document.queryselector('select'); const poemdisplay = document.queryselector('pre'); versechoose.
onchange = function() { const verse = versechoose.value; updatedisplay(verse); }; let's define our updatedisplay() function.
Gecko info for Windows accessibility vendors
event_show, event_hide and event_locati
onchange are fired for the caret object.
...role:menubar" fires event_menustart and event_menuend role_scrollbar not supported n/a role_grip not supported n/a role_sound not supported n/a role_cursor not supported n/a role_caret supported for caret fires event_show, event_hide, event_locati
onchange role_alert xul: <browsermessage> dhtml: role="wairole:alert" fires event_alert role_window supported automatically by ms windows role_client xul: <browser> html: <frame> or <iframe> role_menupopup dhtml: role="wairole:menu" fires eve...
Listening to events on all tabs
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: onlocati
onchange called when the uri of the document displayed in the tab changes.
... void onlocati
onchange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, nsiuri alocation [optional] in unsigned long aflags ); parameters abrowser the browser representing the tab whose location changed.
Performance
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...
... better: // addon.js var main = new myaddonservice(); main.
onchange(statechange); function statechange() { services.ppmm.broadcastasyncmessage("my-addon:update-configuration", {newconfig: main.serialize()}) } // processmodule.jsm const exported_symbols = ['getmaincopy']; var maincopy; services.cpmm.addmessagelistener("my-addon:update-configuration", function(message) { maincopy = message.data.newconfig; }) funtion getmaincopy() { return maincopy; } // framescript.js components.utils.import("resource://my-addon/processmodule.jsm") // getmaincopy() used by other functions don't register o...
Using the Browser API
there's another event listener added later on in the code that listens for the mozbrowserlocati
onchange event.
... browser.addeventlistener('mozbrowserlocati
onchange', function (e) { urlbar.value = e.detail; }); zooming in and out the browser content can be programmatically zoomed in and out using the htmliframeelement.zoom() method.
Browser API
mozbrowserfindchange sent when a search operation is performed on the browser <iframe> content (see htmliframeelement search methods.) mozbrowserfirstpaint sent when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank.) mozbrowseric
onchange sent when a new icon (e.g.
... mozbrowserlocati
onchange sent when a browser <iframe>'s location changes.
nsIDeviceMotion
methods addlistener() when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onaccelerati
onchange() method as appropriate to share updated acceleration data.
... void addlistener( in nsidevicemotionlistener alistener ); parameters alistener the nsidevicemotionlistener object whose nsidevicemotionlistener.onaccelerati
onchange() method should be called with updated acceleration data.
nsIDeviceMotionListener
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void onmoti
onchange(in nsidevicemotiondata amotiondata); methods onmoti
onchange() called when new orientation or acceleration data is available.
... void onmoti
onchange( in nsidevicemotiondata amotiondata ); parameters aacceleration the nsidevicemotiondata object describing updated motion information.
nsIDocumentLoader
ocumentloader = components.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsidocumentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocati
onchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer aresult); native code only!
... fireonlocati
onchange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonlocati
onchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri ); parameters awebprogress arequest auri fireonstatuschange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fire...
nsIDownloadProgressListener
method overview void ondownloadstatechange(in short astate, in nsidownload adownload); void onlocati
onchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload); obsolete since gecko 1.9.1 void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress, in nsidownload adownload); void onsecuritychan...
... onlocati
onchange() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) void onlocati
onchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads.
nsIWifiListener
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void
onchange([array, size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen); void onerror(in long error); methods
onchange() called when the list of available access points changes.
... void
onchange( [array, size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen ); parameters accesspoints an array of nsiwifiaccesspoint objects representing all currently-available wifi access points.
Web Console remoting - Firefox Developer Tools
prior to firefox 20 the web console actor provided a locati
onchange listener, with an associated locati
onchanged notification.
... firefox 20: bug 792062 - removed locati
onchanged packet and updated the tabnavigated packet for tab actors.
AudioTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property
onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.audiotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); using the
onchange event handler property: const videoelement = document.
...queryselector('video'); videoelement.audiotracks.
onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `enabled` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.audiotracks[0]; track.enabled = !track.enabled; }); specifications specification status html living standardthe definition of 'change' in that specification.
AudioTrackList - Web APIs
onchange an event handler to be called when the change event occurs.
... also available via the
onchange property.
Introduction to the DOM - Web APIs
<html> <head> <title>dom tests</title> <script> function setbodyattr(attr, value) { if (document.body) document.body[attr] = value; else throw new error("no support"); } </script> </head> <body> <div style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select
onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bgcolor</tt></b></p> <select
onchange="setbodyattr('bgcolor', this.options[this.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</optio...
...n> </select> <p><b><tt>link</tt></b></p> <select
onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other html elements.
FileReader.readAsDataURL() - Web APIs
example html <input type="file"
onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); ...
... if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file"
onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); reader.readasdataurl(file...
IDBDatabase.createObjectStore() - Web APIs
this method can be called only within a versi
onchange transaction.
... exceptions this method may raise a domexception with a domerror of one of the following types: exception description invalidstateerror occurs if the method was not called from a versi
onchange transaction callback.
IDBDatabase.deleteObjectStore() - Web APIs
as with idbdatabase.createobjectstore, this method can be called only within a versi
onchange transaction.
... exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror occurs if the method was not called from a versi
onchange transaction callback.
IDBObjectStore.createIndex() - Web APIs
note that this method must be called only from a versi
onchange transaction mode callback.
... invalidstateerror occurs if either: the method was not called from a versi
onchange transaction mode callback, i.e.
IDBObjectStore.deleteIndex() - Web APIs
note that this method must be called only from a versi
onchange transaction mode callback.
... return value undefined exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror occurs if the method was not called from a versi
onchange transaction mode callback.
IDBOpenDBRequest: blocked event - Web APIs
the blocked handler is executed when an open connection to a database is blocking a versi
onchange transaction on the same database.
... bubbles no cancelable no interface idbversi
onchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.
IDBRequest.transaction - Web APIs
if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with mode equal to "versi
onchange", and can be used to access existing object stores and indexes, or abort the the upgrade.
... openrequest.onupgradeneeded = function(event) { console.log(openrequest.transaction.mode); // will log "versi
onchange".
MediaStreamTrack - Web APIs
isolati
onchange sent whenever the value of the isolated property changes due to the document gaining or losing permission to access the track.
... also available through the onisolati
onchange event handler property.
PaymentRequest.shippingOption - Web APIs
syntax // returns the id of the selected paymentshippingoption var shippingoption = request.shippingoption; example in the example below, the paymentrequest.onshippingopti
onchange and the paymentrequest.onshippingaopti
onchange events are dispatched.
... const request = new paymentrequest(methoddata, details, options); // async update to details request.onshippingaddresschange = ev => { ev.updatewith(checkshipping(request)); }; // sync update to the total request.onshippingopti
onchange = ev => { const shippingoption = shippingoptions.find( option => option.id === request.id ); const newtotal = { currency: "usd", label: "total due", value: calculatenewtotal(shippingoption), }; ev.updatewith({ ...details, total: newtotal }); }; async function checkshipping(request) { try { const json = request.shippingaddress.tojson(); await ensurecanshipto(js...
PaymentRequest.show() - Web APIs
se look like this: async/await syntax using await to wait for a promise to be resolved makes it possible to write the code to handle payments particularly cleanly: async function processpayment() { try { const payrequest = new paymentrequest(methoddata, details, options); payrequest.onshippingaddresschange = ev => ev.updatewith(checkaddress(payrequest)); payrequest.onshippingopti
onchange = ev => ev.updatewith(checkshipping(payrequest)); const repsonse = await payrequest.show(); await validateresponse(response); } catch(err) { /* handle the error; aborterror usually means a user cancellation */ } } in this code, the methods checkaddress() and checkshipping(), respectively, check the shipping address and the shipping option changes and supply in response either a...
... then/catch syntax you can also use the older promise-based approach to work with payments, using the then() and catch() functions on the promise returned by show(): function processspayment() { const payrequest = new paymentrequest(methoddata, details, options); payrequest.onshippingaddresschange = ev => ev.updatewith(checkaddress(payrequest)); payrequest.onshippingopti
onchange = ev => ev.updatewith(checkshipping(payrequest)); payrequest.show() .then(response => validateresponse(response)) .catch(err => handleerror(err)); } this is functionally equivalent to the processpayment() method using the await syntax.
PaymentRequest - Web APIs
shippingopti
onchange secure context dispatched whenever the user changes a shipping option.
... also available using the onshippingopti
onchange event handler property.
PaymentRequestUpdateEvent - Web APIs
shippingopti
onchange secure context dispatched whenever the user changes a shipping option.
... also available using the onshippingopti
onchange event handler property.
PaymentResponse.shippingOption - Web APIs
syntax var shippingoption = paymentrequest.shippingoption; example in the example below, the paymentrequest.onshippingaopti
onchange event is called.
...var payment = new paymentrequest(supportedinstruments, details, options); request.addeventlistener('shippingopti
onchange', function(evt) { evt.updatewith(new promise(function(resolve, reject) { updatedetails(details, request.shippingoption, resolve, reject); })); }); payment.show().then(function(paymentresponse) { // processing of paymentresponse exerpted for the same of brevity.
PermissionStatus - Web APIs
event handler permissionstatus.
onchange an event called whenever permissionstatus.status changes.
... example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission status is ', permissionstatus.state); permissionstatus.
onchange = function() { console.log('geolocation permission status has changed to ', this.state); }; }); specification specification status comment permissionsthe definition of 'permissionstatus' in that specification.
Using the Permissions API - Web APIs
nted') { report(result.state); geobtn.style.display = 'none'; } else if (result.state == 'prompt') { report(result.state); geobtn.style.display = 'none'; navigator.geolocation.getcurrentposition(revealposition,positiondenied,geosettings); } else if (result.state == 'denied') { report(result.state); geobtn.style.display = 'inline'; } result.
onchange = function() { report(result.state); } }); } function report(state) { console.log('permission ' + state); } handlepermission(); permission descriptors the permissions.query() method takes a permissiondescriptor dictionary as a parameter — this contains the name of the api you are interested in.
... responding to permission state changes you'll notice that there is an
onchange event handler in the code above, attached to the permissionstatus object — this allows us to respond to any changes in the permission status for the api we are interested in.
RTCPeerConnection - Web APIs
isolati
onchange sent to the rtcpeerconnection when the isolated property on one of the mediastreamtrack objects associated with the connection changes value.
... also available through the onisolati
onchange event handler property.
ScreenOrientation - Web APIs
event handlers screenorientation.
onchange the eventhandler called whenever the screen changes orientation.
... 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0
onchangechrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview ...
Selection.containsNode() - Web APIs
it uses addeventlistener() to check for selecti
onchange events.
... html <p>can you find the secret word?</p> <p>hmm, where <span id="secret" style="color:transparent">secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selecti
onchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
ServiceWorkerGlobalScope - Web APIs
pushsubscripti
onchange occurs when a push subscription has been invalidated, or is about to be invalidated (e.g.
... also available via the serviceworkerglobalscope.onpushsubscripti
onchange property.
TextTrackList - Web APIs
onchange an event handler to be called when the change event occurs.
... also available via the
onchange property.
VideoTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property
onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the
onchange event handler property: const videoelement = do...
...cument.queryselector('video'); videoelement.videotracks.
onchange = (event) => { console.log(`'${event.type}' event fired`); }; // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); specifications specification status html living standardthe definition of 'change' in that specification.
VideoTrackList - Web APIs
onchange an event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive.
... also available via the
onchange property.
Using Web Workers - Web APIs
when you want to send a message to the worker, you post messages to it like this (main.js): first.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } so here we have two <input> elements represented by the variables first and second; when the value of either is changed, myworker.postmessage([first.value,se...
... sending messages to and from a shared worker now messages can be sent to the worker as before, but the postmessage() method has to be invoked through the port object (again, you'll see similar constructs in both multiply.js and square.js): squarenumber.
onchange = function() { myworker.port.postmessage([squarenumber.value,squarenumber.value]); console.log('message posted to worker'); } now, on to the worker.
Color picker tool - CSS: Cascading Style Sheets
) { var preview_box = document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = function newinputcomponent(title, topic,
onchangefunc) { var wrapper = document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild...
...(wrapper); input.addeventlistener('change',
onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); else this.setpickermode('hsv'); }.bind(this)); this.node.appendchild(button); }; /*************************************************************************/ // updates properties of ui elements /*************************************************************************/ colorpicker.prototype.
Linear-gradient Generator - CSS: Cascading Style Sheets
) { var preview_box = document.createelement('div'); var preview_color = document.createelement('div'); preview_box.classname = 'preview'; preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = function newinputcomponent(title, topic,
onchangefunc) { var wrapper = document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild...
...(wrapper); input.addeventlistener('change',
onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.subscribe(topic, function(value) { input.value = value; }); }; colorpicker.prototype.createchangemodebutton = function createchangemodebutton() { var button = document.createelement('div'); button.classname = 'switch_mode'; button.addeventlistener('click', function() { if (this.picker_mode === 'hsv') this.setpickermode('hsl'); else this.setpickermode('hsv'); }.bind(this)); this.node.appendchild(button); }; /*************************************************************************/ // updates properties of ui elements /*************************************************************************/ colorpicker.prototype.
<input type="tel"> - HTML: Hypertext Markup Language
ass="validity"></span> </span> <span class="number2div"> <input id="number2" name="number2" type="tel" required placeholder="second part" pattern="[0-9]{4}" aria-label="second part of number"> <span class="validity"></span> </span> </div> <div> <button>submit</button> </div> </form> the javascript is relatively simple — it contains an
onchange event handler that, when the <select> value is changed, updates the <input> element's pattern, placeholder, and aria-label to suit the format of telephone numbers in that country/territory.
... var selectelem = document.queryselector("select"); var inputelems = document.queryselectorall("input"); selectelem.
onchange = function() { for(var i = 0; i < inputelems.length; i++) { inputelems[i].value = ""; } if(selectelem.value === "us") { inputelems[2].parentnode.style.display = "inline"; inputelems[0].placeholder = "area code"; inputelems[0].pattern = "[0-9]{3}"; inputelems[1].placeholder = "first part"; inputelems[1].pattern = "[0-9]{3}"; inputelems[1].setattribute("aria-label","first part of number"); inputelems[2].placeholder = "second part"; inputelems[2].pattern = "[0-9]{4}"; inputelems[2].setattribute("aria-label","second part of number"); } else if(selectelem.value === "uk") { inputelems[2].parentnode.style.display = "none"; ...
panel - Archive of obsolete content
n by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = require("sdk/self"); var button = togglebutton({ id: "my-button", label: "my button", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" },
onchange: handlechange }); var mypanel = sdkpanels.panel({ contenturl: self.data.url("panel.html"), onhide: handlehide }); function handlechange(state) { if (state.checked) { mypanel.show({ position: button }); } } function handlehide() { button.state('window', {checked: false}); } updating panel content you can update the panel's content by: sending a message to a conten...
tabs - Archive of obsolete content
s called "style.css" and is located in the add-on's "data" directory: var tabs = require("sdk/tabs"); var { attach, detach } = require('sdk/content/mod'); var { style } = require('sdk/stylesheet/style'); var { togglebutton } = require("sdk/ui/button/toggle"); var style = style({ uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png",
onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private windows if your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private browser windows.
content/loader - Archive of obsolete content
reloads a web page in the frame every time the contenturl property is changed: var hiddenframes = require("sdk/frame/hidden-frame"); var { loader } = require("sdk/content/content"); var pageloader = loader.compose({ constructor: function pageloader(options) { options = options || {}; if (options.contenturl) this.contenturl = options.contenturl; this.on('propertychange', this._
onchange = this._
onchange.bind(this)); let self = this; hiddenframes.add(hiddenframes.hiddenframe({ onready: function onready() { let frame = self._frame = this.element; self._emit('propertychange', { contenturl: self.contenturl }); } })); }, _
onchange: function _
onchange(e) { if ('contenturl' in e) this._frame.setattribute('src', this._contenturl); ...
ui/button/action - Archive of obsolete content
by default the badge's color is red, but you can set your own color using the badgecolor property, specified as a css <color> value: var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "my-button1", label: "my button1", icon: "./icon-16.png",
onchange: changed, badge: 0, badgecolor: "#00aaaa" }); function changed(state) { button.badge = state.badge + 1; if (state.checked) { button.badgecolor = "#aa00aa"; } else { button.badgecolor = "#00aaaa"; } } specifying multiple icons you can specify just one icon, or multiple icons in different sizes.
Preferences - Archive of obsolete content
this example also uses a technique to trigger an
onchange function that can be defined per preference and has the old value and along with the new value of the preference.
Attribute (XUL) - Archive of obsolete content
label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup
onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentere...
Tree View Details - Archive of obsolete content
= 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); }, getimagesrc: function(idx, column) {}, getprogressmode : function(idx,column) {}, getcellvalue: function(idx, column) {}, cycleheader: function(col, elem) {}, selecti
onchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(idx, column, prop) {}, getcolumnproperties: function(column, element, prop) {}, }; function init() { document.getelementbyid("elementlist").view = treeview; } ]]></sc...
XUL Questions and Answers - Archive of obsolete content
ll load finish } if ( aflag & listobj.wpl.state_is_network ) { // fires when all load are really over, // do something "final" here // (my two cents) } else { // this fires when a load finishes } } } return 0; } // this fires when the location bar changes i.e load event is confirmed // or when the user switches tabs listobj.onlocati
onchange = 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...
Ember resources and troubleshooting - Learn web development
component class would be needed: import component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class example extends component { @tracked somedata = false; @action setdata(newvalue) { this.somedata = newvalue; } } which would then be called in the template like so: <checkbox @data={{this.somedata}} @
onchange={{this.setdata}} /> due to the conciseness of using mut, it may be desireable to reach for it.
Accessibility in React - Learn web development
the textbox <input> in your editing template should be updated like this: <input id={props.id} classname="todo-text" type="text" value={newname}
onchange={handlechange} ref={editfieldref} /> the "edit" button in your view template should read like this: <button type="button" classname="btn" onclick={() => setediting(true)} ref={editbuttonref} > edit <span classname="visually-hidden">{props.name}</span> </button> focusing on our refs with useeffect to use our refs for their intended purpose, we need to import another react hook: use...
Mozilla accessibility architecture
ng 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:onlocati
onchange() nsiwebprogresslistener callback event_state_change (msaa) event_reorder (atk) dom mutation events - multiple uses dom mutation events are a great thing.
HTMLIFrameElement.goBack()
by calling this method, the browser <iframe> changes its location for the previous location available in its navigation history, which sends a series of related events: mozbrowserlocati
onchange, mozbrowserloadstart, and so on.
HTMLIFrameElement.goForward()
by calling this method, the browser <iframe> changes its location to the next location available in its navigation history, which sends a series of related events: mozbrowserlocati
onchange, mozbrowserloadstart and so on.
mozbrowseractivitydone
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseractivitydone", function(event) { if(event.details.success) { console.log('activity completed successfully'); } else { console.log('activity not completed successfully'); } }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserasyncscroll
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserasyncscroll", function( event ) { console.log("the scroll top position of the document is:" + event.details.top + "px"); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseraudioplaybackchange
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseraudioplaybackchange", function(event) { console.log(event.details); }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercaretstatechanged
examples var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercaretstatechanged", function( event ) { // do stuff with event.details }); related events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserclose
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserclose", function() { console.log("browser window has been closed; iframe will be destroyed."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsercontextmenu
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsercontextmenu", function(event) { console.log("asking for menu:" + json.stringify(event.details)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserdocumentfirstpaint", function() { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsererror
proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfindchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserfirstpaint
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfirstpaint", function(event) { console.log("first content painted."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadend
browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserloadstart
var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermanifestchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsermetachange
its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropensearch
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowseropentab
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowseropenwindow
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropenwindow", function( event ) { console.log("a new window has opened containing the content at " + event.details.url + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserresize
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscroll
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollareachanged
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserscrollviewchange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsersecuritychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowserselectionstatechanged
ar browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserselectionstatechanged", function( event ) { if(event.details.visible) { console.log("the current selection is visible."); } else { console.log("the current selection is not visible."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsershowmodalprompt
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsershowmodalprompt", function( event ) { console.log("asking for prompt:" + json.stringify(event.detail)); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
mozbrowsertitlechange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
example var browser = document.queryselector("iframe[mozbrowser]"); browser.addeventlistener("mozbrowserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
mozbrowservisibilitychange
example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowservisibilitychange", function( event ) { if(event.details.visible) { console.log("the browser is visible."); } else { console.log("the browser is hidden."); } }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowseric
onchange mozbrowserloadend mozbrowserloadstart mozbrowserlocati
onchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsertitlechange ...
Download
onchange function this can be set to a function that is called after other properties change.
DownloadList
note: when a download is added to the list, its
onchange event is registered by the list, thus it cannot be used to monitor the download.
Index
reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliati
onchanged (3), superseded (4), cessationofoperation (5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
NSS tools : crlutil
reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliati
onchanged (3), superseded (4), cessationofoperation (5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
NSS Tools crlutil
reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliati
onchanged (3), superseded (4), cessationofoperation (5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the cert...
NSS tools : crlutil
reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliati
onchanged (3), superseded (4), cessationofoperation (5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
Building the WebLock UI
4" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup
onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlaying new user interface into mozilla you've got a dialog that will interact with the weblock component, but how do you install the dialog you've created into the browser?
Index
539 nsidevicemotion acceleration, interfaces, interfaces:scriptable, mobile, orientation, xpcom, xpcom interface reference when called, the accelerometer support implementation must begin to notify the specified nsidevicemotionlistener by calling its nsidevicemotionlistener.onaccelerati
onchange() method as appropriate to share updated acceleration data.
nsIAccelerometerUpdate
method overview void accelerati
onchanged(in double x, in double y, in double z); methods accelerati
onchanged() void accelerati
onchanged( in double x, in double y, in double z ); parameters x y z the coordinates of the nsiacceleration data.
nsIAccessibleEvent
event_create 0x8000 event_destroy 0x8001 event_descripti
onchange 0x800d event_parentchange 0x800f event_helpchange 0x8010 event_defacti
onchange 0x8011 event_acceleratorchange 0x8012 event_menustart 0x0004 event_menuend 0x0005 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b even...
nsIDocShell
for a new document load, this will be the channel of the previous document until after onlocati
onchange fires.
nsIWebProgress
notify_location 0x00000080 receive nsiwebprogresslistener.onlocati
onchange() events.
AbstractWorker - Web APIs
var myworker = new worker('worker.js'); first.
onchange = function() { myworker.postmessage([first.value, second.value]); console.log('message posted to worker'); } the worker's code is loaded from the file "worker.js".
Body.arrayBuffer() - Web APIs
function readfile(file) { return new response(file).arraybuffer(); } <input type="file"
onchange="readfile(this.files[0])"> specifications specification status comment fetchthe definition of 'arraybuffer()' in that specification.
DedicatedWorkerGlobalScope.onmessage - Web APIs
var myworker = new worker("worker.js"); first.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, a dedicatedworkerglobalscope.onmessage handler is used to handle messages from the main script: onmessage = function(e) { console.log('messag...
Event - Web APIs
animationevent audioprocessingevent beforeinputevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforeinputevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversi
onchangeevent inputevent keyboardevent mediastreamevent messageevent mouseevent mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent ...
File.name - Web APIs
example <input type="file" multiple
onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert("filename " + files[i].name); } } try the results out below: specifications specification status comment file apithe definition of 'name' in that specification.
File.type - Web APIs
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <input type="file" multiple
onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
FileList - Web APIs
</body> <script> var pullfiles=function(){ // love the query selector var fileinput = document.queryselector("#myfiles"); var files = fileinput.files; // cache files.length var fl = files.length; var i = 0; while ( i < fl) { // localize file var in the loop var file = files[i]; alert(file.name); i++; } } // set the input element
onchange to call pullfiles document.queryselector("#myfiles").
onchange=pullfiles; //a.t </script> </html> specifications specification status comment file apithe definition of 'filelist' in that specification.
onerror - Web APIs
the filereader onerror handler receives an event object, not an error object, as a parameter, but an error can be accessed from the filereader object, as instanceoffilereader.error // callback from a <input type="file"
onchange="
onchange(event)"> function
onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onerror = function(event) { alert("failed to read file!\n\n" + reader.error); reader.abort(); // (...does this do anything useful in an onerror handler?) }; reader.readastext(file); } ...
FileReader.onload - Web APIs
example // callback from a <input type="file"
onchange="
onchange(event)"> function
onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onload = function(e) { // the file's text will be printed here console.log(e.target.result) }; reader.readastext(file); } ...
HTMLElement: change event - Web APIs
bubbles yes cancelable no interface event event handler property
onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for ...
IDBDatabase.transaction() - Web APIs
transactions are opened in one of three modes: readonly, readwrite and readwriteflush (non-standard, firefox-only.) versi
onchange mode can't be specified here.
IDBIndex.name - Web APIs
you can only rename indexes during upgrade transactions; that is, when the mode is "versi
onchange".
IDBObjectStore.name - Web APIs
invalidstateerror either the object store has been deleted or the current transaction is not an upgrade transaction; you can only rename indexes during upgrade transactions; that is, when the mode is "versi
onchange".
IDBOpenDBRequest.onblocked - Web APIs
this event is triggered when the upgradeneeded should be triggered because of a version change but the database is still in use (that is, not closed) somewhere, even after the versi
onchange event was sent.
IDBOpenDBRequest - Web APIs
blocked fired when an open connection to a database is blocking a versi
onchange transaction on the same database.
IDBTransaction - Web APIs
version_change "versi
onchange" (2 in chrome) allows any operation to be performed, including ones that delete and create object stores and indexes.
MediaQueryListEvent - Web APIs
the mediaquerylistevent object stores information on the changes that have happened to a mediaquerylist object — instances are available as the event object on a function referenced by a mediaquerylist.
onchange property or mediaquerylist.addlistener() call.
MessageEvent - Web APIs
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 = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use ...
NetworkInformation - Web APIs
it will be one of the following values: bluetooth cellular ethernet none wifi wimax other unknown event handlers networkinformation.
onchange the event that's fired when connection information changes and the change is fired on this object.
PaymentRequest: merchantvalidation event - Web APIs
related events payerdetailchange, paymentmethodchange, shippingaddresschange, and shippingopti
onchange specifications specification status comment payment request apithe definition of 'merchantvalidation' in that specification.
PaymentRequest: paymentmethodchange event - Web APIs
related events merchantvalidation, shippingaddresschange, shippingopti
onchange, and payerdetailchange specifications specification status comment payment request apithe definition of 'paymentmethodchange' in that specification.
PermissionStatus.state - Web APIs
syntax var permission = permissionstatus.state; example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission state is ', permissionstatus.state); permissionstatus.
onchange = function() { console.log('geolocation permission status has changed to ', this.state); }; }); specification specification status comment permissionsthe definition of 'state' in that specification.
Push API - Web APIs
serviceworkerglobalscope.onpushsubscripti
onchange an event handler fired whenever a pushsubscripti
onchange event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g.
Screen - Web APIs
events handler screen.onorientati
onchange a handler for the orientati
onchange event.
Screen Orientation API - Web APIs
38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0
onchangechrome full support 38edge full support 79firefox full support 43ie no support noopera full support 25safari no support nowebview ...
Selection.type - Web APIs
var selection; document.onselecti
onchange = function() { console.log('new selection made'); selection = document.getselection(); console.log(selection.type); }; specifications specification status comment selection apithe definition of 'selection.type' in that specification.
SharedWorker() - Web APIs
examples the following code snippet shows creation of a sharedworker object using the sharedworker() constructor and subsequent usage of the object: var myworker = new sharedworker('worker.js'); myworker.port.start(); first.
onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.
onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } for a full example, see o...
SharedWorker - Web APIs
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 = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use ...
TextTrackList: change event - Web APIs
bubbles no cancelable no interface event event handler property
onchange examples using addeventlistener(): const mediaelement = document.queryselectorall('video, audio')[0]; mediaelement.texttracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the
onchange event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.
onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status html living standardthe definition of 'change' in that specification.
Using the Web Speech API - Web APIs
pitch.
onchange = function() { pitchvalue.textcontent = pitch.value; } rate.
onchange = function() { ratevalue.textcontent = rate.value; } ...
Using the Web Storage API - Web APIs
we've also included an
onchange handler on each form element so that the data and styling are updated whenever a form value is changed: bgcolorform.
onchange = populatestorage; fontform.
onchange = populatestorage; imageform.
onchange = populatestorage; responding to storage changes with the storageevent the storageevent is fired whenever a change is made to the storage object (note that this event is not fired for sessionstora...
Worker() - Web APIs
examples the following code snippet shows creation of a worker object using the worker() constructor and subsequent usage of the object: var myworker = new worker('worker.js'); first.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } for a full example, see our basic dedicated worker example (run dedicated worker).
Worker.onmessage - Web APIs
var myworker = new worker('worker.js'); first.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, an onmessage handler is used to the handle messages from the main script: onmessage = function(e) { console.log('message received from main s...
Worker.prototype.postMessage() - Web APIs
var myworker = new worker('worker.js'); first.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.
onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } for a full example, see ourbasic dedicated worker example (run dedicated worker).
Worker - Web APIs
example the following code snippet creates a worker object using the worker() constructor, then uses the worker object: var myworker = new worker('/worker.js'); var first = document.queryselector('input#number1'); var second = document.queryselector('input#number2'); first.
onchange = function() { myworker.postmessage([first.value, second.value]); console.log('message posted to worker'); } for a full example, see ourbasic dedicated worker example (run dedicated worker).
Web APIs
ms hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase idbdatabaseexception idbdatabasesync idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmutablefile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversi
onchangeevent idbversi
onchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index inputdevicecapabilities inputevent installevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
mportant for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for checkboxes and radio buttons] event_object_locati
onchange event_object_namechange event_object_descripti
onchange event_object_valuechange [important for sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defacti
onchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the msdn state constants page.
:disabled - CSS: Cascading Style Sheets
<input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').
onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment ...
aspect-ratio - CSS: Cascading Style Sheets
l,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.
onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.
onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
Border-image generator - CSS: Cascading Style Sheets
les.length === 0) return; var file = browse.files[0]; if (file.type.slice(0, 5) !== 'image') return; freader.readasdataurl(file); return false; }; freader.onload = function(e) { imagecontrol.loadremoteimage(e.target.result); }; var load = function load() { browse.click(); }; browse.setattribute('type', 'file'); browse.style.display = 'none'; browse.
onchange = loadimage; return { load: load }; })(); var imagecontrol = (function imagecontrol() { var scale = 0.5; var imgsource = new image(); var imgstate = null; var selected = null; var topics = ['slice', 'width', 'outset']; var properties = {}; properties['border1'] = { fill : false, slice_values : [27, 27, 27, 27], width_values : [20, 20, 20, 20], outset_va...
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><input
onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input
onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input
onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input
onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 = doc...
background-blend-mode - CSS: Cascading Style Sheets
<option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").
onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications specification status comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
formal definition initial valuerowapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction"
onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox"
onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'co...
<input type="date"> - HTML: Hypertext Markup Language
ullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } // when the month or year <select> values are changed, rerun populatedays() // in case the change affected the number of available days yearselect.
onchange = function() { populatedays(monthselect.value); } monthselect.
onchange = function() { populatedays(monthselect.value); } //preserve day selection var previousday; // update what day has been set to previously // see end of populatedays() for usage dayselect.
onchange = function() { previousday = dayselect.value; } note: remember that some years have 53 weeks in them (see weeks per year)...
<input type="datetime-local"> - HTML: Hypertext Markup Language
("0" + i) : i; minuteselect.appendchild(option); } } // when the month or year <select> values are changed, rerun populatedays() // in case the change affected the number of available days yearselect.
onchange = function() { populatedays(monthselect.value); } monthselect.
onchange = function() { populatedays(monthselect.value); } //preserve day selection var previousday; // update what day has been set to previously // see end of populatedays() for usage dayselect.
onchange = function() { previousday = dayselect.value; } note: remember that some years have 53 weeks in them (see weeks per year)...
<input type="time"> - HTML: Hypertext Markup Language
("0" + i) : i; minuteselect.appendchild(option); } } // make it so that if the hour is 18, the minutes value is set to 00 // — you can't select times past 18:00 function setminutestozero() { if(hourselect.value === '18') { minuteselect.value = '00'; } } hourselect.
onchange = setminutestozero; minuteselect.
onchange = setminutestozero; specifications specification status comments html living standardthe definition of '<input type="time">' in that specification.
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough,
onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurati
onchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup,...
Browser detection using the user agent - HTTP
function(mq) { for (var i=0,len=mql.length|0; i<len; i=i+1|0) if (mql[i][0] === mq) mql.splice(i, 1); mq.removelistener(whenmediachanges); } : listentomediaquery; var orientati
onchanged = false; addeventlistener("orientati
onchange", function(){ orientati
onchanged = true; }, passive_listener_option); addeventlistener("resize", settimeout.bind(0,function(){ if (orientati
onchanged && !mediaqueryupdated) for (var i=0,len=mql.length|0; i<len; i=i+1|0) mql[i][1]( mql[i][0] ); mediaqueryupdated = orientati
onchanged = false; },0)); which part of the us...
Expressions and operators - JavaScript
use this either with the dot or the bracket notation: this['propertyname'] this.propertyname suppose a function called validate validates an object's value property, given the object and the high and low values: function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) console.log('invalid value!'); } you could call validate in each form element's
onchange event handler, using this to pass it to the form element, as in the following example: <p>enter a number between 18 and 99:</p> <input type="text" name="age" size=3
onchange="validate(this, 18, 99);"> grouping operator the grouping operator ( ) controls the precedence of evaluation in expressions.
SVG Event Attributes - SVG: Scalable Vector Graphics
attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough,
onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurati
onchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, ...
SVG Attribute reference - SVG: Scalable Vector Graphics
repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough,
onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurati
onchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, ...