alors que onclick fonctionne dans tous les navigateurs, addEventListener ne fonctionne pas dans les anciennes versions D'Internet Explorer, qui utilise attachEvent à la place.

l'inconvénient de onclick est qu'il ne peut y avoir qu'un gestionnaire d'événements, alors que les deux autres vont virer tous les callbacks enregistrés.

pour autant que je sache, L'événement DOM" load " ne fonctionne toujours que de manière très limitée. Cela veut dire qu'il ne s'allumera que pour les éléments window object , images et <script> par exemple. Il en va de même pour l'assignation directe onload . Il n'y a pas de différence technique entre les deux. Probablement .onload = a une meilleure disponibilité de navigateur croisé.

cependant, vous ne pouvez pas attribuer un load event à un élément <div> ou <span> ou autre.

si vous n'êtes pas trop inquiet au sujet du support du navigateur, il y a un moyen de rebrancher la référence 'ceci' dans la fonction appelée par l'événement. Il sera normalement pointer vers l'élément qui a généré l'événement lorsque la fonction est exécutée, ce qui n'est pas toujours ce que vous voulez. La partie délicate est de pouvoir en même temps supprimer le même écouteur d'événements, comme indiqué dans cet exemple: http://jsfiddle.net/roenbaeck/vBYu3 /

/*
    Testing that the function returned from bind is rereferenceable, 
    such that it can be added and removed as an event listener.
*/
function MyImportantCalloutToYou(message, otherMessage) {
    // the following is necessary as calling bind again does 
    // not return the same function, so instead we replace the 
    // original function with the one bound to this instance
    this.swap = this.swap.bind(this); 
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.swap, false);
    document.body.appendChild(this.element);
}
MyImportantCalloutToYou.prototype = {
    element: null,
    swap: function() {
        // now this function can be properly removed 
        this.element.removeEventListener('click', this.swap, false);           
    }
}

le le code ci-dessus fonctionne bien dans GoogleChrome, et il y a sans doute des limites à rendre "bind" compatible avec d'autres navigateurs.

utiliser des gestionnaires en ligne est incompatible avec Content Security Policy de sorte que l'approche addEventListener est plus sûre de ce point de vue. Bien sûr, vous pouvez activer les handlers en ligne avec unsafe-inline mais, comme son nom l'indique, ce n'est pas sûr car cela ramène toutes les hordes D'exploits JavaScript que le CSP empêche.

un détail n'a pas encore été noté: les navigateurs de bureau modernes considèrent les différentes presses à boutons comme des" clics "pour AddEventListener('click' et onclick par défaut.

• sur Chrome 42 et IE11, les deux onclick et AddEventListener cliquez sur feu sur le clic gauche et le clic du milieu.
• Sur Firefox 38, onclick feux seulement sur le clic gauche, mais AddEventListener cliquez sur les feux sur la gauche, le milieu et droit de clics.

aussi, le comportement de clic moyen est très incohérent parmi les navigateurs lorsque les curseurs de défilement sont impliqués:

• Sur Firefox, moyen-cliquez sur événements toujours le feu.
• sur Chrome, ils ne tirent pas si le middleclick ouvre ou ferme un curseur de défilement.
• sur IE, ils tirent quand le curseur se ferme, mais pas quand il s'ouvre.

il est également intéressant de noter que les événements" click "pour n'importe quel élément HTML sélectionnable au clavier tel que input tirent aussi sur l'espace ou entrent quand l'élément est sélectionné.

il devrait également être possible d'étendre l'auditeur en le prototypant (si nous avons une référence à lui et à sa fonction non anonyme) -ou faire l'appel "onclick" un appel à une bibliothèque de fonction (une fonction appelant d'autres fonctions)

comme

    elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

cela signifie que nous n'avons jamais à contester l'appel onclick juste modifier la fonction myFunctionList () pour faire ce que nous voulons, mais cela nous laisse sans contrôle de bouillonnement / capture les phases devrait donc être évité pour les navigateurs les plus récents.

juste au cas où quelqu'un trouve ce fil dans le futur...

selon MDN , la différence est la suivante:

addEventListener:

The EventTarget.la méthode addEventListener() ajoute la valeur spécifiée EventListener-objet compatible à la liste des écouteurs d'événements pour le type d'événement spécifié sur L'EventTarget sur lequel il est appelé. Le la cible d'événement peut être un élément d'un document, le Document lui-même, De la fenêtre, ou de toute autre objet qui supporte des événements (tels que XMLHttpRequest).

onclick:

la propriété onclick renvoie le code du gestionnaire d'événements sur le élément en cours. Lors de l'utilisation de l'événement click pour déclencher une action, aussi envisagez d'ajouter cette même action à l'événement keydown, pour permettre utilisation de la même action par des personnes qui n'utilisent pas une souris ou une touche écran. La syntaxe de l'élément.onclick = functionRef; où functionRef est un fonction souvent du nom d'une fonction déclarée ailleurs ou une fonction expression. Voir "JavaScript Guide: Functions" pour plus de détails.

il y a aussi une différence de syntaxe dans l'utilisation comme vous voyez dans les codes ci-dessous:



addEventListener:

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

onclick:

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

addEventListener vous permet de définir plusieurs gestionnaires, mais n'est pas pris en charge dans IE8 ou inférieur.

