addEventListener und attachEvent

[Frank1987]

Hallo, auf die Gefahr hin das dieses Thema schon abgeschlossen ist, habe ich folgendes Problem mein addEventListener will nicht unter IE8 funktionieren. Habe zwar schon gelesen das es mit attachEvent funktionieren soll aber wie bau ich das in mein sript mit ein, das es auf allen gängigen Plattformen Firefox,Chrome etc. funtioniert?

Hier habe ich mal meinen Script

window.addEventListener ('load', function () {
var map = document.querySelectorAll('#Mapi area');

for (var i=0; i<map.length; i++) {

	if (map[i].addEventListener) {
	map[i].addEventListener('touchstart', swap, false);
	map[i].addEventListener('mouseover', swap, false);
	}
	
}

function swap(ev) {
	var lan = this.getAttribute('alt');
	document.getElementById('karte').setAttribute('src','map/' + lan);
	return false;
}
});

[Gunnar Bittersmann]

@@Frank1987

if (map[i].addEventListener) { map[i].addEventListener('touchstart', swap, false); map[i].addEventListener('mouseover', swap, false); }

Du hast den focus verloren.

     map[i].addEventListener('focus', swap, false);

… addEventListener will nicht unter IE8 funktionieren. Habe zwar schon gelesen das es mit attachEvent funktionieren soll aber wie bau ich das in mein sript mit ein …

else if (map[i].attachEvent)
{
  map[i].attachEvent('ontouchstart', swap);
  map[i].attachEvent('onmouseover', swap);
  map[i].attachEvent('onfocus', swap);
}

Siehe Event-Handling gemäß Microsoft für ältere Internet Explorer [molily].

Bei window.addEventListener dementsprechend.

LLAP 🖖

[Frank1987]

Danke für die schnelle Antwort, werde jetzt mal daran basteln

[Auge]

Hallo

auf die Gefahr hin das dieses Thema schon abgeschlossen ist,

Wie kann es das sein?

habe ich folgendes Problem mein addEventListener will nicht unter IE8 funktionieren. Habe zwar schon gelesen das es mit attachEvent funktionieren soll aber wie bau ich das in mein sript mit ein, das es auf allen gängigen Plattformen Firefox,Chrome etc. funtioniert?

Schaue dich in unserem Wiki um. Auf der Seite zu addEventListener werden auch die Helferlein für steinalte Browser aufgeführt. Im Grunde geht es darum, zu prüfen, ob die Funktion zur Verfügung steht und entsprechend zu reagieren.

Tschö, Auge

[Orlok]

Hallo

Wie du das lösen kannst, wurde hier ja schon geschrieben, aber ich frage mich:

Gibt es einen besonderen Grund dafür, dass du IE8 unbedingt unterstützen willst?

Die IE <= Version 8 benutzt heute zum Glück so gut wie niemand mehr, und darum sollten hier IMO auch keine Extrawürste mehr gebraten werden…

Gruß,

Orlok

[Felix Riesterer]

Lieber Frank1987,

wenn Du veraltete IE unterstützen möchtest, lohnt sich der Einsatz eines Frameworks wie jQuery 1.x.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo,

wenn Du veraltete IE unterstützen möchtest, lohnt sich der Einsatz eines Frameworks wie jQuery 1.x.

bevor hier für die 1% IE8 die jQuery-Keule rausgeholt wird, hier mein addEvent:

function addEvent (obj, type, fn) {
  if(type.search("on")==0) type = type.substr(2);
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else if (obj.attachEvent) {
    obj.attachEvent('on' + type, function () {
      return fn.call(obj, window.event);
    });
  }
} // addEvent

Gruß Jürgen

[1unitedpower]

bevor hier für die 1% IE8 die jQuery-Keule rausgeholt wird, hier mein addEvent:

Dann hat man einen Workaround für einen Bug im IE8, Crossbrowser-Kompatibilität erreicht man damit aber noch nicht. Man kann natürlich für jedes weitere Problem wieder eigene Workaround basteln, oder man greift in vorausschauender Weisheit auf fertige und vollständigere Lösungen zurück. jQuery ist da durchaus ein gangbarer Weg.

if(type.search("on")==0) type = type.substr(2);

Kennst du schon das online-Event? Was würde wohl passieren, wenn man folgendes macht?

addEvent(navigator,'online',onlineHandler);

Das schlimmste ist, dass nicht mal ein Laufzeitfehler geschmissen wird, es handelt sich also um einen Silent-Failure (das sind die schlimmsten). Die Zeile solltest du ersatzlos streichen, es widerspricht auch dem Single-Responsibility-Principle, die Funktion mehr als eine Aufgabe übernehmen zu lassen.

[JürgenB]

Hallo,

