AddEventListener() non compatible avec anciens navigateurs

bonjour,

Pour avoir une compatibilité du code javascript avec les anciens navigateurs, par quoi remplacer les auditeurs d'évènements pour un évènement click de souris sur un bouton, par exemple.
Code:

1 2 3 4 5 // Auditeur d'évènement pour le bouton 1 var vBtn1=document.getElementById("btn1"); vBtn1.addEventListener("click",maFonction);

Code:

vBtn1.onclick=maFonction();

?

Bonjour,
erreur d’étourderie la grenouille :mouarf:, on affecte la référence pas le résultat de la fonction vBtn1.onclick=maFonction;.

Sinon il y a attachEvent et l'exemple fourni sur MDN.

Oui !!! Au temps pour moi, emporté par mon élan mes doigts on rajouté les () :oops:

j'aurais du me contenter de la syntaxe fool proof

Code:

vBtn1.onclick=function(){maFonction();}

une fonction pas son résultat

Plutôt que d'utiliser un ancienne syntaxe pour rester compatible il vaut mieux créer le prototype si il n'existe pas , extrait de https://developer.mozilla.org/en-US/...dEventListener

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
(function() {
  if (!Event.prototype.preventDefault) {
    Event.prototype.preventDefault=function() {
      this.returnValue=false;
    };
  }
  if (!Event.prototype.stopPropagation) {
    Event.prototype.stopPropagation=function() {
      this.cancelBubble=true;
    };
  }
  if (!Element.prototype.addEventListener) {
    var eventListeners=[];
 
    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
      var self=this;
      var wrapper=function(e) {
        e.target=e.srcElement;
        e.currentTarget=self;
        if (typeof listener.handleEvent != 'undefined') {
          listener.handleEvent(e);
        } else {
          listener.call(self,e);
        }
      };
      if (type=="DOMContentLoaded") {
        var wrapper2=function(e) {
          if (document.readyState=="complete") {
            wrapper(e);
          }
        };
        document.attachEvent("onreadystatechange",wrapper2);
        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
 
        if (document.readyState=="complete") {
          var e=new Event();
          e.srcElement=window;
          wrapper2(e);
        }
      } else {
        this.attachEvent("on"+type,wrapper);
        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
      }
    };
    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
      var counter=0;
      while (counter<eventListeners.length) {
        var eventListener=eventListeners[counter];
        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
          if (type=="DOMContentLoaded") {
            this.detachEvent("onreadystatechange",eventListener.wrapper);
          } else {
            this.detachEvent("on"+type,eventListener.wrapper);
          }
          eventListeners.splice(counter, 1);
          break;
        }
        ++counter;
      }
    };
    Element.prototype.addEventListener=addEventListener;
    Element.prototype.removeEventListener=removeEventListener;
    if (HTMLDocument) {
      HTMLDocument.prototype.addEventListener=addEventListener;
      HTMLDocument.prototype.removeEventListener=removeEventListener;
    }
    if (Window) {
      Window.prototype.addEventListener=addEventListener;
      Window.prototype.removeEventListener=removeEventListener;
    }
  }
})();

De cette façon ton code reste 'moderne'

Ou utiliser JQuery avec .on() ...