Alors peut-être que je ne cherche pas aux bons endroits mais je ne trouve pas une bonne explication sur la façon de faire l'équivalent de jQuery

$('a').click(function(){
    // code here
});

En vieux JavaScript pur et simple?

Fondamentalement, je veux exécuter une fonction à chaque fois qu'une balise a est cliquée, mais je n'ai pas la possibilité de charger jQuery dans la page pour le faire de la manière ci-dessus, j'ai donc besoin de savoir comment le faire en utilisant plain JavaScript.

59
Duck in Custard 26 sept. 2011 à 18:22

6 réponses

Meilleure réponse

Exemple de travail: http://jsfiddle.net/6ZNws/

Html

<a href="something">CLick Here</a>
<a href="something">CLick Here</a>
<a href="something">CLick Here</a>

Javascript:

var anchors = document.getElementsByTagName('a');
for(var z = 0; z < anchors.length; z++) {
    var elem = anchors[z];   
    elem.onclick = function() {
        alert("hello");
        return false;
    };
}
61
Shaheen Ghiassy 18 janv. 2017 à 07:49
document.getElementById('elementID').onclick = function(){
      //click me function!
}
11
Naftali aka Neal 26 sept. 2011 à 14:27

Cela affectera une fonction onclick à chaque élément a.

var links = document.getElementsByTagName("a");
var linkClick = function() {
  //code here
};

for(var i = 0; i < links.length; i++){
  links[i].onclick = linkClick;
}

Vous pouvez le voir en action ici.

2
Peter Olson 26 sept. 2011 à 14:27

Voici:

[].forEach.call( document.querySelectorAll( 'a' ), function ( a ) {
    a.addEventListener( 'click', function () {
        // code here
    }, false );
});

Démo en direct: http://jsfiddle.net/8Lvzc/3/

(ne fonctionne pas dans IE8)

Aussi, je recommande la délégation d'événement ...

7
Šime Vidas 26 sept. 2011 à 14:43
element.addEventListener('click', function() { ... }, false);

Vous devez localiser les éléments et faire une boucle pour connecter chacun d'eux.

51
Diodeus - James MacFarlane 26 sept. 2011 à 14:25

Essayez ce qui suit

var clickHandler = function() { 
  // Your click handler
};

var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
  var current = anchors[i];
  current.addEventListener('click', clickHandler, false);
}

Remarque : comme l'a souligné Ӫ _._ Ӫ, cela ne fonctionnera pas sur IE8 et inférieur car il ne prend pas en charge addEventListener.

Sur IE8, vous pouvez utiliser les éléments suivants pour vous abonner à onclick. Ce n'est pas un substitut parfait car il nécessite que tout le monde soit coopératif, mais il peut vous aider

var subscribeToOnClick = function(element) {
  if (element.onclick === undefined) {
    element.onclick = clickHandler;
  } else {
    var saved = element.onclick;
    element.onclick = function() {
      saved.apply(this, arguments);
      clickHandler.apply(this, arguments);
    }
  }
}

for (var i = 0; i < anchors.length; i++) {
  var current = anchors[i];
  subscribeToOnClick(current);
}
15
JaredPar 26 sept. 2011 à 15:30