Search completed in 1.28 seconds.
Document: DOMContentLoaded event - Web APIs
the
domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...it is a common mistake to use load where
domcontentloaded would be more appropriate.
... examples basic usage document.addeventlistener('
domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying
domcontentloaded <script> document.addeventlistener('
domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the
domcontentloaded event is going to launch later.
...And 4 more matches
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
the
domcontentloadedeventend read-only property returns a timestamp representing the time value equal to the time immediately after the current document's
domcontentloaded event completes.
... syntax perfentry.
domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current document's
domcontentloaded event completes.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + ...
...p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of '
domcontentloadedeventend' in that specification.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
the
domcontentloadedeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent fires the
domcontentloaded event at the current document.
... syntax perfentry.
domcontentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the
domcontentloaded event at the current document.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
...ype); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation timing level 2the definition of '
domcontentloadedeventstart' in that specification.
Window: DOMContentLoaded event - Web APIs
the
domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...for full details on this event please see the page on the document:
domcontentloaded event.
...it is a common mistake to use load where
domcontentloaded would be more appropriate.
... examples basic usage window.addeventlistener('
domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); specifications specification status html living standard living standard ...
PerformanceTiming.domContentLoadedEventEnd - Web APIs
the legacy performancetiming.
domcontentloadedeventend read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after all the scripts that need to be executed as soon as possible, in order or not, has been executed.
... syntax time = performancetiming.
domcontentloadedeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.
domcontentloadedeventend' in that specification.
PerformanceTiming.domContentLoadedEventStart - Web APIs
the legacy performancetiming.
domcontentloadedeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, right before the parser sent the
domcontentloaded event, that is right after all the scripts that need to be executed right after parsing has been executed.
... syntax time = performancetiming.
domcontentloadedeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.
domcontentloadedeventstart' in that specification.
Index - Web APIs
975 document:
domcontentloaded event event the
domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... 3009 performancenavigationtiming.
domcontentloadedeventend api, property, reference, web performance the
domcontentloadedeventend read-only property returns a timestamp representing the time value equal to the time immediately after the current document's
domcontentloaded event completes.
... 3010 performancenavigationtiming.
domcontentloadedeventstart api, property, reference, web performance the
domcontentloadedeventstart read-only property returns a timestamp representing the time value equal to the time immediately before the user agent fires the
domcontentloaded event at the current document.
...And 5 more matches
Navigation and resource timings - Web Performance
as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominteractive,
domcontentloadedeventstart,
domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend.
...
domcontentloadedeventstart right before the parser sent the
domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been executed.
...
domcontentloadedeventend right after all the scripts that need to be executed as soon as possible, in order or not, have been executed.
...And 4 more matches
tabs - Archive of obsolete content
it is equivalent to the
domcontentloaded event for the given content page.
...it is equivalent to the
domcontentloaded event for the given content page.
... this event can be used for pages that do not have a
domcontentloaded event, like images.
... for pages that have a
domcontentloaded event, load is fired after ready.
On page load - Archive of obsolete content
ppcontent element (browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); var myextension = { init: function() { var appcontent = document.getelementbyid("appcontent"); // browser if(appcontent){ appcontent.addeventlistener("
domcontentloaded", myextension.onpageload, true); } var messagepane = document.getelementbyid("messagepane"); // mail if(messagepane){ messagepane.addeventlistener("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded ...
... basic onpageload for a browser window var myextension = { init: function() { // the event can be
domcontentloaded, pageshow, pagehide, load or unload.
... if(gbrowser) gbrowser.addeventlistener("
domcontentloaded", this.onpageload, false); }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered the event var win = doc.defaultview; // win is the window for the doc // test desired conditions and do something // if (doc.nodename != "#document") return; // only documents // if (win != win.top) return; //only top window.
... see also
domcontentloaded event in listening to events: simple dom events ...
What is JavaScript? - Learn web development
next, go to your text editor and add the following in your head — just before your closing </head> tag: <script> // javascript goes here </script> now we'll add some javascript inside our <script> element to make the page do something more interesting — add the following code just below the "// javascript goes here" line: document.addeventlistener("
domcontentloaded", function() { function createparagraph() { let para = document.createelement('p'); para.textcontent = 'you clicked the button!'; document.body.appendchild(para); } const buttons = document.queryselectorall('button'); for(let i = 0; i < buttons.length ; i++) { buttons[i].addeventlistener('click', createparagraph); } }); save your file and refresh the browser — now...
... in the internal example, you can see this structure around the code: document.addeventlistener("
domcontentloaded", function() { ...
... }); this is an event listener, which listens for the browser's "
domcontentloaded" event, which signifies that the html body is completely loaded and parsed.
... note: in the external case, we did not need to use the
domcontentloaded event because the defer attribute solved the problem for us.
widget - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
...this may have one of the following values: "start": load content scripts immediately after the document element for the widget view is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the widget view has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
EventTarget.addEventListener() - Web APIs
the code supports the use of handleevent() and also the
domcontentloaded event.
...eventlisteners=[]; var addeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var self=this; var wrapper=function(e) { e.target=e.srcelement; e.currenttarget=self; if (typeof listener.handleevent != 'undefined') { listener.handleevent(e); } else { listener.call(self,e); } }; if (type=="
domcontentloaded") { var wrapper2=function(e) { if (document.readystate=="complete") { wrapper(e); } }; document.attachevent("onreadystatechange",wrapper2); eventlisteners.push({object:this,type:type,listener:listener,wrapper:wrapper2}); if (document.readystate=="complete") { var e=new event(); e.srcelement=window; ...
...is,type:type,listener:listener,wrapper:wrapper}); } }; var removeeventlistener=function(type,listener /*, usecapture (will be ignored) */) { var counter=0; while (counter<eventlisteners.length) { var eventlistener=eventlisteners[counter]; if (eventlistener.object==this && eventlistener.type==type && eventlistener.listener==listener) { if (type=="
domcontentloaded") { this.detachevent("onreadystatechange",eventlistener.wrapper); } else { this.detachevent("on"+type,eventlistener.wrapper); } eventlisteners.splice(counter, 1); break; } ++counter; } }; element.prototype.addeventlistener=addeventlistener; element.prototype.removeeventlistener=removeeventlistener; ...
page-mod - Archive of obsolete content
the option takes a single string that may take any one of the following values: "start": load content scripts immediately after the document element is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) has been loaded, at the time the window.onload event fires var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*", contentscript: 'window.alert("matched!");', contentscriptwhen: "start" }); if you specify "start" for contentscriptwhen, your scripts will not be able to interact ...
...with the document's dom right away (although they could listen for window.onload or
domcontentloaded themselves).
page-worker - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
panel - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the panel is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the panel has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under addon.options property.
content/symbiont - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires this property is optional and defaults to "end".
...this may have one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("
domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
...it is equivalent to the
domcontentloaded event for the content page in a hidden frame.
HTML to DOM - Archive of obsolete content
browser) { donkeybrowser.style.height = "0px"; donkeybrowser.webnavigation.allowauth = true; donkeybrowser.webnavigation.allowimages = false; donkeybrowser.webnavigation.allowjavascript = false; donkeybrowser.webnavigation.allowmetaredirects = true; donkeybrowser.webnavigation.allowplugins = false; donkeybrowser.webnavigation.allowsubframes = false; donkeybrowser.addeventlistener("
domcontentloaded", function (e) { donkeyfire.donkeybrowser_onpageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file.
... the most interesting piece of code here is the
domcontentloaded event listener we define for the element.
jspage - Archive of obsolete content
cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,
domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.engine.gecko)?"dommousescro...
...er.engine.trident){var a=document.createelement("div"); (function(){($try(function(){a.doscroll();return document.id(a).inject(document.body).set("html","temp").dispose();}))?b():arguments.callee.delay(50);})(); }else{if(browser.engine.webkit&&browser.engine.version<525){(function(){(["loaded","complete"].contains(document.readystate))?b():arguments.callee.delay(50); })();}else{document.addevent("
domcontentloaded",b);}}})();var json=new hash(this.json&&{stringify:json.stringify,parse:json.parse}).extend({$specialchars:{"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},$replacechars:function(a){return json.$specialchars[a]||"\\u00"+math.floor(a.charcodeat()/16).tostring(16)+(a.charcodeat()%16).tostring(16); },encode:function(b){switch($type(b)){case"string":return'"'+b.replace(/...
Document.readyState - Web APIs
console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to
domcontentloaded event // alternative to
domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listen...
...er to insert or modify the dom before
domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment html living standardthe definition of 'document readiness' in that specification.
PerformanceNavigationTiming - Web APIs
performancenavigationtiming.
domcontentloadedeventend read only a domhighrestimestamp representing the time value equal to the time immediately after the current document's
domcontentloaded event completes.
... performancenavigationtiming.
domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent fires the
domcontentloaded event at the current document.
PerformanceTiming - Web APIs
performancetiming.
domcontentloadedeventstart read only right before the parser sent the
domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been executed.
... performancetiming.
domcontentloadedeventend read only right after all the scripts that need to be executed as soon as possible, in order or not, have been executed.
Window: load event - Web APIs
this is in contrast to
domcontentloaded, which is fired as soon as the page dom has been loaded, without waiting for resources to finish loading.
...listener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('
domcontentloaded', (event) => { log.textcontent = log.textcontent + `
domcontentloaded\n`; }); result specifications specification status comment ui eventsthe definition of 'load' in that specification.
Event reference
change sms and ussd events delivered received sent ussdreceived frame events mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserlocationchange mozbrowserloadend mozbrowserloadstart mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange dom mutation events domattributenamechanged domattrmodified domcharacterdatamodified
domcontentloaded domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified touch events touchcancel touchend touchmove touchstart pointer events pointerover pointerenter pointerdown pointermove pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture standard events these events are defined in official web speci...
...
domcontentloaded event html5 the document has finished loading (but not its dependent resources).
Overview of events and handlers - Developer guides
for example, code might be attached as: var funcinit = function(){ // user code goes here and can safely address all the html elements from the page // since the document has successfully been 'loaded' } document.addeventlistener('
domcontentloaded', funcinit); so that this code will only be executed after the document object emits the '
domcontentloaded' event because the html has been parsed and javasript objects created representing each of the nodes of the html document.
...emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called '
domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while the mouse pointer is on top of the dom node in the html page.
<script>: The Script element - HTML: Hypertext Markup Language
defer this boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing
domcontentloaded.
... scripts with the defer attribute will prevent the
domcontentloaded event from firing until the script has loaded and finished evaluating.
content/loader - Archive of obsolete content
this may take one of the following values: "start": load content scripts immediately after the document element for the page is inserted into the dom, but before the dom content itself has been loaded "ready": load content scripts once dom content has been loaded, corresponding to the
domcontentloaded event "end": load content scripts once all the content (dom, js, css, images) for the page has been loaded, at the time the window.onload event fires contentscriptoptions read-only value exposed to content scripts under self.options property.
remote/child - Archive of obsolete content
at this point you can't access frame's content yet, but you can add event listeners: const { frames } = require("sdk/remote/child"); frames.on("attach", function(frame) { console.log("new frame"); frame.addeventlistener("
domcontentloaded", function(e) { console.log(e.target.location.href); }); }); detach triggered when a frame is removed (for example, the user closed a tab).
Automated testing tips and tricks - Archive of obsolete content
ledir/user.js how to execute test code with chrome privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect content onload event from chrome use the
domcontentloaded event chromewindow.addeventlistener('
domcontentloaded',callbackfunction,false); ...
Common causes of memory leaks in extensions - Extensions
consider the following example code that could be part of your browser.xul overlay: gbrowser.addeventlistener("
domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are automatically destroyed.
UI pseudo-classes - Learn web development
now finally, we've used some javascript to toggle the disabling of the billing address fields: // wait for the page to finish loading document.addeventlistener('
domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').addeventlistener('change', togglebilling); }, false); function togglebilling() { // select the billing text fields let billingitems = document.queryselectorall('#billing input[type="text"]'); // select the billing text labels let billinglabels = document.queryselectorall('.billi...
Frame script environment
another use is to interact with the content very early in the page load process, long before
domcontentloaded event is fired.
Frame script environment
another use is to interact with the content very early in the page load process, long before
domcontentloaded event is fired.
Frame script loading and lifetime
if you want a frame script to do something when a new document is loaded, you need to listen for an appropriate dom event, generally domwindowcreated,
domcontentloaded, or load.
DataTransfer.clearData() - Web APIs
</span> <span class="tweaked" id="target">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('
domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dr...
Document: readystatechange event - Web APIs
listener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('
domcontentloaded', (event) => { log.textcontent = log.textcontent + `
domcontentloaded\n`; }); result specifications specification status comment html living standardthe definition of 'readystatechange' in that specification.
Document - Web APIs
load & unload events
domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
GlobalEventHandlers.onload - Web APIs
there are also dom events like
domcontentloaded and domframecontentloaded (which can be handled using eventtarget.addeventlistener()) which are fired after the dom for the page has been constructed, but do not wait for other resources to finish loading.
HTMLButtonElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLInputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLMeterElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <meter id="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLOutputElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLProgressElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <progress id="test" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.options - Web APIs
example html <label for="test">label</label> <select id="test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("
domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status comment html living standardthe definition of 'options' in that specification.
HTMLTextAreaElement.labels - Web APIs
example html <label id="label1" for="test">label 1</label> <textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("
domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTML Drag and Drop API - Web APIs
identify what is draggable making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('
domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute reference drag operations guide define the drag's data the application is ...
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + ...
PerformanceNavigationTiming.loadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + ...
PerformanceNavigationTiming.loadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
PerformanceNavigationTiming.type - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
PerformanceNavigationTiming.unloadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
PerformanceNavigationTiming.unloadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.
domcontentloadedeventend - p.
domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.t...
Touch events - Web APIs
function startup() { var el = document.getelementbyid("canvas"); el.addeventlistener("touchstart", handlestart, false); el.addeventlistener("touchend", handleend, false); el.addeventlistener("touchcancel", handlecancel, false); el.addeventlistener("touchmove", handlemove, false); } document.addeventlistener("
domcontentloaded", startup); this simply sets up all the event listeners for our <canvas> element so we can handle the touch events as they occur.
Window: popstate event - Web APIs
this will eventually send events such as
domcontentloaded and load to the window containing the document, but the steps below will continue to execute in the meantime.
Window.sizeToContent() - Web APIs
in order for it to work, the dom content should be loaded when this function is called—for example, once the
domcontentloaded event has been thrown.
Window - Web APIs
domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
ARIA: tab role - Accessibility
window.addeventlistener("
domcontentloaded", () => { const tabs = document.queryselectorall('[role="tab"]'); const tablist = document.queryselector('[role="tablist"]'); // add a click event handler to each tab tabs.foreach(tab => { tab.addeventlistener("click", changetabs); }); // enable arrow navigation between tabs in the tab list let tabfocus = 0; tablist.addeventlistener("keydown", e => { // move right i...
:disabled - CSS: Cascading Style Sheets
</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('
domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].di...
begin - SVG: Scalable Vector Graphics
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or
domcontentloaded event).
end - SVG: Scalable Vector Graphics
each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or
domcontentloaded event).
<script> - SVG: Scalable Vector Graphics
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('
domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fi...