web-dev-qa-db-fra.com

Lier un événement à un élément à l'aide de Javascript pur

J'écris une API et je dois malheureusement éviter toute bibliothèque jQuery ou tierce. Comment les événements sont-ils liés aux éléments via jQuery?

exemple jQuery:

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

Je suis sur le point d'écrire un attribut onClick sur l'élément par frustration, mais je voudrais comprendre le lien entre l'événement jQuery et l'élément DOM.

Comment l'élément sait-il exactement pour déclencher un événement jQuery lorsque le balisage lui-même n'est pas modifié? Comment attrapent-ils l'événement DOM et le remplacent-ils?

J'ai créé mon propre gestionnaire Observer mais je n'arrive pas à comprendre comment lier l'élément aux événements Observer.

javascripteventsclick
28
Wancieho

Voici une réponse rapide:

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

Chaque navigateur moderne prend en charge une API complète pour interagir avec le DOM via JavaScript sans avoir à modifier votre HTML. Voir ici pour une assez bonne vue à vol d'oiseau: http://overapi.com/javascript

59
Dan Tao

Vous identifiez l'élément par son id, dans ce cas l'ancre, par:

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

Ensuite, vous devez attribuer votre événement de clic:

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

Et enfin, la fonction de l'événement serait quelque chose comme:

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

Vous pouvez le simplifier ou le transformer en une seule ligne si vous n'avez pas besoin de compatibilité avec les anciens navigateurs et et une gamme de navigateurs, mais jQuery assure la compatibilité entre les navigateurs et fait de son mieux pour vous donner les fonctionnalités que vous recherchez en tant que autant de navigateurs plus anciens que possible.

9
txpeaceofficer09