How to retrieve the `event` object if the DOMContentLoaded event has been triggered before setting a listener
Question
Is there a way to retrieve the event object of the DOMContentLoaded event even if it has been triggered before setting an eventListener?
I have found some timing data for DOMContentLoaded and was hoping the event data might be stored as well.
window.performance.timing.domContentLoadedEventStart
window.performance.timing.domContentLoadedEventEnd
I would like to pass the event object to my callback whether it was called directly or as a result of the eventlistener.
var callback = function(event){
console.log(event)
}
if (document.readyState !== "loading") {
var event = window.DOMContentLoadedEvent; // doesnt exist
callback.call(this, event);
} else {
document.addEventListener('DOMContentLoaded', callback, false)
}
I suppose I could create a new object and return that but i would like my code a small as possible.
var event = {
srcElement: document,
target:document,
timeStamp:window.performance.timing.domContentLoadedEventEnd,
type:"DOMContentLoaded",
}
callback.call(this, event);
What I have done instead is to add another event listener which will definitely be registered before the DOMContentLoaded event if fired, the handler stores the event object;
document.addEventListener('DOMContentLoaded', function(event){
window.DOMContentLoadedEvent = event;
});
Edit
My code is a very simple domready function
document.addEventListener('DOMContentLoaded', function(event){
window.DOMContentLoadedEvent = event;
});
domready = function(callback) {
if (document.readyState === "loading") {
return document.addEventListener('DOMContentLoaded', callback, false);
}
return callback.call(this, window.DOMContentLoadedEvent);
}
The following code may reside in an external script an be inserted after the DOMContentLoaded event has fired.
domready(function(event){
console.log(event)
});
Am I able to retrieve the event data without setting up an additional event listener ?
1 answers
solution1
-1 2016-04-27 14:53:37
check this:
<body>
...
<script>
var DOMevent; // global variable
document.addEventListener('DOMContentLoaded', function(event) {
DOMevent = event; // save it
}, false);
window.addEventListener('load', function () {
processEvent(DOMevent); // works fine
}, false);
function processEvent(e) {
console.log(e);
}
</script>
</body>
console.log(e); will show DOMevent .
more about readyState
https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
more about DOMContentLoaded event
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
more about 'load' event
https://developer.mozilla.org/en-US/docs/Web/Events/load *typo in example! document -> window !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.