pur javascript équivalent de jquery click()?

Question

Je construis une petite application qui capture les clics de souris. J'ai écrit le prototype dans jquery mais, comme il s'agit d'une petite application axée sur la vitesse, l'inclusion de jquery pour utiliser une seule fonction serait une exagération.

J'ai essayé d'adapter cet exemple de JavascriptKit:

document.getElementById("alphanumeric").onkeypress=function(e){ 
    //blah..blah..blah.. 
} 

mais il ne fonctionne pas quand j'ai essayé

document.getElementsByTagName("x").onclick 

Qu'est-ce que je fais mal?

Answer 1

Supposons que vous avez une liste des balises p vous souhaitez capturer le clic pour la balise p:

var p = document.getElementsByTagName("p"); 
for(var i=0; i<p.length; i++){ 
p[i].onclick = function(){ 
    alert("p is clicked and the id is " + this.id); 
} 
} 

Découvrez un exemple ici pour plus de clarté: http://jsbin.com/onaci/

Answer 2

document.getElementsByTagName("x") 

renvoie un tableau d'éléments ayant la variable "x".

Vous devez corriger l'événement pour chaque élément du tableau renvoyé.

Answer 3

Dans votre exemple, vous utilisez getElementsByTagName, qui vous renvoie un tableau d'éléments DOM, vous pouvez itérer ce tableau et affecter le gestionnaire onclick à chaque élément, par exemple:

var clickHandler = function(){ 
    alert('clicked!'); 
} 

var elements = document.getElementsByTagName('div'); // All divs 

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

Answer 4

il semble un peu plus que la fonction de clic de jQuery. Vous manquez également le moteur de sélection de jquery, le chaînage et l'itération automatique à travers les collections d'objets. Avec un peu plus d'effort, vous pouvez également reproduire certaines de ces choses.

var myClickCapture = function (selector) { 
    var method, name,iterator; 
    if(selector.substr(0,1) === "#") { 
     method = "getElementById"; 
     name = selector.substr(1); 
     iterator = function(fn) { fn(document[method](name)); }; 
    } else { 
     method = "getElementsByTagName"; 
     name = selector; 
     iterator = function(fn) { 
      var i,c = document[method](name); 
      for(i=0;i<c.length;i++){ 
      fn(c[i]); 
     }; 
    }; 
    myClickCapture.click = function (fn){ 
     iterator(function(e){ 
      e.onclick=fn; 
     }) 
    } 

    return myClickCapture; 

} 

Je ne l'ai pas testé le code, mais en théorie, il vous obtient quelque chose comme ceci:

myClickCapture("x").click(function(e){ alert("element clicked") }); 

Espérons que cela vous donne une idée des sortes de choses jquery fait sous les couvertures .