Jak powiązać kliknięcie z kotwicą bez frameworka (javascript)?

Question

Wiem, że można to łatwo zrobić w jQuery lub w dowolnej innej strukturze, ale nie o to chodzi. Jak zrobić "prawidłowo" powiązanie zdarzenia kliknięcia w czystym javascript? Wiem jak to zrobić inline (wiem, że to jest straszne)

<a href="doc.html" onclick="myFunc(); return false">click here</a> 

a to powoduje mój skrypt do wykonania przez JS włączonej przeglądarce i link do zachowywania się normalnie dla tych bez JavaScript?

Teraz, w jaki sposób zrobić to samo w sposób nielinearny?

Answer 1

standard przejdź do tej kwestii jest na osobliwości trybie: http://www.quirksmode.org/js/events_advanced.html

Answer 2

Jeśli trzeba przypisać tylko jeden click zdarzenie, można przypisać onclick:

Jeśli masz ID:

myAnchor = document.getElementById("Anchor"); 
myAnchor.onclick = function() { myFunc(); return false; } 

można również chodzić po wszystkich kotwic:

anchors = document.getElementsByTagName("a"); 

for (var i = 0; i < anchors.length; i++) { 

anchors[i].onclick = ..... 

} 

Istnieje również document.getElementsByClassName do symulacji selektora klasy jQuery, ale nie jest obsługiwany przez wszystkie przeglądarki.

Jeśli może być konieczne przypisanie wielu zdarzeń do jednego elementu, należy przejść pod numer addEventListener pokazany przez @Jordan i @David Dorward.

Answer 3

Podstawowym sposobem jest użycie document.getElementById(), aby znaleźć element, a następnie użyć addEventListener, aby odsłuchać wydarzenie.

w HTML:

<a href="doc.html" id="some-id">click here</a> 

w waszym Javascript:

function myFunc(eventObj) { 
    // ... 
} 

var myElement = document.getElementById('some-id'); 
myElement.addEventListener('click', myFunc); 

Albo można użyć anonimową funkcję:

document.getElementyById('some-id').addEventListener('click', function(eventObj) { 
    // ... 
}); 

Answer 4

nadać mu identyfikator i powinieneś być w stanie do:

document.getElementById("the id").onclick = function{ ... } 

Answer 5

Nie musisz używać jQuery, ale możesz wypróbować popularną funkcję addEvent John Resig.

addevent(elem, "click",clickevent); 

function addEvent (obj, type, fn) { 
     if (obj.attachEvent) { 
     obj["e"+type+fn] = fn; 
     obj[type+fn] = function() { obj["e"+type+fn](window.event); } 
     obj.attachEvent("on"+type, obj[type+fn]); 
     } else 
     obj.addEventListener(type, fn, false); 
    } 

Są bardziej należy uznać to'properly”powiązać zdarzenie na znaczniki HTML w czystym JavaScript.

http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm

Answer 6

Jest to miły sposób cross-browser

var on = (function(){ 
    if ("addEventListener" in window) { 
     return function(target, type, listener){ 
      target.addEventListener(type, listener, false); 
     }; 
    } 
    else { 
     return function(object, sEvent, fpNotify){ 
      object.attachEvent("on" + sEvent, function(){ 
       fpNotify(window.event); 
      }); 
     }; 
    } 
}()); 


on(document.getElementById("myAnchor"), "click", function(){ 
    alert(this.href); 
}); 

Answer 7

Dzięki Pekka, pamiętać wiążące słuchaczy do całej gamy elementów z pewnej klasy, szybko zwiększa liczbę zdarzeń powiązanych z elementy.

pomocą pętli na szybszy sposób:

for (var i = Things.length - 1; i >= 0; i--) { 
    Things[i] 
}; 

pierwszy wyraz pętli oblicza tylko jeden raz, to w ten sposób, że nie będzie się przez DOM i obliczenie długości tablicy poza tym, ze względu na strukturę stosu, wchodzenie na tablice na odwrocie jest szybsze niż krok naprzód.