Path: csiph.com!optima2.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!us.feeder.erje.net!newsfeed.fsmpi.rwth-aachen.de!newsfeed.straub-nv.de!newsfeed0.kamp.net!newsfeed.kamp.net!fu-berlin.de!uni-berlin.de!individual.net!not-for-mail
From: Stefan Reuther <stefan.news@arcor.de>
Newsgroups: de.comp.lang.javascript
Subject: Re: addEventListener funktioniert nicht wie gedacht
Date: Sat, 26 Sep 2015 09:22:32 +0200
Lines: 42
Message-ID: <mu5o4o.1bk.1@stefan.msgid.phost.de>
References: <mu5h99.4n0.1@mid.maikkoenig.de>
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit
X-Trace: individual.net 8M8EHcJN0lWyRD6bqFWHLAn975ktgA4qv/0PSrylZbwT/9U3S3
Cancel-Lock: sha1:+RFvSDV59yWVHVmMqmGZPiqFpsw=
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Thunderbird/38.2.0 Hamster/2.1.0.1538
In-Reply-To: <mu5h99.4n0.1@mid.maikkoenig.de>
Xref: csiph.com de.comp.lang.javascript:4723

Am 26.09.2015 um 07:25 schrieb Maik Koenig:
> var k = document.getElementsByClassName("Foo");
> for(var i = 0; i < k.length; i++) {
>   getID(k[i].id).addEventListener('keyup', Rechnen);
>   getID(k[i].id).addEventListener('change', Rechnen);
>   getID(k[i].id).addEventListener('focus', Fokus(k[i].id), true);
>   getID(k[i].id).addEventListener('blur', Verlassen(k[i].id), true);
> };
[...]
> Aber wenn die Seite fertig geladen im Browser ist (hier: Firefox 40.x.x)
> reagieren die Funktionen für focus und blur nicht mehr während keyup und
> change korrekt arbeiten.

Dem geübten Blick fällt auf, dass der Unterschied ist, dass bei den
funktionierenden Events ein Funktionsname steht, bei den nicht
funktionierenden ein Funktionsaufruf. Es muss immer etwas aufrufbares
stehen, also ein Funktionsname oder eine Closure.

Schnellversion ohne große Änderungen:
   function MakeFocus(s) {
      return function() {
         Fokus(s);
      };
   }
   getID(k[i].id).addEventListener('focus', MakeFokus(k[i].id), true);
(Verlassen analog)

Weiterhin ist allerdings anzumerken, dass du statt 'getID(k[i].id)' auch
einfach 'k[i]' schreiben kannst. Außerdem sieht der Event-Listener das
Objekt, an dem er hängt, als 'this', folglich musst du den nicht
ausdrücklich durchreichen. Also:
  function Fokus() {
    this.style.background = "yellow";
    DebugMeldung ('Fokus wurde erkannt im Feld '+this.id);
  };
  // ...
  k[i].addEventListener('focus', Fokus, true);
Und schlussendlich sei noch an die CSS-Pseudoklasse :focus erinnert: um
nur am CSS-Stil rumzufummeln, braucht's kein JavaScript.


  Stefan