Kennst du schon das online-Event?

jetzt ja, und damit weiß ich mehr. als einige Browser („Some browsers implement Online/Offline events from the WHATWG Web Applications 1.0 specification.“). Aber du hast Recht, die Zeile kann weg. Sie ist nur in meinem Umfeld wichtig.

Allerdings bleibe ich dabei, das es bei einfachen Problemen besser ist, kurz nachzudenken und nicht sofort die Framework-Keule zu schwingen.

Gruß Jürgen

[Gunnar Bittersmann]

@@JürgenB

bevor hier für die 1% IE8 die jQuery-Keule rausgeholt wird, hier mein addEvent:

Deins? Das hat dir der molily gesagt! ;-)

Ich finde es befremdlich, dass die Funktion der Benennung nach dem alten proprietären MS-Kram entspricht. Wäre es nicht sinnvoller, für alte IE (und nur für diese) addEventListener ansatzweise durch Prototyp-Erweiterung nachzubauen und dann die Standardsyntax zu verwenden?

LLAP 🖖

[JürgenB]

Hallo Gunnar,

bevor hier für die 1% IE8 die jQuery-Keule rausgeholt wird, hier mein addEvent:

Deins? Das hat dir der molily gesagt! ;-)

danke für Nachreichen des Zitats. Da ich sehr viel von molily gelernt habe, vergesse ich das leider schon mal.

Ich finde es befremdlich, dass die Funktion der Benennung nach dem alten proprietären MS-Kram entspricht. Wäre es nicht sinnvoller, für alte IE (und nur für diese) addEventListener ansatzweise durch Prototyp-Erweiterung nachzubauen und dann die Standardsyntax zu verwenden?

die Funktion ist schon recht alt (und hat was noch viel "schlimmeres" ersetzt), daher packe ich die nicht mehr an. Irgendwann wird sie ersatzlos gestrichen. In einem aktuellen Script frage ich die Verfügbarkeit von addEventListener ab und entscheide dann ob ich mit addEventListener auf DOMContentLoaded oder mit attachEvent auf onload reagiere.

Gruß Jürgen

PS Ich habe bis vor etwa drei Jahren Wert darauf gelegt, auch den IE8 so gut wie (mir) möglich, zu unterstützen. Bei meinen neueren Projekten verwende ich lieber aktuelle Techniken und der IE8 bleibt eben draußen vor. Wenn aber die IE8-Unterstützung schon eingebaut ist, lasse ich sie auch drin.

PPS Vor Kurzen gesehen, als ich mein altes Netbook mal wieder zum Testen angeworfen habe: Die Google Maps API blendet beim IE8 eine Meldung ein, das der verwendete Browser nicht mehr unterstützt wird. Beim Emulator kommt die Meldung auch.

[Pascal]

Hi!

window.addEventListener
document.querySelectorAll

wie bau ich das in mein sript mit ein, das es auf allen gängigen Plattformen Firefox,Chrome etc. funtioniert

Wenn du solche DOM-Funktionen brauchst solltest du besser jQuery 1.x nutzen. jQuery wurde für die browser-übergreifende Programmierung ab IE6 geschaffen. Du wirst wahrscheinlich auf weitere Unterschiede zwischen modernen Browsern und Urzeitkrebsen wie IE8 stoßen.

Der Code wird nicht schön wenn du versuchst die Unzulänglichkeiten des IE8 an dutzenden Stellen mit if (... addEventListener) ... else if (... attachEvent) ... zu umgehen. Und verbreitete Helfer-Funktionen lassen leider die "feinen Unterschiede" aus. Eine Library wie jQuery ist eine bessere Abstraktion.

Ob du unbedingt IE8 unterstützen musst ist auch eine Frage, die du dir stellen solltest. Außerhalb von Firmen-Intranets kommt der nämlich nicht mehr vor. Das öffentliche Web kann man damit nicht mehr guten Gewissens surfen. :)

MfG Pascal

[1unitedpower]

Wenn du solche DOM-Funktionen brauchst solltest du besser jQuery 1.x nutzen. jQuery wurde für die browser-übergreifende Programmierung ab IE6 geschaffen.

Crossbrowser-Kompatibilität ist ein Entwurfsziel von jQuery, darüber hinaus hat man bei jQuery aber auch eigene Designprinzipien beim API-Entwurf. Verglichen mit dem DOM sind manche davon gut, manche schlecht. Als schlanke Alternative zu jQuery, mit weniger technischen Konsequenzen für den Entwickler, bieten sich deshalb auch eine Kombination von es5-shim und html5-shiv an, die zusammen auch über das DOM hinaus Aufrüstungen vornehmen (siehe kangax' Tabelle für eine übersichtiliche Feature-Zusammenstellung).