c'est à dire n'avoir attachEvent , mais ce n'est pas exactement la même.

Javascript tend à tout mélanger dans des objets et cela peut le rendre confus. Tout en un est le JavaScript.

essentiellement onclick est un attribut HTML. À l'inverse, addEventListener est une méthode sur L'objet DOM représentant un élément HTML.

dans les objets JavaScript, une méthode est simplement une propriété qui a une fonction de valeur et qui fonctionne contre l'objet auquel elle est attachée (en utilisant ceci par exemple).

en JavaScript en tant qu'élément HTML représenté par DOM aura ses attributs cartographiés sur ses propriétés.

c'est là que les gens sont confus parce que JavaScript mélange tout dans un conteneur ou un espace de nom unique sans couche d'indirecte.

dans un layout oo normal (qui fusionne au moins l'espace de noms des propriétés/méthodes) vous pourriez avoir quelque chose comme:

domElement.addEventListener // Object(Method)
domElement.attributes.onload // Object(Property(Object(Property(String))))

il y a des variantes comme il pourrait utiliser un getter / setter pour onload ou HashMap pour les attributs, mais en fin de compte, c'est ce à quoi il ressemblerait. JavaScript a éliminé cette couche de l'indirecte à l'attente de savoir ce qui est entre autres choses. Il fusionne domElement et attributes.

sauf compatibilité, vous devriez comme une pratique exemplaire utiliser addEventListener. Alors que d'autres réponses évoquent les différences à cet égard plutôt que les différences fondamentales en matière de programmes, je vais l'oublier. Essentiellement, dans un monde idéal vous êtes vraiment destiné à utiliser sur* de HTML mais dans un monde encore plus idéal vous ne devriez pas faire quelque chose comme ça à partir de HTML.

Pourquoi est-il dominant aujourd'hui? C'est plus rapide à écrire, facile à apprendre et tend simplement.

le point entier de onload en HTML est de donner accès à la méthode addEventListener ou à la fonctionnalité en premier lieu. En l'utilisant dans JS vous passez par HTML quand vous pourriez l'appliquer directement.

Hypothétiquement vous pouvez faire vos propres attributs:

$('[myclick]').each(function(i, v) {
     v.addEventListener('click', function() {
         eval(v.myclick); // eval($(v).attr('myclick'));
     });
});

ce que JS fait avec est un peu différent de cela.

vous pouvez l'assimiler à quelque chose comme (pour chaque élément créé):

element.addEventListener('click', function() {
    switch(typeof element.onclick) {
          case 'string':eval(element.onclick);break;
          case 'function':element.onclick();break;
     }
});

les détails réels de la mise en œuvre seront probablement différents avec une gamme de variations subtiles rendant les deux légèrement différents dans certains cas, mais c'est l'essence de celui-ci.

C'est sans doute un hack de compatibilité que vous pouvez épingler une fonction à un attribut on puisque par défaut les attributs sont toutes les chaînes.

résumé:

1. addEventListener peut ajouter plusieurs événements, alors qu'avec onclick cela ne peut pas être fait.
2. onclick peut être ajouté en tant qu'attribut HTML , alors qu'un addEventListener ne peut être ajouté qu'à l'intérieur des éléments <script> .
3. addEventListener peut prendre un troisième argument qui peut arrêter la propagation de l'évènement.

les deux peuvent être utilisés pour gérer des événements. Cependant, addEventListener devrait être le choix préféré car il peut faire tout onclick fait et plus. N'utilisez pas inline onclick comme attributs HTML car cela mélange le javascript et le HTML qui est une mauvaise pratique. Il rend le code moins supportable.

le contexte référencé par le mot-clé 'this' en Javasscript est différent.

regardez le code suivant:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

</head>
<body>
    <input id="btnSubmit" type="button" value="Submit" />
    <script>
        function disable() {
            this.disabled = true;
        }
        var btnSubmit = document.getElementById('btnSubmit');
        btnSubmit.onclick = disable();
        //btnSubmit.addEventListener('click', disable, false);
    </script>
</body>
</html>

Ce qu'il fait est vraiment simple. lorsque vous cliquez sur le bouton, le bouton sera désactivé automatiquement.

D'abord quand vous essayez de connecter les événements de cette façon button.onclick = function(), l'événement onclick sera déclenchée en cliquant sur le bouton, toutefois, le bouton ne sera pas désactivé car il n'y a pas de liaison explicite entre le bouton.onclick et gestionnaire d'événement onclick. Si vous déboguez voir l'objet 'this' , vous pouvez voir qu'il se réfère à l'objet 'window' .

deuxièmement, si vous commentez btnSubmit.onclick = disable(); et décommentez //btnSubmit.addEventListener('click', disable, false); vous pouvez voir que le bouton est désactivé parce que de cette façon il y a liaison explicite entre le bouton.l'événement onclick et gestionnaire d'événement onclick. Si vous déboguez dans la fonction disable, vous pouvez voir 'this' se réfère à la button control plutôt que le window .

C'est quelque chose que je n'aime pas chez JavaScript qui est incohérent. Btw, si vous utilisez jQuery( $('#btnSubmit').on('click', disable); ), il utilise la liaison explicite.