eventListener 适用于应该在函数的私有范围内的变量

Question

这里我有这个输入按钮 element.A 声明为 btn 的变量使用 document.getElementById('btn') 分配了对该按钮的引用，但 btn 变量在函数内部命名为 create。据我所知，函数会创建无法全局访问的 private scope，但在这里我可以设法将 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-object 上的键，这意味着它在浏览器中全局可用。有关详细信息，请参阅 https://html.spec.whatwg.org/#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'>

eventListener 适用于应该在函数的私有范围内的变量

eventListener works on variable which is supposed to be inside a function's private scope

javascript

scope

dom-events