title: Create Dynamic Function Name for Event Listeners in JavaScript
body: <p>I have this code for a math game. I have a function for a button which defines the location and then draws the button specified in the callback.  </p>
  
  <p>The problem is I can only create one of these, since event listeners are, for some baffling reason, referred to by the function they execute, rather than by some other string name.</p>
  
  <p>Unfortunately this means writing a lot of repetitive code instead. Each function called by the eventListener would only differ by the name of the function for that particular button. How do people work around this problem?  Is there no way to name the function (see: functAnim &amp; functClick) using a string?</p>
  
  <pre><code>function factsButton(x, y, doFunction, contentCallback)
  {
      var getID = document.getElementById("canvas_1");
  
      if (getID.getContext)
      {
          var ctx = getID.getContext("2d");
  
          var btnW = 100;
          var btnH = 100;
          var cx = x - btnW/2;
          var cy = y - btnH/2;
          var left = cx;
          var right = cx + btnW;
          var top = cy;
          var bottom = cy + btnH;
  
          function functAnim(event)
          {   
              var mousePos = getMousePos(getID, event);
              var rect = getID.getBoundingClientRect();
              var mouseX = mousePos.x;
              var mouseY = mousePos.y;
              if (mouseX &gt;= left
                  &amp;&amp; mouseX &lt;= right
                  &amp;&amp; mouseY &gt;= top
                  &amp;&amp; mouseY &lt;= bottom)
              {
                  contentCallback(cx, cy, btnW, btnH, true);
  
              }
              else
              {
                  contentCallback(cx, cy, btnW, btnH, false);
              }
  
          }
  
          function functClick(event)
          {
              var mousePos = getMousePos(getID, event);
              var rect = getID.getBoundingClientRect();
              var clickX = mousePos.x;
              var clickY = mousePos.y;
              if (clickX &gt;= left
                  &amp;&amp; clickX &lt;= right
                  &amp;&amp; clickY &gt;= top
                  &amp;&amp; clickY &lt;= bottom)
              {
                  doFunction();
                  getID.removeEventListener("mousemove", functAnim, false);
                  getID.removeEventListener("click", functClick, false);
              }
  
          }
  
          contentCallback(cx, cy, btnW, btnH, false);
          getID.addEventListener("click", functClick, false);
          getID.addEventListener("mousemove", functAnim, false);
      }
  }
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>For some reason it wasn't as clear as to what I wanted. I'm not wanting to call the functions by string, but rather create them with dynamic names. For instance, since I need 4 buttons created, I would like to call my function like this: factsButton(50, 50, addClicked, "add"); With "add", instead of "functClick" they could be called "addClick" and "addAnim" or say it was "sub" instead of "add", it would create those events and functions as "subAnim" and "subClick". That way I get 8 separate event listeners each with different "names". Otherwise I end up with only 2 despite having 4 buttons.</p>