Lorsque le développement du projet, nous avons souvent besoin d''envisager une grande variété d''événements d''interaction utilisateur résultant de l''utilisation du produit, comme un événement de clic de la souris, un événement de frappe.Une partie d''un tel événement sont le comportement des événements DOM avant, différents événements DOM aura différents déclencheurs et effet de déclenchement.Ces propriétés et méthodes Cet article vous amène dans la langue profane pour comprendre les événements DOM.

  Tout d''abord, avant l''introduction de l''événement DOM nous avons d''abord comprendre les différents niveaux sous les DOM.Pour différents niveaux de DOM, DOM événement manipulation notre chemin est pas le même.

  événements DOM niveau et DOM

  DOM niveau total peut être divisé en quatre niveaux: niveau DOM0, niveau DOM1, niveau de qualité DOM2 et DOM3, et les événements DOM sont divisés en trois niveaux: DOM0 gestionnaire d''événements de niveau, gestion des événements de niveau DOM2 et la gestion des événements de classe DOM3.Comme indiqué ci-dessous:

  

  On peut se demander, pourquoi ne pas y faire face événement de niveau DOM1?Parce que le niveau 1 standard DOM ne définit pas le contenu lié événement, donc il n''y a pas de soi-disant niveau 1 modèle d''événement DOM.

  Différents événements à différents niveaux du niveau DOM DOM concernant le non décrit en détail ici, ce qui suit décrit.

  1.événements de niveau DOM0

  Avant d''examiner les événements de niveau DOM0, nous devons d''abord comprendre les gestionnaires d''événements HTML, il est le premier de ce genre de code de gestion des événements est la suivante:

  

  

  Le code ci-dessus, nous définissons directement un attribut onclick dans le code HTML pour déclencher la méthode showFn, le plus grand inconvénient d''un tel gestionnaire d''événements qui est fortement couplé au HTML JS, une fois que nous devons modifier le nom de la fonction que vous devez modifier deux places.Bien s?r, l''avantage n''est pas nécessaire pour terminer l''opération pour lier les événements DOM.

  Alors, quel est-il événement de traitement de niveau DOM0?événement de niveau DOM0 est d''attribuer une fonction à un des attributs de gestionnaire d''événements, tels que:

  

  

  Nous donnons bouton ci-dessus code définit un id, id get à ce bouton par JS, et une fonction affectée à un attribut de gestionnaire d''événements onclick, une telle approche se reflète le traitement des événements de niveau DOM0.Nous pouvons gérer l''affectation d''attribut null pour résoudre lié à un événement par événement.

  inconvénient de gestionnaire d''événements de niveau DOM0 est qu''un gestionnaire ne peut pas se lier simultanément plusieurs gestionnaires, par exemple, je voudrais ajouter une autre fonction au bouton événement click.

  2.événements de niveau DOM2

  événement de niveau DOM2 sur la base des événements de niveau DOM0 constituent un gestionnaire ne peut pas lier un certain nombre d''inconvénients fonctions de traitement tout en permettant un gestionnaire d''ajouter plusieurs gestionnaires.Afficher le code ci-dessous:

  

  

  événements de niveau DOM2 définit deux méthodes addEventListener et removeEventListener, ont été utilisées pour lier l''événement de liaison de rapprochement, le procédé comprend trois paramètres, à savoir le nom de la propriété de gestion des événements de liaison (non compris le), et si la capture de gestionnaire gestionnaire d''événements d''exécution.Si nous avons besoin d''ajouter une méthode dans une souris, il suffit:

  Déclenchera showFn cette méthode en cliquant sur le bouton et déplacer la souris.

  Notez que IE8 ci-dessous la version de rang ne supporte pas addEventListener et removeEventListener et detachEvent attachEvent nécessité de réaliser:

  btn.attachEvent ( ''onclick'', showFn); // Bind événement

  btn.detachEvent ( ''onclick'', showFn); // dégroupage de l''événement

  Ici, on n''a pas besoin de passer le troisième argument, car la version IE8 ne supporte que bouillonne en dessous du rang d''un type d''événement.

  3.événements de niveau dom3

  événement de niveau DOM3 sur la base de l''événement au niveau DOM2 sur l''ajout de plusieurs types d''événements, tous les types sont les suivants:

  événements interface utilisateur, lorsque la Interagir utilisateur avec des éléments sur la page et les déclencheurs, tels que: la charge, défilement

  événement Focus, lorsque l''élément re?oit ou perd la gachette de mise au point, tels que: flou, mise au point

  Les événements de souris, par exemple lorsque l''utilisateur est déclenché lorsqu''une page effectue une opération de souris: dbclick, mouseup

  Roue événement, lors de l''utilisation de la molette de la souris ou d''un dispositif similaire est déclenchée, par exemple: mousewheel

  événement de texte, lors de la saisie de texte dans le document déclencheurs, tels que: textInput

  Les événements clavier, lorsque l''utilisateur effectue une opération sur une page est déclenchée par le clavier, tels que: keydown, keypress

  événement synthétique, lorsque la IME (éditeur de méthode d''entrée) de caractères d''entrée de déclenchement, tels que: compositionstart

  Les événements de modification, lorsque la structure sous-jacente DOM change déclencheur, tels que: DOMsubtreeModified

  Pendant ce temps, l''événement de niveau DOM3 permet également à l''utilisateur de personnaliser certains des événements.

  flux d''événements DOM

  Dans le pour le préciser addEventListener troisième argument mentionné ci-dessus si l''événement dans l''exécution de la phase de capture ou le barbotage, la valeur true pour exécuter l''événement dans la phase de capture, ensemble true pour exécuter l''événement dans la phase de capture, et est mis à risque d''événement fausse représentation étape d''exécution de la bulle.Alors, quelle est la capture de bouillonnement de l''événement et l''événement, il?explique la figure par ce qui suit:

  

  1.bouillonnement de l''événement

  L''événement bouillonnement d''événement soi-disant est le même que les bulles générées à partir du meilleur endroit pour commencer à prendre couche par couche, comme une étiquette pour la figure de cible de l''événement ci-dessus, cliquez sur une étiquette en même temps déclenchera p, cliquez sur l''événement sur le li, couche par couche jusqu''à ce que le document html ou plus à l''extérieur.Le code exemple suivant est:

  

  

  Après avoir exécuté le code ci-dessus, nous cliquons sur un onglet appara?tra d''abord, je suis l''événement cible ''invite, puis appara?tra ? événement bouillonnante à DIV ? des conseils, ce qui expliquerait l''événement à bouillonner de la sortir de l''intérieur.

  Alors, comment pouvons-nous arrêter le bouillonnement de l''événement?objet événement ici méthode stopPropagation implique des événements, comme suit:

  child.addEventListener ( ''click'', function (e) {

  alert(''我是目标事件'');

  e.stopPropagation ();

  }, false);

  Après stopPropagation ainsi que la méthode, il suffit de cliquer à nouveau sur un événement click étiquette ne sera pas déclenché div.

  2.Capture d''événement

  Et l''événement contraste bouillonnant, la capture d''événement est exécuté de haut en bas, nous avons juste besoin de troisième paramètre addEventListener à true dans la ligne.

  

  事件冒泡

  

  

  à ce moment, nous cliquons sur une étiquette, le premier est pop-up ? événement bouillonnement à DIV ?, suivi par le pop-up est ? Je suis l''événement cible ?, juste le bouillonnement opposé et événement.

  Pour résumer

  Cet article décrit les gestionnaires d''événements DOM à différents niveaux, ce qui déclenche également introduit les principes et les méthodes de formation de bulles de capture et d''événements.Compétents dans l''utilisation des différents niveaux des problèmes de compatibilité des événements DOM et navigateur pour notre résolution correspondant au développement de projets front-end serait utile.Dans le prochain article, je vais vous présenter les propriétés et méthodes d''événements DOM objets Event.

  C''est tout pour cet article, nous voulons aider les amis qui sont intéressés peuvent regarder ? dans les événements DOM de langage profane (deux) ? espère aussi beaucoup de scripts de soutien Maison!

  Vous pouvez également être intéressé par l''article: événements DOM en termes simples (b) DOM généré ne dynamiquement déclenche pas les causes de l''événement onclick et des solutions en ce qui concerne l''événement dom cause de liaison généré dynamiquement de l''échec et des solutions dans dom0 événements au niveau JS et les événements de niveau DOM2 différence de phase d''événement DOM entre la capture introduction et l''événement et barbotage d''événement a un ordre d''exécution (graphiques détaillés) des événements JQuery dans les méthodes de DOM pour réaliser l''enlèvement de JQuery pour lier la fenêtre de bulle pour la page élément Dom de liaison et un procédé d''événements déliaison Google Map V3 (infowindow) événements DOM Dom mettre en ?uvre le traitement d''événement événement initiation pièce quête de code dans le DOM

événements DOM en termes simples de (a)

Recommend Article: