title: Javascript events: window.event vs argument reference (function)
body: <p><strong>What is the difference between:</strong></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 test (e) {
      console.log("Event: ", e);
  }
  document.querySelector("button").onclick = test;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;Click!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>and:</strong></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 test () {
      console.log("Event: ", event); // same as window.event
  }
  document.querySelector("button").onclick = test;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;Click!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>They seem to return the exact same object, even containing the same <code>timeStamp</code> value in milliseconds.</p>
  
  <p>I often see code using the first example, using <code>e</code> or <code>evt</code>, but what is wrong with the second example?</p>
  
  <p>I understand that <code>event</code> is the same as <code>window.event</code>, which is a global variable, but what is the purpose of using <code>e</code> if <code>event</code> does the same thing?</p>