title: addEventListener doesn't work with default paramaters
body: <p>Why does functions with default parameters not work if i call the function with <code>addEventListener</code>?</p>
  <p>Here is an example :</p>
  <p>This example function below generates some random strings, and i called the function by using <code>onclick()</code> in the html file, which perfectly works</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const notationGraph = {
    "U": ["L", "R", "F", "B"],
    "D": ["L", "R", "F", "B"],
    "L": ["U", "D", "F", "B"],
    "R": ["U", "D", "F", "B"],
    "F": ["U", "D", "L", "R"],
    "B": ["U", "D", "L", "R"],
  };
  
  const switches = ["", "\'", "2"]; 
  
  function randItem(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }
  
  function generate3x3(Min = 20, Max = 25) {
    let scrambles = []; 
    let prev;
    const len = Math.floor(Math.random() * (Max - Min + 1) + Min);
    for (let i=0; i&lt;len; i++) {
      let notation = randItem(prev ? notationGraph[prev] : Object.keys(notationGraph));
      let swtch = randItem(switches);
      scrambles.push(`${notation}${swtch}`);
      prev = notation;
    }
    console.log(scrambles.join(" "));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttonTest" onclick="generate3x3()"&gt;test button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>but now, if i try the <code>addEventListener</code> method instead of <code>onclick()</code> like the code below, it does not work and <code>console.log</code>s empty strings</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const notationGraph = {
    "U": ["L", "R", "F", "B"],
    "D": ["L", "R", "F", "B"],
    "L": ["U", "D", "F", "B"],
    "R": ["U", "D", "F", "B"],
    "F": ["U", "D", "L", "R"],
    "B": ["U", "D", "L", "R"],
  };
  
  const switches = ["", "\'", "2"]; 
  
  function randItem(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
  }
  
  function generate3x3(Min = 20, Max = 25) {
    let scrambles = []; 
    let prev;
    const len = Math.floor(Math.random() * (Max - Min + 1) + Min);
    for (let i=0; i&lt;len; i++) {
      let notation = randItem(prev ? notationGraph[prev] : Object.keys(notationGraph));
      let swtch = randItem(switches);
      scrambles.push(`${notation}${swtch}`);
      prev = notation;
    }
    console.log(scrambles.join(" "));
  }
  document.getElementById("buttonTest").addEventListener("click", generate3x3)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="buttonTest"&gt;test button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm wondering why doesn't it work, what am i doing wrong?</p>