Dieter: Problem mit eventhandler/ Warum geht's nur nicht???

SELF-Forum

Problem mit eventhandler/ Warum geht's nur nicht???

Dieter
– Informationen zu den Bewertungsregeln

Hallo!
Ich habe in selfthtml nicht gefunden, warum das onclick hier nicht funktioniert. Ich habe Firefox 1.5.0.1.
Zusatzfrage: Wie muss die Syntac lauten, damit ich im <Script>-Bereich etwas schreiben kann wie:
document.getElementById("pic1").onclick=Coords;

MfG
Dieter
****************************************************************
<html>
<head>
<title>test </title>
<script type="text/javascript">
function Coords (Ereignis) {
  if (!Ereignis) {
    Ereignis = window.event;
    var newx = Ereignis.offsetX;var newy = Ereignis.offsetY;
  } else {
    var newx = Ereignis.pageX;var newy = Ereignis.pageY;
  }
  var pos = "x-Wert: " + newx + " / y-Wert: " + newy;
  document.setquote.result.value = pos+ " hallo";
}
</script>
</head>

<body>

<img id="pic1" src="http://src.selfhtml.org/logo.gif" onclick="Coords(this)">
<form name="setquote" action=""><textarea name="result" cols="50" rows="10"></textarea>
<INPUT TYPE="SUBMIT" Value="Setit" name="setsubmit">
</form>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit eventhandler/ Warum geht's nur nicht???

    mbr
    – Informationen zu den Bewertungsregeln

    Hallo Dieter,
    also: zunächst einmal solltest du in dieser Zeile das this weglassen (dann funktioniert es erstmal schon im IE)

      
<img id="pic1" src="http://src.selfhtml.org/logo.gif" onclick="Coords(this)">

    Im FF funktioniert es dann allerdings immer noch nicht. Das geht dann folgendermassen: Im Script Bereich notierst du

      
function handlerEinrichten()  
{  
  document.getElementById("pic1").onclick=Coords;  
}  
setTimeout('handlerEinrichten();',500);

    Jetzt frag mich aber nicht, warum es notwendig ist, den eventhandler onclick nochmal in Javascript einzurichten, obwohl er ja im HTML Code schon definiert ist. Ein weiterer Stolperstein ist natürlich das setTimeout; da ja bei Abarbeitung des script-Bereiches der Body des HTML-Dokumentes noch nicht da ist (und damit auch das Element mit der id "pic1" noch nicht vorhanden ist) muss die Einrichtung des eventhandlers zeitverzögert erfolgen. Auf jeden Fall klappt das Beispiel nun.

    P.S.: ARGH: bloss gut, dass du die entscheidende Zeile schon hingeschrieben hattest, denn ich hätte natürlich versucht, den eventhandler so zu "deklarieren":

      
document.getElementById("pic1").onclick="Coords();";

    Kann man denn ahnen, dass hier nur der Funktionsname ohne irgendwelche Klammern, Semikola, usw anzugeben ist? - naja, Javascript halt...

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit eventhandler/ Warum geht's nur nicht???

      Der Martin
      – Informationen zu den Bewertungsregeln

      Moin,

      also: zunächst einmal solltest du in dieser Zeile das this weglassen (dann funktioniert es erstmal schon im IE)

      <img id="pic1" src="http://src.selfhtml.org/logo.gif" onclick="Coords(this)">

        
wobei ich ergänzen darf: Es ist oft eine gute Idee, im Eventhandler gleich eine Referenz auf das betroffene Objekt mitzugeben. Wenn die aufgerufene Funktion aber stattdessen ein Event-Objekt erwartet ...  
  

> Im FF funktioniert es dann allerdings immer noch nicht.  
  
Wer sagt das? Zumindest meine beiden Firefoxe 1.0 und 1.0.4 reagieren anstandslos auf einen so notierten onclick-Handler.  
  

> P.S.: ARGH: bloss gut, dass du die entscheidende Zeile schon hingeschrieben hattest, denn ich hätte natürlich versucht, den eventhandler so zu "deklarieren":  
>   
> `document.getElementById("pic1").onclick="Coords();";`{:.language-javascript}  
>   
> Kann man denn ahnen, dass hier nur der Funktionsname ohne irgendwelche Klammern, Semikola, usw anzugeben ist? - naja, Javascript halt...  
  
