title: eventListener works on variable which is supposed to be inside a function's private scope
body: <p>Here I have this input button element.A variable declared as <code>btn</code> is assigned a reference to that button using <code>document.getElementById('btn')</code>, but the <code>btn</code> variable is inside a function named <code>create</code>. As far I know functions create <em>private scope</em> which can't be accessed globally, but here I can manage to add <code>eventListener</code> to that variable without even invoking the function. How is this  possible?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function create(){
       var btn=document.getElementById('btn');
   }
   
   btn.addEventListener('click',function(e){
        alert('it worked !!');
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type='button' value='button' id='btn'&gt;</code></pre>
  </div>
  </div>
  </p>