reines Javascript-Äquivalent von jquery click()?

Question

Ich baue eine kleine App, die Mausklicks erfasst. Ich habe den Prototyp in jQuery geschrieben, aber da es eine kleine App ist, die sich auf Geschwindigkeit konzentriert, wäre das Einbetten von Jquery, um nur eine Funktion zu verwenden, ein Overkill.

Ich habe versucht, dieses Beispiel aus JavascriptKit anzupassen:

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

aber es hat nicht funktioniert, wenn ich

versucht

document.getElementsByTagName("x").onclick 

Was mache ich falsch?

Answer 1

Sagen Sie eine Liste haben von p-Tags möchten Sie den Klick für den p-Tag erfassen: ein Beispiel hier für mehr Klarheit

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); 
} 
} 

Check out: http://jsbin.com/onaci/

Answer 2

document.getElementsByTagName("x") 

gibt ein Array von Elementen mit dem Tagnamen 'x' zurück.

Sie müssen für jedes Element im zurückgegebenen Array ein rechtes Ereignis haben.

Answer 3

In Ihrem Beispiel Sie verwenden getElementsByTagName, die ein Array von DOM-Elemente zurückgibt, können Sie das Array iterieren und die Onclick-Handler zum Beispiel zu jedem Element zuordnen:

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

Es sieht ein bisschen so aus, als würden Sie mehr als nur die Klickfunktion von jQuery verpassen. Sie vermissen auch die Selektor-Engine von jquery, die Verkettung und die automatische Iteration über Sammlungen von Objekten hinweg. Mit etwas mehr Aufwand können Sie auch einige dieser Dinge minimal reproduzieren.

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; 

} 

Ich habe den Code nicht getestet, aber in der Theorie, es bekommt man so etwas wie diese:

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

Hoffentlich gibt Ihnen ein Gefühl der möglichen Dinge jquery wird unter der Decke zu tun .