Javascript 如何在创建变量的函数之外调用该变量？

本质上，我有一个小代码段，这对我来说是一个反复出现的问题，（显示错误消息）我在函数内部创建一个按钮，但当我稍后尝试向其中添加事件侦听器时，它不起作用（我理解为什么它不起作用）

我尝试在函数外部启动链接到按钮的变量，就像

var newListItemBtn

但它告诉我不能将事件侦听器添加到未定义的变量中。（我也明白原因。）

如果我尝试用代码初始化变量

var newListItemBtn=document.createElement（'button'）

它在代码运行时创建按钮，而不是在调用函数时创建，因此它将替换新列表中的按钮

我如何才能在函数外部调用变量并向其添加eventlistener


var createListBtn=document.getElementById（'createListBtn'），
listArea=document.getElementById（'listArea'）；
函数createList（）{
var list=document.createElement（'ul'），
newListItemBtn=document.createElement（'button'）；
newListItemBtn.classList.add（'newListItemBtn'）；
newListItemBtn.innerText='New Item'；
list.appendChild（newListItemBtn）；
listArea.appendChild（列表）；
返回newListItemBtn；
}
createListBtn.addEventListener（'单击'，函数（））{
createList（）；
});
newListItemBtn.addEventListener（'单击'，函数（））{
警惕（‘嘿’）；
});

文件
创建列表
将
单击
事件侦听器添加到
新建列表项btn
中（在
创建列表（）
函数中）声明的相同范围内。
这将起作用：


var createListBtn=document.getElementById（'createListBtn'），
listArea=document.getElementById（'listArea'）；
函数createList（）{
var list=document.createElement（'ul'），
newListItemBtn=document.createElement（'button'）；
newListItemBtn.classList.add（'newListItemBtn'）；
newListItemBtn.innerText='New Item'；
list.appendChild（newListItemBtn）；
listArea.appendChild（列表）；
newListItemBtn.addEventListener（'单击'，函数（））{
警报（“hi”）；
});
}
createListBtn.addEventListener（'单击'，函数（））{
createList（）；
});

文件
创建列表
你不能这么做，因为

newListItemBtn
的变量范围仅在
createList（）
函数内部可用，不能在外部访问
即使您将
newListItemBtn
变量定义移到外部，元素仍然不可用，您仍然会出错
最好在
createList（）函数中移动
newListItemBtn
event listner

 function createList(){
    var list = document.createElement('ul'),
        newListItemBtn = document.createElement('button');

    newListItemBtn.classList.add ('newListItemBtn');
    newListItemBtn.innerText = 'New Item';

    newListItemBtn.addEventListener('click', function(){
       alert('hey');
    });    

    list.appendChild(newListItemBtn);
    listArea.appendChild(list);
    return newListItemBtn;
}

是的，这是我通常会做的，但它会变得混乱，所以我试图看看是否有一种更有效的方法来编写此代码。这是一种有效的方法，因为如果您创建多个
newListItemBtn
元素，
clcik
事件将只附加到已创建的新元素。如果要将
newListItemBtn
移动到外部，则可能会发生事件绑定重复