JavaScript - Problem mit addEventListener

[Felix Riesterer]

Lieber Friedel,

window.onload=function(){
[...]
};

besser ist es heute anstelle von window.onload eben addEventListener auf das document-Objekt anzuwenden:

document.addEventListener("DOMContentLoaded", function () {
  // tuwat
});

Das dafür notwendige Event lautet "DOMContentLoaded" (GrOß-/kLeInScHrEiBuNg beachten!).

  document.getElementById('o1').addEventListener('click', ordnerauf("xxx"));
[...]
function ordnerauf(a) {
  alert(a);
};

Wenn Du nun einem HTML-Element ein Event andichten willst, ist es nicht sinnvoll, den Rückgabewert einer Funktion zuzuweisen. Besser Du übermittelst eine Funktion selbst:

myElement.addEventListener("click", ordnerauf);

Wenn Du der das Event verarbeitenden Funktion, in Deinem Falle ordnerauf, noch einen Parameter mitgeben willst, dann geht das so:

myElement.addEventListener(
  "click",
  function () {
    ordnerauf("abc");
  }
);

Sinnvoller wäre es allerdings, wenn die das Event verarbeitende Funktion, die ohnehin ein Eventobjekt erhält, selbst entscheiden darf, was zu tun ist:

myElement.addEventListener(
  "click",
  function (eventObj) {
    // standard vs. IE < 9
    var myElement = eventObj.target || eventObj.srcElement;

    if (myElement.id) {
      ordnerauf(myElement);
    }
  }
);

Wenn ordnerauf nicht den Namen einer ID, sondern das Element selbst verarbeiten kann, wäre obige Lösung einfacher zu handhaben, da Du alle Deine Buttons mit einer simplen Schleife auf diese Funktion trainierst:

document.addEventListener("DOMContentLoaded", function () {

  var uls = document.getElementsByTagName("ul");

  for(i = 0; i < uls.length; i++) {

    uls[i].addEventListener(
      "click",
      function (eventObj) {
        // standard vs. IE < 9
        var myElement = eventObj.target || eventObj.srcElement;

        if (myElement.id) {
          ordnerauf(myElement);
        }
      }
    );
  }
});

Wenn man jetzt ohnehin in der Funktion darauf prüft, ob das ul-Element eine ID hat, um nur dann ordnerauf auszuführen, kann man sich die Mühe sparen, allen ul-Elementen einzeln einen Listener für das click-Event einzurichten. Stattdessen registriert man einen Listener für das body-Element:

document.addEventListener("DOMContentLoaded", function () {

  document.body.addEventListener(
      "click",
      function (eventObj) {
        // standard vs. IE < 9
        var myElement = eventObj.target || eventObj.srcElement;

        if (myElement.tagName // is not simple text node
          && myElement.tagName.match(/^ul$/i) // is <ul>
          && myElement.id // has ID
        ) {
          ordnerauf(myElement);
        }
      }
    );
  }
});

Liebe Grüße,

Felix Riesterer.