Ja, das kann man ahnen, weil es nur konsequent ist: Schließlich willst du ja nicht die Funktion Coords() aufrufen und dem onclick-Handler das Ergebnis zuweisen (abgesehen davon, dass Dieters Funktion nicht einmal ein Ergebnis zurückgibt), sondern eine Referenz auf die Funktion selbst.  
  
Schönen Tag noch,  
 Martin  

-- 
Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.  
Heißes Wasser kann man immer gebrauchen.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit eventhandler/ Warum geht's nur nicht???

        mbr
        – Informationen zu den Bewertungsregeln

        Hallo

        Im FF funktioniert es dann allerdings immer noch nicht.

        Wer sagt das? Zumindest meine beiden Firefoxe 1.0 und 1.0.4 reagieren anstandslos auf einen so notierten onclick-Handler.

        Also, mein FF (1.0.6) hat ohne den eventhandler in Javascript gar nichts getan (nichtmal eine Fehlermeldung, einfach _gar nichts_).
        Ich hab übrigens fast eine dreiviertel Stunde an dem Skript rumgebastelt, bis dann endlich alles funktionierte. Von daher war ich vielleicht etwas frustriert.

        P.S.: ARGH: bloss gut, dass du die entscheidende Zeile schon hingeschrieben hattest, denn ich hätte natürlich versucht, den eventhandler so zu "deklarieren":

        document.getElementById("pic1").onclick="Coords();";

        Kann man denn ahnen, dass hier nur der Funktionsname ohne irgendwelche Klammern, Semikola, usw anzugeben ist? - naja, Javascript halt...

        Ja, das kann man ahnen, weil es nur konsequent ist: Schließlich willst du ja nicht die Funktion Coords() aufrufen und dem onclick-Handler das Ergebnis zuweisen (abgesehen davon, dass Dieters Funktion nicht einmal ein Ergebnis zurückgibt), sondern eine Referenz auf die Funktion selbst.

        Vielleicht hab ich da jetzt was noch nicht richtig verstanden, aber ich will doch eigentlich genau das, was du geschrieben hast: beim event onclick soll die Funktion Coords aufgerufen werden. Vielleicht liegt mein Unverständnis auch daran, dass es im HTML-Code (nicht in Javascript) genauso aussieht: Aufruf der Funktion Choords - mit Klammer und Semikolon und allem drum und dran... Wobei ich ehrlich gesagt noch gar nicht drüber nachgedacht habe, was eigentlich mit dem Rückgabewert passiert - sofern überhaupt einer vorhanden ist. So, je länger ich nun vor diesem Post sitze und überlege ob ich es überhaupt abschicke, desto mehr sehe ich, dass ich mich mit javascript noch eingehender beschäftigen muss. Allerdings finde ich nach wie vor, dass an Javascript so einiges gewöhnungsbedürftig (wenn nicht sogar unlogisch) ist.

        liebe Grüße mbr

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Problem mit eventhandler/ Warum geht's nur nicht???

          Struppi Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Vielleicht hab ich da jetzt was noch nicht richtig verstanden, aber ich will doch eigentlich genau das, was du geschrieben hast: beim event onclick soll die Funktion Coords aufgerufen werden. Vielleicht liegt mein Unverständnis auch daran, dass es im HTML-Code (nicht in Javascript) genauso aussieht: Aufruf der Funktion Choords - mit Klammer und Semikolon und allem drum und dran... Wobei ich ehrlich gesagt noch gar nicht drüber nachgedacht habe, was eigentlich mit dem Rückgabewert passiert - sofern überhaupt einer vorhanden ist. So, je länger ich nun vor diesem Post sitze und überlege ob ich es überhaupt abschicke, desto mehr sehe ich, dass ich mich mit javascript noch eingehender beschäftigen muss. Allerdings finde ich nach wie vor, dass an Javascript so einiges gewöhnungsbedürftig (wenn nicht sogar unlogisch) ist.

          Was denn?

          Du musst nur verstehen was eine Funktionsreferenz ist und wie Eventhandler in JS funktionieren.

          Schau dir das Beispiel mal an:

            
