czysty javascript odpowiednik jquery click()?

Question

Buduję małą aplikację, która przechwytuje kliknięcia myszą. Napisałem prototyp w jquery, ale ponieważ jest to mała aplikacja skupiająca się na szybkości, osadzanie jquery w celu użycia tylko jednej funkcji byłoby przesadą.

starałem się dostosować ten przykład od JavascriptKit:

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

ale to nie działa, gdy próbowałem

document.getElementsByTagName("x").onclick 

Co robię źle?

Answer 1

że masz listę tagów p chcesz uchwycić kliknięcie dla tagu t:

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

Wymeldowanie przykładem tutaj, aby uzyskać więcej jasności: http://jsbin.com/onaci/

Answer 2

document.getElementsByTagName("x") 

zwraca tablicę elementów mających zmienną "x".

Musisz wykonać odpowiednie zdarzenie dla każdego elementu w zwróconej tablicy.

Answer 3

W przykładzie używasz getElementsByTagName, która zwróci Ci tablicę elementów DOM, można iteracyjne tej tablicy i przypisać obsługi onclick do każdego elementu, na przykład:

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

Wygląda trochę tak, jakbyś przegapił coś więcej niż tylko funkcję klikania jQuery. Brakuje również silnika selektora, łańcucha i automatycznej iteracji w kolekcjach obiektów. Przy odrobinie wysiłku możesz także minimalnie odtworzyć niektóre z tych rzeczy.

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; 

} 

nie testowałem ten kod, ale w teorii, robi coś takiego:

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

Mam nadzieję, że to daje sens różne rzeczy jQuery robi pod kołdrą .