JS: onclick oder nicht, das ist hier die Frage

by snirgel 13 Jul 0 Comments

Ich versuche mittlerweile Javascript immer möglichst generisch zu schreiben um Redundanzen zu vermeiden und zusätzlich möchte ich am liebsten auch kein Inline-Javascript verwenden. Diese hat neben den best-practice-unobstrusive-… auch Performance-Gründe, denn bei jedem sich öffnenden Script-Tag im Code wartet die Seite beim Laden bis dieser ausgeführt ist und wird dann erst weiter gerendert.

Jetzt stehe ich gerade vor dem Problem, dass ich eine Liste von Elementen habe, die bei einem Klick alle das gleiche machen sollen, nämlich einen Request, der HTML zurückliefert, womit ein anderer Bereich der Seite aktualisiert wird:

  <ul>
    <li class="listeelement" id="load-content-id-1"><div>contentzeug</div></li>
    <li class="listeelement" id="load-content-id-2"><div>contentzeug</div></li>
    <li class="listeelement" id="load-content-id-3"><div>contentzeug</div></li>
    <li class="listeelement" id="load-content-id-4"><div>contentzeug</div></li>
  </ul>

Im ersten Moment würde ich jetzt den Klick wie folgt an das .listelement hängen und den Request starten (so auch meine bisherige Vorgehensweise):

function sendRequest() {
  jQuery('.listeelement').live( "click", function() {
    1. Fummel die Id des nachzuladenden Contents aus der css-id raus
    2. Sende den Request an die Action
  });
}

Irgendwie nervt mich hierbei aber ganz gewaltig Punkt 1 bei der Verarbeitung des Klicks. Denn man muss etwaige Parameter erstens immer irgendwie im Markup ‘verstecken’ und zweitens es dann wieder rausfummeln um es an die Action zu schicken. Schön ist anders und unter dem Performance-Aspekt kann das ja auch nicht der Stein des Weisen sein.

Am einfachsten und mir am liebsten wäre meiner Ansicht nach einfach folgendes:

  <ul>
    <li onclick="sendRequest({'id' : '1' })"><div>contentzeug</div></li>
    <li onclick="sendRequest({'id' : '2' })"><div>contentzeug</div></li>
    <li onclick="sendRequest({'id' : '3' })"><div>contentzeug</div></li>
    <li onclick="sendRequest({'id' : '4' })"><div>contentzeug</div></li>
  </ul>

Woraus sich folgendes Script ergibt:

function sendRequest(pParams) {
      jQuery.ajax({
        type: "GET",
        url: action,
        dataType: "json",
        data: pParams,
        success: doSomething
      });
}

Die Verarbeitung ist, meiner Ansicht nach, damit definitv viel einfacher und auch schneller, würd ich mal meinen.
Ich bin aber etwas unsicher, ob das jetzt ne gute oder schlechte Idee ist diesen Weg zu gehn, da zumal auch nicht genau weiß, ob das onclick überhaupt noch verwendet werden soll.

Na vielleicht hat da ja irgendjemand ne Meinung dazu. Würde mich freuen und auch wirklich weiterhelfen.

Leave a Reply