EventListener: click

[Thorsten Legat]

Hallo.

Ich verstehe nicht, warum die Funktion "schreiben()" aufgerufen wird. Eigentlich möchte ich nur beim Anklicken eines Buttons "schreiben()" ausführen. Kann mir jemand erklären, warum das so ist?

Danke!

document.addEventListener('DOMContentLoaded', init);

function init() {
 var kartenhoehe=10;
 var kartenbreite=15;
 tabelle();
 listener();

 function schreiben() {
  document.write('warum?');
 }

 function tabelle() {
  var text='';
  text+='<table>';
  for(var a=0; a<kartenhoehe; a++) {
   text+='<tr>';
   for(var b=0; b<kartenbreite; b++) {
    text+='<td><button id="btn'+a+'.'+b+'"></button></td>';
   }
  text+='</tr>';
  }
  text+='</table>';
  document.body.innerHTML=text;
 }

 function listener() {
  for(var a=0; a<kartenhoehe; a++) {
   for(var b=0; b<kartenbreite; b++) {
    var elem = document.getElementById('btn'+a+'.'+b);
    elem.addEventListener('click', schreiben());
   }
  }
 }

}

[Orlok]

Hallo

Ich verstehe nicht, warum die Funktion "schreiben()" aufgerufen wird.

elem.addEventListener('click', schreiben());

Weil du sie durch die runden Klammern nach ihrem Bezeichner selbst aufrufst, statt darauf zu warten, dass sie beim Eintritt des Ereignisses automatisch aufgerufen wird…

elem.addEventListener('click', schreiben);

Gruß,

Orlok

[Thorsten Legat]

Danke!

[Thorsten Legat]

Und wenn ich der Funktion Argumente übergeben möchte?

document.addEventListener('DOMContentLoaded', init);

function init() {
 var kartenhoehe=5;
 var kartenbreite=10;
 tabelle();
 listener();

 function schreiben(a,b) {
  document.write('ok.');
 }

 function geklickt(a,b) {
  schreiben(a,b);
 }

 function tabelle() {
  var text='';
  text+='<table>';
  for(var a=0; a<kartenhoehe; a++) {
   text+='<tr>';
   for(var b=0; b<kartenbreite; b++) {
    text+='<td id="b'+a+'.'+b+'"></td>';
   }
  text+='<tr>';
  }
  text+='</table>';
  document.body.innerHTML=text;
 }

 function listener() {
  for(var a=0; a<kartenhoehe; a++) {
   for(var b=0; b<kartenbreite; b++) {
    document.getElementById('b'+a+'.'+b).addEventListener('click', geklickt(a+','+b));
   }
  }
 }
}

[Reinhard]

Hey,

Und wenn ich der Funktion Argumente übergeben möchte?

    document.getElementById('b'+a+'.'+b).addEventListener('click', geklickt(a+','+b));

In diesem Fall hast du mehrere Optionen. Du könntest beispielsweise eine anonyme Funktion übergeben:

elem.addEventListener('click', function() {
    geklickt(a + ',' + b);
});

Oder du könntest die Parameter an die Funktion binden:

elem.addEventListener('click', geklickt.bind(this, a + ',' + b));

Beachte, dass du das Click-Event in diesen beiden Fällen nicht einfach so wieder mit removeEventListener entfernen kannst. Dazu musst du auf eine feste Funktion referenzieren.

Reinhard

[Gunnar Bittersmann]

@@Thorsten Legat

Und wenn ich der Funktion Argumente übergeben möchte?

Dann kapselst du das in eine anonyme Funktion:

document.getElementById('b' + a + '.' + b).addEventListener('click', function() { geklickt(a+','+b) });

Dan wäre noch die Schleife zu eliminieren!

  for(var a=0; a<kartenhoehe; a++) {
   for(var b=0; b<kartenbreite; b++) {
    document.getElementById('b'+a+'.'+b).addEventListener(…);
   }
  }

Das ist ein sicheres Zeichen dafür, dass du nicht jedem Element einen eigenen Eventhandler verpassen willst, sondern einen Eventhandler für ein übergeornetes Element registrieren und Event-Delegation nutzen willst.

LLAP 🖖

[Thorsten Legat]

Ahh, so geht das. Danke für die Antworten!

[Thorsten Legat]

Hey, kann ich auch in einer Funktion, die als Listener aufgerufen wird und Argumente übergeben bekommt, auf das event.target zugreifen? Ich habe das bisher immer so gesehen, dass die Funktion selbst dann keine Argumente übergeben bekam und man einfach ein "e" oder "event" in die runden Klammern geschrieben hat.

Dabei verstehe ich auch grundsätzlich nicht, warum die Funktion dann weiss, wo geklickt wurde. Ich dachte eine Funktion kennt nur das, was ich in die runden Klammern schreibe, wenn ich sie aufrufe.

function geklickt(a,b) {
 event.target.id; // hier moechte ich auf das angeklickte teil zugriff haben.
}

tabelle.addEventListener('click',function() { geklickt(a,b) } );

Wie kann man eigentlich am besten Programmieren verstehen? Gibt es zu jeder Sprache eine Anleitung, oder woher weiss der, der ein Programm schreibt, ob die Sprache zum Beispiel "call by reference" oder "call by value" benutzt? Also ich habe noch nicht so viel Erfahrung und möchte ganz gerne lernen, indem ich einfach immer mal etwas Neues probiere. Aber ich habe noch nicht verstanden, wo die unterste Stufe ist, also wo ich suchen kann, wie und warum etwas überhaupt in einer Sprache funktioniert.

Hoffe ich habe mich nicht allzu unverständlich ausgedrückt... Danke schon mal für die Hilfe!

[Thorsten Legat]

Hey, kann ich auch in einer Funktion, die als Listener aufgerufen wird und Argumente übergeben bekommt, auf das event.target zugreifen? Ich habe das bisher immer so gesehen, dass die Funktion selbst dann keine Argumente übergeben bekam und man einfach ein "e" oder "event" in die runden Klammern geschrieben hat.

Dabei verstehe ich auch grundsätzlich nicht, warum die Funktion dann weiss, wo geklickt wurde. Ich dachte eine Funktion kennt nur das, was ich in die runden Klammern schreibe, wenn ich sie aufrufe.

function geklickt(a,b) {
 event.target.id; // hier moechte ich auf das angeklickte teil zugriff haben.
}

tabelle.addEventListener('click',function() { geklickt(a,b) } );

Wie kann man eigentlich am besten Programmieren verstehen? Gibt es zu jeder Sprache eine Anleitung, oder woher weiss der, der ein Programm schreibt, ob die Sprache zum Beispiel "call by reference" oder "call by value" benutzt? Also ich habe noch nicht so viel Erfahrung und möchte ganz gerne lernen, indem ich einfach immer mal etwas Neues probiere. Aber ich habe noch nicht verstanden, wo die unterste Stufe ist, also wo ich suchen kann, wie und warum etwas überhaupt in einer Sprache funktioniert.

Hoffe ich habe mich nicht allzu unverständlich ausgedrückt... Danke schon mal für die Hilfe!