function eineFunktion()  
{  
    alert('Hallo!');  
}  
  
var eineFunktionsReferenz = eineFunktion;  
alert(eineFunktionsReferenz );  
eineFunktionsReferenz();

          Der Variable eineFunktionsReferenz wird hier die Referenz auf die Funkion eineFunktions() zugewiesen. Wenn du dir diese anzeigen läßt, macht JS daraus: eineFunktionsReferenz.toString() und du siehst den Quelltext. Wenn du die Klammer um die Referenz setzt, dann wird eben die Funktion aufgerufen.

          Genau das Gleiche passiert jetzt bei den den Eventhandlern

          [Objekt].onevent muss eine Referenz auf eine Funktion beinhalten. Tritt der Event ein (wie z.b. ein Klick auf das Element) wird nachgesehen, ob die diese Eigenschaft eine Funktionsreferenz beinhaltet und diese wird aufgerufen.

          --> Object.click();

          dann passiert in etwa folgendes:

          if(typeof this.onclick == 'function') this.onclick(event)

          D.h. intern wird in Mozillabrowsern der Event dann automatisch an als Funktionsparameter übergeben. Dieser muss bei inline (also innerhalb des HTML Tags deklarierten) Eventhandler von Hand übergeben werden.

          HTH

          Struppi.

          --
          Javascript ist toll
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Problem mit eventhandler/ Warum geht's nur nicht???

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich habe in selfthtml nicht gefunden, warum das onclick hier nicht funktioniert. Ich habe Firefox 1.5.0.1.

    Nicht funktioniert ist wohl falsch, er wird in der JS Konsole wohl eher undefinierte Werte bemängeln.

    Zusatzfrage: Wie muss die Syntac lauten, damit ich im <Script>-Bereich etwas schreiben kann wie:
    document.getElementById("pic1").onclick=Coords;

    Genau so wie du es getan hast, allerdings erst nachdem das Element "pic1" geladen wurde.

    <html>
    <head>
    <title>test </title>
    <script type="text/javascript">
    function Coords (Ereignis) {

    Hier hast du einen Parameter "Ereignis" den übergibst du aber nicht.

    if (!Ereignis) {
        Ereignis = window.event;
        var newx = Ereignis.offsetX;var newy = Ereignis.offsetY;
      } else {
        var newx = Ereignis.pageX;var newy = Ereignis.pageY;
      }

    Das läßt sich übersichtlicher Formulieren:

    var e = Ereignis || window.event;
    var newx = e.offsetX || e.pageX;
    var newy = e.offsetY || e.pageY;

    <img id="pic1" src="http://src.selfhtml.org/logo.gif" onclick="Coords(this)">
    <form name="setquote" action=""><textarea name="result" cols="50" rows="10"></textarea>

    Hier übergibst du der Funktion "this" also eine Referenz auf das Bild. Wo ist der Event?

    Hier: ... onclick="Coords(event, this)" ...

    und die Funktion dann erweitern:

    function Coords (Ereignis, Bild)

    Struppi.

    --
    Javascript ist toll
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit eventhandler/ Warum geht's nur nicht???

      Dieter
      – Informationen zu den Bewertungsregeln

      Hallo!
      Erst mal vielen Dank!
      Es ist einfach unglaublich, ich habe ja fast alles, was im Thread besprochen wurde, schon vorher probiert, und ich könnte ja wetten, dass ich auch schon

      <img id="pic1" src="http://src.selfhtml.org/logo.gif" onclick="Coords(this)">
      <form name="setquote" action=""><textarea name="result" cols="50" rows="10"></textarea>

      Hier übergibst du der Funktion "this" also eine Referenz auf das Bild. Wo ist der Event?

      Hier: ... onclick="Coords(event, this)" ...

      probiert habe. Aber anscheinend habe ich statt event immer window.event versucht.

      Naja, jetzt klappt es wenigstens. :)

      MfG
      Dieter

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln