equivalente de javascript puro de jquery click()?

Question

Estoy construyendo una pequeña aplicación que captura los clics del mouse. Escribí el prototipo en jquery pero, dado que es una aplicación pequeña que se enfoca en la velocidad, incorporar jquery para usar solo una función sería una exageración.

Me trataron de adaptar este ejemplo a partir de JavascriptKit:

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

pero no funcionó cuando traté

document.getElementsByTagName("x").onclick 

¿Qué estoy haciendo mal?

Answer 1

Digamos que tienes una lista de etiquetas p que desea capturar el clic de la etiqueta 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); 
} 
} 

salida de ejemplo aquí para mayor claridad: http://jsbin.com/onaci/

Answer 2

document.getElementsByTagName("x") 

devuelve una matriz de elementos con el nombre de etiqueta 'x'.

Tiene que hacer un evento a la derecha para cada elemento en la matriz devuelta.

Answer 3

En su ejemplo está utilizando getElementsByTagName, que devuelve una matriz de elementos DOM, se puede repetir esa matriz y asignar el manejador onclick a cada elemento, por ejemplo:

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

Parece un poco como que echa de menos algo más que la función de clic de jQuery. También echas de menos el motor selector de jquery, el encadenamiento y la iteración automática en colecciones de objetos. Con un poco más de esfuerzo también puedes reproducir mínimamente algunas de esas cosas.

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; 

} 

No he probado el código, pero en teoría, se le consigue algo como esto:

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

Esperemos que esto le da un sentido de la clase de cosas jQuery está haciendo bajo las sábanas .