Traduire $(document).on(.....) en javascript pure

Par lolotoobo, il y a 9 ans

Javascript

Bonjour

J'ai un code jQuery que je veux traduire en "pure" javascript. Je veux traduire la fonction

$(document).on('click', '.button', function(e) {
});

Merci de votre aide

8 réponses

lolotoobo, il y a 9 ans

Merci Kenor,

Oui tu as raison j'ai cherché sur notre copaing mais pas avec live :)

Merci à vous

mxmaxime, il y a 9 ans

Oui mais personnellement je n'aime pas cette solution :/

mxmaxime, il y a 9 ans

Même si je ne vois pas en quoi ça va t'aider car si tu veux passer du jquery à du js sans connaître le js ;)

var button = document.querySelector('.button') // Sélectionne l'élement button.addEventListener('click', function (e) { // Ajoute le listener d'événement })

Au passage, je n'ai jamais fait de jQuery mais ta façon de faire me parait très bizarre et illogique...

Huggy, il y a 9 ans

Tu dois pouvoir mettre l"evènement sur le document puis filtrer le target (élément cliqué)

document.onclick = function(e) { var classes = ' ' + e.target.className + ' '; if (classes.indexOf(' machin ') > -1) { alert('got it'); } }
lolotoobo, il y a 9 ans

Emix justement il y a un début à tout :) J'ai fais à peu près la même chose mais lorsque j'ajoute dynamiquement un item ca ne me déclenche pas l'appel, ca fait plus $('.button).on('click', function()) {});

Kenor, il y a 9 ans

Hola,
Google est ton pote: "jquery live in vanilla"
Sur stackoverflow

Globalement, si tu essais de passer de jQuery à Vanilla, pense à ce que tu faisais avant, et ajoute "in vanilla" t'as une chance sur 2 pour tomber sur un équivalent sur stackoverflow.

mxmaxime, il y a 9 ans

@Huggy Je ne vois pas l'intérêt de faire ça ici.
Si il faut mettre un listener sur tous les .button il faut tous les récupérer (querySelectorAll) puis itérer dessus...

Huggy, il y a 9 ans

@Emix comme l'a précisé @lolotoobo ça permet d'insérer des éléments de façon dynamique sans avoir à les binder, ils sont pris en charge par le parent (ici document)