Javascript 如何在可视按钮上应用带有eventListener的MutationObserver？

我有一个按钮：

<button type="button" id="errorLog" class="btn btn-secondary btn-lg btn-block">Download</button>

我得到的错误为

Uncaught TypeError:未能在“MutationObserver”上执行“observe”：参数1不是“Node”类型

，因此我尝试了以下条件：

let errorFile = document.getElementById('errorLog')
if (errorFile != null) {
    var observer = new MutationObserver(function() {
        if (errorFile.style.display == 'display') {
            console.log('foobar')
            errorLog.addEventListener('click', (e) => {
                e.preventDefault
                console.log('fired click')
            })    
        }
    })
    const config = { 
        attributes: true, 
        childList: true, 
        characterData: true 
    }
    observer.observe(errorFile, config)
}

我还提到：

---

但它甚至都不会开火。如何根据按钮的可见性触发JavaScript？

我猜您可能是在声明带有errorFile按钮的html之前执行此函数的。如果是这种情况，document.getElementById（'errorFile'）将返回undefined（或null？）Correct，那么我该如何纠正这一点，以便在按钮可见时上述操作能够正常工作，因为我认为这是我可以对observer做的，因为在您的解释中缺少一些内容。按钮是在什么“条件”下隐藏的，它是如何隐藏的，最后，为什么不在按钮隐藏在隐藏按钮的同一代码中时执行JavaScript？！按钮从模块中触发。我可以在模块显示按钮后让事件列表器工作，但我认为当按钮设置为

display:block

时，我可以使用突变来检测事件列表器。首先检查代码运行时DOM的状态，不要只是猜测。如果元素不存在，则需要使用subtree:true观察其父/祖先/文档，并检查它是否出现在回调中。注意：您只能观察现有图元。

let errorFile = document.getElementById('errorLog')
if (errorFile != null) {
    var observer = new MutationObserver(function() {
        if (errorFile.style.display == 'display') {
            console.log('foobar')
            errorLog.addEventListener('click', (e) => {
                e.preventDefault
                console.log('fired click')
            })    
        }
    })
    const config = { 
        attributes: true, 
        childList: true, 
        characterData: true 
    }
    observer.observe(errorFile, config)
}