web-dev-qa-db-fra.com

$ (window) .on ('resize') en JavaScript

En JavaScript, est le code suivant:

window.onresize = function() {
    // Do something.
}

Le même que:

$(window).on('resize', function () {
    // Do something.
});

Les deux blocs de code ci-dessus sont-ils égaux sur le plan des fonctionnalités? Y a-t-il un avantage ou un inconvénient (même mineur) à utiliser l'un ou l'autre?

Qu'en est-il de:

window.addEventListener('resize', function(event) {
    // Do something.
});
javascriptjquerywindowsresize
18
GTS Joe

Ce ne sont pas les mêmes, dans le premier exemple, vous affectez un événement au gestionnaire d'objet dom onresize.

La version jQuery fait probablement quelque chose de différent derrière la scène. Sans regarder le code source, il fait probablement simplement:

window.addEventListener('resize', function () {...})

Cela dit, la version jQuery et le addEventListener natif sont toujours différents car jQuery ajoute également de la magie au gestionnaire d'événements.

Et addEventListenener est probablement la façon préférée d'ajouter un événement à un objet DOM, car vous pouvez ajouter plusieurs événements mais avec l'attribut dom on[event] vous êtes limité à un événement.

Voici un peu plus à ce sujet: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Pendant que vous y êtes, vous pouvez également lire des informations sur l'ami addEventListener: removeEventListener.

26
Loïc Faure-Lacroix

Non, ce ne sont pas les mêmes. Tu pourrais essayer:

  $(window).on('resize',function1);
  $(window).on('resize',function2);

et function1 et function2 répondent tous deux lorsque la fenêtre est redimensionnée.

Mais si vous utilisez

 window.onresize = function1;
 window.onresize = function2;

Seule function2 répond.

15
jilykate