Quelle est la différence entre le document et le DOM?

Question

Je suis tombé sur un morceau sur la différence entre la liaison de jQuery() et de vivre() - http://msdn.microsoft.com/en-gb/scriptjunkie/ee730275.aspx - (Live and Let section Die)

La fonction de liaison enregistre les gestionnaires d'événements avec les éléments DOM réels qui ont été sélectionnés, mais la fonction live enregistre les gestionnaires d'événements sur le document.

Je l'ai utilisé deux fonctions si je reçois la différence dans la pratique à savoir .live ('click', function() {..}); se déclenchera sur un noeud JS injecté, alors que l'équivalent bind ne le ferait pas. Ce que je ne connais pas, c'est la relation/différence entre document et DOM. Quelqu'un peut-il m'éclairer s'il vous plaît?

Merci, Denis

Answer 1

Le 'document' auquel vous faites référence est le navigateur de variables window.document qui s'expose en JavaScript et qui est le noeud racine du DOM. Rappelez-vous que le DOM, comme votre document HTML, est une hiérarchie d'éléments.

La façon dont les événements fonctionnent dans DOM est qu'ils passent du haut de la hiérarchie, le document, jusqu'à l'élément en question, permettant à chaque élément intermédiaire de capturer l'événement. Ils font ensuite une seconde remontée dans la hiérarchie, appelée bouillonnement. Les méthodes jQuery que vous mentionnez se connectent à la phase bouillonnante des événements. En se connectant dans l'événement click sur le document, vous pouvez voir tous les événements click sur tous les éléments, car ils passent tous par le nœud racine, le document. jQuery filtre ensuite ce dont vous avez besoin en fonction de votre sélecteur.

Si vous utilisez simplement bind, vous allez accrocher dans les événements pour les éléments donnés qui existent à ce moment donné. Si vous ajoutez ultérieurement de nouveaux éléments à la page, le rappel ne leur sera pas lié.

Answer 2

Ce n'est pas une différence entre le document et DOM. C'est une différence entre l'objet document et les objets élément DOM individuels. La fonction live surveille tous les événements du document et si l'objet qui a déclenché l'événement correspond au sélecteur, il appelle le gestionnaire. D'autre part, la fonction bind surveille les événements déclenchés par un objet élément spécifique (le gestionnaire est attaché à cet objet spécifique). Si vous supprimez et recréez l'élément, ce sera un objet différent et le gestionnaire d'événements ne sera pas attaché. Cela implique que vous devez savoir quel est l'objet au moment où vous exécutez bind.