微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

addEventListner 不适用于工厂函数对象

如何解决addEventListner 不适用于工厂函数对象

我创建了一个工厂函数来返回一个按钮对象,在 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
            })
        }

解决方法

此代码有效:

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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。