Powiąż zdarzenie z elementem za pomocą czystego kodu JavaScript

Question

Piszę API i niestety muszę unikać bibliotek jQuery lub 3rd party. Jak dokładnie zdarzenia są powiązane z elementami za pośrednictwem jQuery?

jQuery przykład:

$('#anchor').click(function(){ 
    console.log('anchor'); 
}); 

jestem blisko pisanie onClick atrybutu elementu z frustracji, ale chciałbym zrozumieć związek między zdarzeniem jQuery i elementu DOM.

Jak dokładnie element informuje o wystrzeleniu zdarzenia jQuery, gdy sam znacznik nie zostanie zmieniony? W jaki sposób wychwytują zdarzenie DOM i nadpisują je?

Stworzyłem własny program obsługi obserwatora, ale nie mogę zrozumieć, jak powiązać ten element ze zdarzeniami obserwatora.

Answer 1

Oto krótka odpowiedź:

document.getElementById('anchor').addEventListener('click', function() { 
    console.log('anchor'); 
}); 

Każda nowoczesna przeglądarka obsługuje całe API do interakcji z DOM poprzez javascript bez konieczności modyfikowania kodu HTML. Patrz tutaj dla oka widok całkiem dobry ptaka: http://overapi.com/javascript

Answer 2

zidentyfikować elementu przez ID, w tym przypadku kotwicy, przez:

var el = document.getElementById('anchor'); 

Następnie trzeba przypisać zdarzenie click:

el[window.addEventListener ? 'addEventListener' : 'attachEvent'](window.addEventListener ? 'click' : 'onclick', myClickFunc, false); 

I wreszcie, funkcja imprezy byłoby coś jak:

function myClickFunc() 
{ 
    console.log('anchor'); 
} 

Ty c Jeśli nie potrzebujesz kompatybilności ze starszymi przeglądarkami i różnymi przeglądarkami, możesz uprościć je lub przekształcić w jednolinijkową, ale jQuery ma kompatybilność z różnymi przeglądarkami i robi wszystko, aby uzyskać pożądaną funkcjonalność w tylu starsze przeglądarki, jak to możliwe.