Path: csiph.com!news.mixmin.net!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: de.comp.lang.javascript Subject: Re: addEventListener funktioniert nicht wie gedacht Date: Sat, 26 Sep 2015 09:12:08 +0200 Organization: PointedEars Software (PES) Lines: 90 Message-ID: <3498620.gYUL5yYlXn@PointedEars.de> References: Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1443251529 19415 eJwFwYERACEIA7CV7EFbHeflYf8RTBiCyikqOZz9h86tbIybHwbVclgbMcuN8qXB8Cr2uQ8dIBDg (26 Sep 2015 07:12:09 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Sat, 26 Sep 2015 07:12:09 +0000 (UTC) User-Agent: KNode/4.14.2 X-User-ID: eJwFwYEBwCAIA7CXLJSi5zCR/09YEi7oJhViTIzTgKfymlNRQjtLtnttvGhH4+jVMOmfWB2baz0715KJ/gE/ARTC Cancel-Lock: sha1:yeiV2epJtadrtX5r6TimLwkNNDs= X-NNTP-Posting-Host: eJwNwokRgEAIA8CWVEgi5XA8/ZegswvjzZITdOwPB2Iy/FBjV6MsO1pSLsKw9YLzTEI5GR8XDxFQ Xref: csiph.com de.comp.lang.javascript:4720 Maik Koenig wrote: > Gegeben ist ein recht umfangreiches Dokument mit ca 120 Input-Feldern. > Alle Felder haben neben unterschiedlichen CSS-Klassen auch eine > gemeinsam, damit das hier funktioniert(*1): > > var k = document.getElementsByClassName("Foo"); “k” ist ein nichtssagender Bezeichner. Verwende “fields” o.ä. Verwende besser kleingeschriebene Klassennamen. Willst Du auch IE < 9 oder IE 9 im Compatibility Mode unterstützen, musst Du document.getElementsByClassName() emulieren. > for(var i = 0; i < k.length; i++) { for (var i = 0, len = k.length; i < len; ++i) { > getID(k[i].id).addEventListener('keyup', Rechnen); > […] // jedoch siehe oben; es böte sich dann “field” statt “ki” an. var ki = k[i]; ki.addEventListener('keyup', Rechnen); usw. .addEventListener() musst Du wieder emulieren, wenn Du IE < 9 und IE 9 Compat unterstützen willst. “Rechnen” sollte “rechnen” usw. bzw. “calc” oder “calculate” usw. sein, denn es handelt sich nicht um einen Konstruktor, und üblich (weil international verständlich) sind englischsprachige Bezeichner (selbst in de.comp.lang.*). Globale Funktionen und Variablen sind zu vermeiden. Siehe Module Pattern. Informier Dich über Event-Bubbling, so dass Du das Hinzufügen von Event- Listenern zu jedem einzelnen Element einer Elementgruppe vermeiden kannst. > getID(k[i].id).addEventListener('change', Rechnen); > getID(k[i].id).addEventListener('focus', Fokus(k[i].id), true); Das ruft die Funktion mit dem Namen “Fokus” auf beim Hinzufügen des Listeners auf, also lange *bevor* der focus-Event eintritt. Die Funktion hat keinen expliziten Rückgabewert, ihr Rückgabewert ist also der “undefined”-Wert. Dieser Wert ist für einen Event-Listener unzulässig; bestenfalls wird er ignoriert, schlimmstenfalls führt er zu einem Laufzeitfehler. Du suchst (bzw. eher nicht, siehe unten): k[i].addEventListener('focus', function () { Fokus(k[i].id) }, true); > getID(k[i].id).addEventListener('blur', Verlassen(k[i].id), true); Dito. > }; > > function Fokus(Feld) { > getID(Feld).style.background = "yellow"; function focus (field) { field.style.background = "yellow"; > DebugMeldung ('Fokus wurde erkannt im Feld '+Feld);}; Es handelt sich um eine Funktionsdeklaration, das Semikolon am Ende der Zeile ist daher überflüssig. Verwende JSHint. > […] > Per onLoad-Event _load_-Event > […] > *1: getID = function(ID) {return document.getElementById(ID);} Das macht Deinen Code nur *noch* langsamer. Wenn Du “getID” nicht deklarierst (ich sehe hier kein “var”), ausserdem fehlerträchtiger und inkompatibler. “ID” sollte wieder “id” sein, denn es handelt sich nicht um eine Konstante. -- PointedEars FAQ: | SVN: Twitter: @PointedEars2 | ES Matrix: Please do not cc me. / Bitte keine Kopien per E-Mail.