comment ajouter un gestionnaire de clic sans utiliser jQuery

Question

Je voudrais ajouter un gestionnaire de clic de base à un élément en utilisant ID. Normalement j'utiliserais jQuery, mais j'ai oublié comment le faire dans vanilla js.

Quelle est la meilleure façon de le faire, sans utiliser jQuery:

$("#myBasic").click(function(){ 
    alert(“testString”); 
}); 

Answer 1

façon très basique est de simplement assigner une fonction à la propriété on[event] de l'élément

document.getElementById("myBasic").onclick = function() { 
               alert("testString"); 
              }; 

Cela a très large support de navigateur, et est utile pour la plupart des cas de base

---

Il y a o d'autres fonctionnalités de gestion d'événements, comme .addEventListener(evt, fn, capture), mais IE a seulement commencé à le supporter dans IE9. Avant cela, vous devez utiliser attachEvent(onevt, fn), qui est similaire, mais pas identique.

Le problème principal avec .attachEvent() est qu'il ne vous donne pas une référence automatique à l'élément qui a lié le gestionnaire via this. Mais il existe des solutions de rechange pour cela.

---

Pour créer une solution compatible assez de navigateur, vous pouvez faire quelque chose comme ceci:

function addListener(elem, type, fn) { 
    if (elem.addEventListener) { 
     elem.addEventListener(type, fn, false); 

    } else if (elem.attachEvent) { 
     elem.attachEvent("on" + type, function() { 
              return fn.call(elem, window.event); 
             }); 
    } else { 
     elem["on" + type] = fn; 
    } 
} 

Et vous appeler comme ça:

var el = document.getElementById("myBasic"); 

addListener(el, "click", function(e) { alert(this.id); }); 

Cela devrait couvrir la plupart des situations , bien que je serais un peu préoccupé par les fuites de mémoire pour la version .attachEvent.

---

Tout cela ne concerne que la liaison du gestionnaire. Pour obtenir un comportement cohérent entre les navigateurs, vous devez probablement avoir un correctif prêt pour l'objet event.

Answer 2

Le plus simple est juste:

document.getElementById('myBasic').onclick = function() { 
    // do something 
}; 

La façon la plus correcte est:

var f = function() { 
    // do something 
}; 
if(document.body.attachEvent) 
    document.getElementById('myBasic').attachEvent("onclick",f); 
else 
    document.getElementById('myBasic').addEventListener("click",f); 

Answer 3

document.getElementById('myBasic').addEventListener("click",function(){alert("teststring")});