如果在设置侦听器之前触发了 DOMContentLoaded 事件，如何检索“事件”对象

How to retrieve the `event` object if the DOMContentLoaded event has been triggered before setting a listener

本文关键字：事件 何检索 检索 对象 如果 侦听器 设置 DOMContentLoaded      更新时间：2023-09-26

有没有办法检索DOMContentLoaded事件的event对象，即使它在设置事件侦听器之前已经触发？

我找到了一些DOMContentLoaded的时间数据，并希望事件数据也可以存储。 

window.performance.timing.domContentLoadedEventStart
window.performance.timing.domContentLoadedEventEnd

我想将event对象传递给我的回调，无论它是直接调用的还是作为事件侦听器的结果。 

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)
}

我想我可以创建一个新对象并返回它，但我希望我的代码尽可能小。 

var event = {
    srcElement: document,
    target:document,
    timeStamp:window.performance.timing.domContentLoadedEventEnd,
    type:"DOMContentLoaded",
}
callback.call(this, event);

相反，我所做的是添加另一个事件侦听器，如果触发，该侦听器肯定会在DOMContentLoaded事件之前注册，处理程序存储event对象; 

document.addEventListener('DOMContentLoaded', function(event){
    window.DOMContentLoadedEvent = event; 
});

编辑

我的代码是一个非常简单的domready函数 

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);
}

以下代码可能驻留在触发DOMContentLoaded事件后插入的外部脚本中。 

domready(function(event){
    console.log(event)
});

我可以在不设置其他事件侦听器的情况下检索event数据吗？

检查一下：

<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);将显示DOMevent.

关于readyState

https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

关于DOMContentLoaded活动

的更多信息

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

有关"加载"事件的更多信息

https://developer.mozilla.org/en-US/docs/Web/Events/load *错别字的例子！ document -> window ！

相关文章：