javascript - eventListener 适用于应该位于函数私有(private)范围内的变量

Question

这里我有这个输入按钮元素。声明为 btn 的变量使用 document.getElementById('btn') 分配对该按钮的引用，但是 btn 变量位于名为 create 的函数内。据我所知，函数创建了无法全局访问的私有(private)范围，但在这里我可以设法将eventListener添加到该变量，甚至无需调用该函数。这怎么可能？

 function create(){
     var btn=document.getElementById('btn');
 }
 
 btn.addEventListener('click',function(e){
      alert('it worked !!');
 });

<input type='button' value='button' id='btn'>

Answer 1

如果您有一个设置了 id 的元素，则该 id 将用作 window 对象上的键，这意味着它在浏览器中全局可用。请参阅https://html.spec.whatwg.org/multipage/nav-history-apis.html#named-access-on-the-window-object了解更多信息。

就您而言，如果您没有将内部变量命名为 btn，那么您将无法访问它。

 function create(){
     var innerBtn=document.getElementById('btn');
 }
 
 innerBtn.addEventListener('click',function(e){
      alert('not going to happen !!');
 });

<input type='button' value='button' id='btn'>

反之亦然，即使您没有在内部函数中分配 btn，您仍然可以添加监听器。

 btn.addEventListener('click',function(e){
      alert('it worked !!');
 });

<input type='button' value='button' id='btn'>