equivalente javascript puro di jquery click()?

Question

Sto costruendo una piccola app che cattura i clic del mouse. Ho scritto il prototipo in jQuery ma, trattandosi di una piccola app che si concentra sulla velocità, incorporare jquery per utilizzare una sola funzione sarebbe eccessivo.

ho cercato di adattare questo esempio da JavascriptKit:

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

ma non ha funzionato quando ho provato

document.getElementsByTagName("x").onclick 

Che cosa sto facendo di sbagliato?

Answer 1

Diciamo che avete una lista di tag p che si desidera catturare lo scatto per il tag 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); 
} 
} 

Partenza un esempio qui per maggiore chiarezza: http://jsbin.com/onaci/

Answer 2

document.getElementsByTagName("x") 

restituisce un array di elementi con il tagname 'x'.

È necessario l'evento corretto per ogni elemento dell'array restituito.

Answer 3

Nel tuo esempio si utilizza getElementsByTagName, che restituisce un array di elementi DOM, si potrebbe iterare tale matrice e assegnare il gestore onclick per ogni elemento, ad esempio:

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

sembra un po 'come se manchi più della sola funzione click di jQuery. Manca anche il motore di selezione di jquery, il concatenamento e l'iterazione automatica tra le raccolte di oggetti. Con un po 'più di sforzo puoi anche riprodurre minimamente alcune di queste cose.

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; 

} 

Non ho ancora testato il codice, ma in teoria, si ottiene qualcosa di simile:

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

Speriamo che questo ti dà un senso di cotte e di crude jquery sta facendo sotto le coperte .