title: JQuery: Are there any downsides of using only one listener for all buttons?
body: <p>I am currently working on a jquery implementation of tictactoe in order to learn jquery. In my html I defined nine buttons like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="column-center"&gt;&lt;button id="1" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;div class="column-left"&gt;&lt;button id="2" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;div class="column-right"&gt;&lt;button id="3" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="column-center"&gt;&lt;button id="4" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;div class="column-left"&gt;&lt;button id="5" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;div class="column-right"&gt;&lt;button id="6" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="column-center"&gt;&lt;button id="7" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;div class="column-left"&gt;&lt;button id="8" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;div class="column-right"&gt;&lt;button id="9" style="width: 100px; height: 100px"&gt;&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When implementing the jquery logic i thought it would be nice if I would only use one listener for all those buttons, because they are all doing the same thing, I did it like that:</p>
  
  <pre><code>    $("button").on('click', function () {
    if(this.id==1||this.id==2||this.id==3||this.id==4||this.id==5||this.id==6||this.id==7||this.id==8||this.id==9){
          $("#"+String(this.id)).css("background-color",$("#color1").css('backgroundColor'));
          $("#"+String(this.id)).prop('disabled', true);
          //all the other logic here...
      }
      else if (this.id==startGame) {
        //start the Game
      }
  });
  </code></pre>
  
  <p>I have three questions here:</p>
  
  <ol>
  <li><p>What about performance is it worse than using one listener for every button?</p></li>
  <li><p>Is it good practice do implement the listener like that?</p></li>
  <li><p>Are there any downsides (e.g. some weird bugs that could happen)?</p></li>
  </ol>