[JavaScript] Probleme mit addEventListener

[BF1942 Freak]

NEUE FRAGE:

hi!

hab n problem. un zwar benutze ich folgende funktion zum registrieren von events

function add_event_listener(object, type, listener)
{
    if (object.addEventListener)
    {
        object.addEventListener(type, listener, false);
    }
    else if (object.attachEvent)
    {
        object.attachEvent('on' + type, listener);
    }
}

add_event_listener(window, 'load', function() { add_event_listener(document.contact_form, 'submit', validate_contact_form_data); });

das problem ist, dass das forumalr in jedem fall abgeschickt wird, dass heißt auch, wenn validate_contact_form_data false zurückliefert. das ist natürlich nicht im sinne des erfinders!

EDIT: Hm, also in allen IEs funktioniert es, nur der Fuchs schickt es immer ab...

 

[Keita]

Die standardmäßige Aktion eines FORM-Elements ist das Versenden der Formulardaten, solange du diese nicht unterbindest, wird sie auch ausgeführt. Bei der direkten Zuweisung eines Eventlisteners an einen Event wird dies durch den Rückgabewert false erreicht:

<form action="#" method="get" onsubmit="return false">

Bei der Zuweisung eines Eventlisteners über DOM unterscheiden sich Firefox und IE. Während der IE den Rückgabewert der Funktion transparent weiterreicht, muß man beim Firefox die Standardaktion mittels der Methode preventDefault() des Event-Objekts unterbinden:

function myEventListener(e)
{
  // Firefox
  if (e.preventDefault)
    e.preventDefault();

  // IE
  return false;
} // end func myEventListener

add_event_listener(document.contact_form, 'submit', myEventListener);

greetings, Keita

 

[BF1942 Freak]

danke schonmal, aber ich fürchte, ich verstehe nicht ganz...

wie binde ich das alles jetzt ein?
irgendwo muss ja auch noch eine referenz auf validate_contact_form_data angegeben werden.. bei deiner zeile kommt die ja gar nicht mehr drin vor..

add_event_listener(document.contact_form, 'submit', myEventListener);

EDIT: Ich hab es jetzt geschafft. aber ich verstehe nicht wirklich, was ich da getan hab.

function validate_contact_form_data(e)
{
    // JavaScript-Code

        alert(error_message);
        e.preventDefault();
        return false;

}

[...]

add_event_listener(window, 'load', function() { add_event_listener(document.contact_form, 'submit', validate_contact_form_data); });

Ich übergeben der Funktion den parameter e doch gar nicht? woher kommt dieses e? was wird zu diesem e?

 

[Keita]

Der Parameter e wird automatisch übergeben und enthält - zumindest bei Browsern außer dem IE - ein Objekt vom Typ Event. Dieses Objekt repräsentiert den Event, der die Funktion ausgelöst hat und bietet bspw. Zugriff auf das Element, welches den Event ausgelöst hat (bei einem Klick auf einen Button bspw. die Referenz auf den Button) und viele andere interessante Dinge.
Beim IE enthält e dummerweise nicht ein Objekt vom Typ Event, dieses muß über Umwege ermittelt werden, was aber im vorliegenden Fall nicht notwendig ist, weil für den IE die letzte Zeile return false; ausreicht.
Bei den anderen Browsern wird einfach geprüft, ob e ein Attribut namens preventDefault hat (Funktionen bzw. Methoden sind auch nur Attribute) und wenn dem so ist, wird preventDefault() aufgrufen.

greetings, Keita