Question

我创建了一个工厂函数来返回一个按钮对象，在 consol.log 上我得到了正确的结果，但是在应用 addEventListner 时它不起作用

          const tabButton = function(name)
        {
            const button = document.createElement("button")             
            button.innerText = name
            button.classList.add("btn")
            return {button}
        }
        
        const displayWebsite = function()
        {
            const btn = tabButton("name").button
            console.log(btn)                          //<button class="btn">name</button>
            btn.addEventListener("click",()=>{
                console.log("debug")                  // not working
            })
        }

Answer 1

此代码有效：

function tabButton(name) {
    const button = document.createElement("button");             
    button.innerText = name;
    button.classList.add("btn");
    document.getElementById("theButtons").appendChild(button);
    return button;
}
        
function displayWebsite() {
    const btn = tabButton("name");
    console.log(btn);
    btn.addEventListener("click",() => {
        console.log("debug")
    })
}

displayWebsite()

<div id="theButtons"></div>

addEventListner 不适用于工厂函数对象

1 个答案: