[FRAGE] JavaScript für alle Browser programmieren

[Superheld212]

Hallo,
ich habe folgende frage:
Ich habe eine JavaScript Datei(ich muss dazu sagen JavaScript kann ich nicht es ist kopiert).

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
      var file = fileInput.files[0];
var imageType = /image.*/;

if (file.type.match(imageType)) {
  var reader = new FileReader();

  reader.onload = function(e) {
    fileDisplayArea.innerHTML = "";

    // Ein Neues Bild erstellen
    var img = new Image();
    // Bild umwandlung zu Benutzerbildauswahl
    img.src = reader.result;

    // Füge das bild hinzu
    fileDisplayArea.appendChild(img);
  }

  reader.readAsDataURL(file); 
} else {
  fileDisplayArea.innerHTML = "File not supported!";
}
    });
}

Und hier das HTML dazu:

<div id="fileDisplayArea"></div>
              <font face="Calibri"><font size="1px"><font color="darkred">(min. 250x250)</font></font></font>
              <br>
              <input type="file" id="fileInput" name="gamepicture">
              <script src="images.js"></script>

So das ist ein Script um eine vorschau von einem ausgewählten bild zu bekommen ohne es hochladen zu müssen.
Meine frage nun wie mache ich dieses Script für alle Browser funktionstüchtig? Ich nutze Chrome und da geht es. Bei InternetExplorer geht es nicht. Bei FireFox und Opera weiss ich nicht.

Danke im vorraus!

 

[j-l-n]

Kleiner Tipp, was mir beim ersten Anschauen aufgefallen ist: Anstatt addEventListener zu verwenden, ist es besser,

element.onchange = function(){

zu benutzen...

 

[Superheld212]

Nachdem ich es umgeändert habe hat es nicht mehr funktioniert.. wieso Tipp? Was ist daran besser?

Achja MUSS es so geändert werden für alle Browser oder ist es bloß ein ganz normaler Tipp?

 

[rico2009]

Das Problem an addEventListener ist, dass es der IE nicht kennt. Ich weiß jetzt gar nicht wie es im IE 11 ist, aber die alten kennen es nicht.

Eigentlich sollte es aber funktionieren (onchange Event), hast du es richtig eingebunden? Steht was in der Fehlerkonsole?

 

[kkapsner]

@Julian und rico: Seit IE9 kennt der IE addEventListener. Und wenn man den IE8 unterstützen will, sollte man nicht auf .on... gehen, sondern dann .attachEvent() im IE verwenden. Bei den .on... Sachen überschreibt man einfach zu leicht mal einen anderen Eventlistener. Und wenn man den nicht überschreibt, kann das Skript, das ihn gesetzt hat, ihn nicht mehr entfernen. Also kein guter Tipp...

@Superheld212: Ab IE10 sollte dein Code eigentlich funktionieren. Welchen IE verwendest du denn?

PS: die w3schools Seite ist echt nicht zu empfehlen. Es ist z.B. wirklich kein guter Stil und auch schwer zu warten, wenn man JS-Eventhandler direkt ins HTML schreibt.
PPS: zur Sicherheit: Fehlerkonsole