Verständnisproblem eventhandling

[Matthias Apsel]

Om nah hoo pez nyeetz, alle!

Ich habe ein Formualar, das vor dem Absenden auf gewisse Fehler geprüft werden soll. Verpasse ich dem Formular einen entsprechenden Handler

<form ... name="myform" onsubmit="return validieren();">

funktioniert das wunderbar, das Formular wird validiert und im Fehlerfall die Standardaktion unterdrückt.

Verwende ich jedoch (Quelle: molily)

~~~javascript function addEvent (obj, type, fn)
  {
     if (obj.addEventListener)
     {
       obj.addEventListener(type, fn, false);
     }
     else if (obj.attachEvent)
     {
       obj.attachEvent('on' + type, function () {return fn.call(obj, window.event);});
     }
  }

  
und  
  
  `addEvent(document.forms['myform'], 'submit', validieren);`{:.language-javascript}  
  
wird die Funktion validieren ausgeführt, das Formular jedoch trotzdem abgesendet. Die (ihre Arbeit im ersten Fall richtig machende) Funktion validieren sieht so aus  
  
  ~~~javascript
function validieren()  
  {  
	var fehleranzahl = 0;  
	// fehler suchen  
	if (fehleranzahl > 0)  
	{  
		alert('Bitte die Fehler beseitigen!');  
		return false;  
	}  
	return true;  
  }

Was übersehe ich dabei?

Warum wird im ersten Fall die Standardaktion unterdrückt, im zweiten jedoch nicht?

Matthias

[ChrisB]

Hi,

Warum wird im ersten Fall die Standardaktion unterdrückt, im zweiten jedoch nicht?

Weil addEventListener nicht vorsieht, einen Rückgabewert zu verarbeiten.
http://bytes.com/topic/javascript/answers/157500-cant-add-return-false-addeventlistener-firefox

Verwende event.preventDefault stattdessen.

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, ChrisB!

Verwende event.preventDefault stattdessen.

Danke, ist übrigens auch bei molily beschrieben, vielleicht hätte ich aufmerksamer lesen sollen.

Matthias

[molily]

Hallo,

<form ... name="myform" onsubmit="return validieren();">

funktioniert das wunderbar, das Formular wird validiert und im Fehlerfall die Standardaktion unterdrückt.

Das sind DOM 0 Events (ich nenne es »traditionelles« Event-Handling in meiner Doku).

Verwende ich jedoch (Quelle: molily)

[code lang=javascript]function addEvent (obj, type, fn)
  {
     if (obj.addEventListener)
     {
       obj.addEventListener(type, fn, false);

Das ist W3C DOM Events.

}
     else if (obj.attachEvent)
     {
       obj.attachEvent('on' + type, function () {return fn.call(obj, window.event);});

Das ist Microsoft-proprietärer Kram gepaart mit einem Kompatibilitätsfix für den Zugriff auf das Event-Objekt und das verarbeitende Element.

Du verwendest hier also drei verschiedene Modelle. Die unterscheiden sich in zahlreichen Punkten, nicht nur in der Art und Weise, wie man Handler registiert und deregistriert:

• Event-Phasen (Capturing, Target-Phase, Bubbling)
• Zugriff auf das Event-Objekt
• Zugriff auf das verarbeitende Element und das Zielelement
• Zugriff auf die gedrückten Tasten, Maustasten
• uvm.

Diese primitive addEvent-Helferfunktion verwendet immmerhin noch zwei verschiedene Modelle und nivelliert *nur zwei Unterschiede* zwischen diesen.

Deswegen braucht man schnell eine ausgereiftere addEvent-Funktion:
http://molily.de/js/event-handling-fortgeschritten.html#flexibles-addevent

Beim komplexen Event-Handling (Tastatur, Maus, Event Delegation, tausend weitere Vereinheitlichungen) braucht man schließlich eine ausgereifte Event-Handling-Bibliothek:
http://molily.de/js/event-handling-fortgeschritten.html#addevent-frameworks

Mathias