web-dev-qa-db-fra.com

Version JavaScript vanille de jQuery .click

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?

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

javascriptjqueryfunctionevent-handling
47
Duck in Custard

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;
    };
}
56
Kevin Bowersox
element.addEventListener('click', function() { ... }, false);

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

47
Diodeus - James MacFarlane

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 ce qui suit 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);
}
13
JaredPar
document.getElementById('elementID').onclick = function(){
      //click me function!
}
10
Neal

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

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 .

1
Peter Olson