title: How do multiple addEventListener work in JavaScript?
body: <p>There are two scripts in a document:</p>
  <pre class="lang-javascript prettyprint-override"><code>// my_script.js goes first
  document.onclick = function() {
      alert(&quot;document clicked&quot;);
  };
  
  // other_script.js comes after
  // this overrides the onclick of my script,
  // and alert will NOT be fired
  document.onclick = function() {
      return false;
  };
  </code></pre>
  <p>To make sure my <code>click</code> event does not get overridden by other script, I switched to <code>addEventListener</code>.</p>
  <pre class="lang-javascript prettyprint-override"><code>// my_script.js goes first
  document.addEventListener(&quot;click&quot;, function() {
      alert(&quot;document clicked&quot;);
  }, false);
  
  // other_script.js comes after
  document.addEventListener(&quot;click&quot;, function() {
      return false;
  }, false);
  </code></pre>
  <p>Now I got another question. Since <code>return false</code> in the second code is defined after <code>alert</code>, how come it does not prevent alert from being called?</p>
  <p>What if I want my script to get total control of click event (like <code>return false</code> all the time disregarding events defined in other scripts)?</p>