2011-09-26 7 views
32

Więc może ja po prostu nie patrząc w odpowiednich miejscach, ale nie mogę znaleźć dobre wyjaśnienie jak to zrobić równowartość jQuerywersja Vanilla JavaScript jQuery .Kliknij

$('a').click(function(){ 
    // code here 
}); 

w zwykły stary JavaScript ?

Zasadniczo chcę uruchomić funkcję każdym razem tag a kliknięciu ale nie mam możliwości, aby załadować jQuery na stronę, aby zrobić to w sposób wyżej więc muszę wiedzieć, jak to zrobić za pomocą zwykłego JavaScript.

Odpowiedz

39

Przykład pracy: http://jsfiddle.net/6ZNws/

Html

<a href="something">CLick Here</a> 
<a href="something">CLick Here</a> 
<a href="something">CLick Here</a> 

javascript:

var anchors = document.getElementsByTagName('a'); 
for(var z = 0; z < anchors.length; z++) { 
    var elem = anchors[z]; 
    elem.onclick = function() { 
     alert("hello"); 
     return false; 
    }; 
} 
+1

+1 Radziłbym jednak zakończyć wyrażenia funkcji * za pomocą ';'. – pimvdb

+0

Whoops dobry połów. –

+0

Nie zgadzam się. IMHO możesz zniszczyć poprzednią powiązaną funkcję. Używanie "addEventListener" jest o wiele lepsze, jak sądzę. –

5

Proszę bardzo:

[].forEach.call(document.querySelectorAll('a'), function (a) { 
    a.addEventListener('click', function() { 
     // code here 
    }, false); 
}); 

żywo demo:http://jsfiddle.net/8Lvzc/3/

(nie działa w IE8)

Również polecam delegacji zdarzeń ...

+2

Czy masz powód, by nie używać '[] .forEach.call (...)'? – pimvdb

+0

@pimvdb No cóż, 'call' nie nadaje się, ponieważ funkcję należy przekazać do' forEach'. Trzeba użyć 'apply', więc:' [] .forEach.apply (..., [function() {}]); '. Notacja '[function() {}]' jest nieco dziwna jak na mój gust ... –

+3

Mam na myśli http://jsfiddle.net/8Lvzc/1/. – pimvdb

30
element.addEventListener('click', function() { ... }, false); 

Musisz zlokalizować elementy d zrobić pętlę, aby połączyć każdy z nich.

6
document.getElementById('elementID').onclick = function(){ 
     //click me function! 
} 
+0

Ah ... powinienem był zauważyć, że nie znam tagów ani identyfikatorów "a" z góry, więc muszę po prostu powiedzieć "DOWOLNY tag kliknął ....." –

1

To przypisze onclick funkcję do każdego a elementu.

var links = document.getElementsByTagName("a"); 
var linkClick = function() { 
    //code here 
}; 

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

Możesz zobaczyć go w akcji here.

11

Wypróbuj następujące

var clickHandler = function() { 
    // Your click handler 
}; 

var anchors = document.getElementsByTagName("a"); 
for (var i = 0; i < anchors.length; i++) { 
    var current = anchors[i]; 
    current.addEventListener('click', clickHandler, false); 
} 

Uwaga: Jak Ӫ _._ Ӫ podkreślić, to nie będzie działać na IE8 i niższe, ponieważ nie obsługuje addEventListener.

Na IE8 można użyć następujących opcji, aby zasubskrybować numer onclick. To nie jest doskonałym substytutem ponieważ wymaga wszyscy się spółdzielnia, ale może być w stanie pomóc

var subscribeToOnClick = function(element) { 
    if (element.onclick === undefined) { 
    element.onclick = clickHandler; 
    } else { 
    var saved = element.onclick; 
    element.onclick = function() { 
     saved.apply(this, arguments); 
     clickHandler.apply(this, arguments); 
    } 
    } 
} 

for (var i = 0; i < anchors.length; i++) { 
    var current = anchors[i]; 
    subscribeToOnClick(current); 
} 
+2

Nie twórz funkcji wewnątrz pętli. Lepiej jest utworzyć funkcję poza pętlą i odwołać się do funkcji wewnątrz pętli. –

+0

@PeterOlson głównie próbowałem odtworzyć styl pierwotnego pytania.Zaktualizuję go, aby był bardziej poprawny w tym znaczeniu. – JaredPar

+0

Należy chyba zauważyć, że IE8 i niższe nie obsługują 'addEventListener'. – user113716