Groups > de.comp.lang.javascript > #4723

Re: addEventListener funktioniert nicht wie gedacht

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> (permalink)
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

Show key headers only | View raw

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

Back to de.comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

addEventListener funktioniert nicht wie gedacht Maik Koenig <usenetspam@maikkoenig.de> - 2015-09-26 07:25 +0200
  Re: addEventListener funktioniert nicht wie gedacht Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-26 09:12 +0200
    Re: addEventListener funktioniert nicht wie gedacht Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-26 09:13 +0200
    Re: addEventListener funktioniert nicht wie gedacht Maik Koenig <usenetspam@maikkoenig.de> - 2015-09-26 18:58 +0200
  Re: addEventListener funktioniert nicht wie gedacht Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-26 09:16 +0200
  Re: addEventListener funktioniert nicht wie gedacht Stefan Reuther <stefan.news@arcor.de> - 2015-09-26 09:22 +0200
    Re: addEventListener funktioniert nicht wie gedacht Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-26 13:52 +0200
    Re: addEventListener funktioniert nicht wie gedacht Maik Koenig <usenetspam@maikkoenig.de> - 2015-09-26 18:49 +0200

csiph-web