title: event listener added within function expression executes immediately
body: <p>Can someone please explain why this event listener added within a function expression is executed immediately?</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>fmperror = function(e){
    e.stopPropagation();
    $('body').on('click', function() {
      $('body').off('click');
      // normally trigger log out of website here.
      // but call alert to similulate log out intention.
      alert('log out');
    });
  };
  
  $(".line-ord-qty").on("change", function (e) {
    e.stopImmediatePropagation();
    // show error message here normally.
    // set up event handler so that any click
    fmperror(e);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { height: 100vh; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
    &lt;label&gt;OrdQty&lt;/label&gt;
    &lt;input class='line-ord-qty' type='number' min='100' step='100' value='100' size='5'&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/kbrfuller/pen/gOWVoxX" rel="nofollow noreferrer">CODEPEN:</a></p>