En termes simples événements DOM (A), je vous donne sur la principale DOM de gestionnaire d''événements à 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.Cet article continuera à introduire des événements DOM de connaissances, en se concentrant principalement sur les propriétés et méthodes d''événements DOM objets Event.

  Alors, quel est l''événement DOM objet Event il?L''objet de l''événement (objet d''événement) fait référence associée à un événement particulier et les détails de l''événement contenait des objets.Nous pouvons passer à une série de méthodes et propriétés des paramètres de l''événement déclencheur d''acquisition du gestionnaire d''événements généré.

  Les objets Event

  paramètre d''objet événement est en fait un gestionnaire d''événements, lorsque l''événement invoqué, nous ne devons être passé dans la fonction d''événement peut obtenir.Afficher le code ci-dessous:

  fonction GetEvent (un événement) {

  un événement = événement || fenêtre.un événement;

  }

  Les paramètres de la fonction d''événement ci-dessus passent dans un événement nommé comme l''objet événement, tout en faisant un traitement navigateur compatible.Parmi IE8 et au début de cette édition, en définissant des gestionnaires d''événements de registre de propriété, lorsque l''appel n''a pas passé un objet événement, nous avons besoin à travers la fenêtre d''objet global.événement pour obtenir.Par conséquent, nous utilisons le code ci-dessus ne || jugement, si la présence de l''objet événement événement, l''utilisation de la fenêtre n''existe pas.un événement.

  objet événement contient plusieurs méthodes et propriétés multiples, nous pouvons obtenir des informations détaillées sur l''événement grace à ces méthodes et propriétés et de traitement connexes.

  Méthodes d''objet d''événement

  objet de l''événement a deux méthodes principales pour la diffusion de la gestion des événements suivants (bullage, capture) et les événements annulés.

  1.stopPropagation

  méthode stopPropagation est principalement utilisé pour prévenir la propagation de l''événement, de tels événements continuent d''empêcher bouillonnant au sommet.

  fonction GetEvent (un événement) {

  un événement.stopPropagation ();

  }

  enfant.addEventListener (clic, GetEvent, false);

  Si vous avez besoin d''une version compatible du navigateur IE8 et ci-dessous, vous devrez remplacer l''utilisation de cancelBubble stopPropagation, en raison de la faible version de IE ne prennent pas en charge la méthode stopPropagation.

  fonction GetEvent (un événement) {

  un événement = événement || fenêtre.un événement;

  si (événement.stopPropagation) {

  un événement.stopPropagation ();

  } Autre {

  un événement.cancelBubble = true;

  }

  }

  cancelBubble IE est une propriété de l''objet événement, cette propriété définie sur true empêche la propagation des événements.

  2.preventDefault

  La méthode d''action par défaut preventDefault est utilisé pour annuler l''événement, comme un lien pour sauter le comportement et la forme méthode comportement de soumission automatique preventDefault peut être utilisé pour annuler.Afficher le code ci-dessous:

  interdiction Jump

  var aller = documents.getElementById ( ''aller'');

  fonction allerFn (event) {

  event.preventDefault ();

  console.log (je ne l''ai pas sauter!? );

  }

  aller.addEventListener (clic, allerFn, false);

  Par preventDefault, nous avons réussi à empêcher le comportement d''un lien de saut.Cependant, avant que les navigateurs IE9 doivent définir la propriété returnValue false pour obtenir.comme suit:

  fonction goFn (event) {

  event = événement || fenêtre.un événement;

  si (événement.preventDefault) {

  event.preventDefault ();

  } Autre {

  event.returnValue = false;

  }

  console.log (je ne l''ai pas sauter!? );

  }

  En plus de deux principales méthodes ci-dessus objet événement, l''événement DOM projet de spécification actuelle sur l''objet de l''événement définit également une autre méthode, appelée stopImmediatePropagation.

  3.stopImmediatePropagation

  Et stopPropagation comparé, stopImmediatePropagation peut également empêcher la propagation de l''événement, point différent en ce qu''il peut également se lier à cet élément du même type d''événements ont également empêché.Tel que:

  var go = documents.getElementById ( ''go'');

  fonction goFn (event) {

  event.preventDefault ();

  event.stopImmediatePropagation (); // arrêter la formation de bulles d''événement et empêcher que le même type d''événement

  console.log (je ne l''ai pas sauter!? );

  }

  fonction goFn2 (event) {

  console.log ( ? Je suis le même type d''événement!? );

  }

  go.addEventListener (clic, goFn, false);

  go.addEventListener (clic, goFn2, false);

  Nous sur un lien pour ajouter un événement click, si l''on ajoute la méthode méthode stopImmediatePropagation goFn, puis méthode goFn2 ne sera pas exécuté et cliquez sur les événements Emballé avec au sommet.

  Notez que, stopImmediatePropagation actuellement partie du navigateur n''est pas encore pris en charge, mais les bibliothèques comme jQuery encapsule méthode stopImmediatePropagation de multi-plateforme.

  Propriétés de l''objet de l''événement

  Par rapport à la méthode de l''objet de l''événement, en raison des propriétés de l''objet de l''événement est relativement important, ne parviennent pas à expliquer le texte, il se concentre sur des projets concrets souvent des propriétés de l''objet événement.

  1.Type de propriétés

  Nous pouvons obtenir le type d''événements par type, tels que les événements de clic que nous avons obtenu est une cha?ne ? clic ?.

  var go = documents.getElementById ( ''go'');

  fonction goFn (event) {

  console.log (événement.type); // sortie ''clic''

  }

  go.addEventListener (clic, goFn, false);

  2.La propriété cible

  La propriété cible est principalement utilisé pour les objets cibles obtenir des événements, tels que cliquer sur une étiquette que nous obtenons est un balises HTML cible.

  var go = documents.getElementById ( ''go'');

  fonction goFn (event) {

  var target = événement.cible;

  console.log (cible === go) // renvoie true

  }

  go.addEventListener (clic, goFn, false);

  Dans IE8 et plus t?t, nous devons utiliser plut?t que srcElement cible.programmes compatibles sont les suivants:

  fonction goFn (event) {

  événement var = événement || fenêtre.un événement,

  target = événement.L''événement de la cible.srcElement;

  console.log (cible === go) // renvoie true

  }

  3. propriétés de l''événement souris

  Lorsque l''événement de déclenchement avec la souris, l''attribut d''événement principal contient l''emplacement et l''état des boutons de la souris, telles que: clientX et clientY spécifiés position de la souris dans les coordonnées de fenêtre, touche et qui spécifie quel bouton de la souris enfoncé.

  fonction moveFn (event) {

  console.log (événement.screenX) // obtenir la souris sur l''écran de l''axe coordonnée X

  console.log (événement.screenY) // Obtenir les coordonnées de l''axe Y souris sur l''écran

  console.log (événement.clientX) // obtenir la souris en fonction de l''axe X coordonnées de la fenêtre du navigateur

  console.log (événement.clientY) // Obtenir la coordonnée Y de la souris sur la fenêtre du navigateur

  console.log (événement.pageX) // obtenir un document basé sur les coordonnées de l''axe X de la souris

  console.log (événement.pageY) // obtenir le document basé sur la souris coordonnée Y

  }

  fonction clickFn (event) {

  console.log (événement.bouton) // obtenir le bouton de la souris enfoncé.navigateur non-IE 0 bouton gauche de la souris, un bouton de la souris 1, droit 2

  console.log (événement.qui) // Obtient quelle touche du clavier ou le bouton de la souris est pressée sur l''événement spécifié

  }

  document.addEventListener ( ''mouseover'', moveFn, false);

  document.addEventListener (clic, clickFn, false);

  4.propriétés d''un événement de clavier

  Lorsque l''événement déclencheur avec le clavier, la propriété événement principal keyCode contient les touches du clavier et des touches spéciales est enfoncée, comme: keyCode spécifie la valeur de code de la touche enfoncée, ctrlKey préciser si la touche Ctrl enfoncée.

  fonction keyFn (event) {

  console.log (événement.codeTouche); // Obtenir la valeur du code clé de la touche pressée

  console.log (événement.ctrlKey); // Obtient si la touche Ctrl enfoncée

  console.log (événement.shiftKey); // Obtient si la touche Maj enfoncée

  console.log (événement.altKey); // Obtient si la touche alt

  console.log (événement.metaKey); // Obtient si la clé de méta pressée

  }

  document.addEventListener ( ''keyup'', keyFn, false);

  Des événements similaires constituent également des propriétés événement propriétés de la fenêtre et propriétés d''un événement, etc., ne détaillent pas ici.Les étudiants intéressés peuvent accéder à des informations pertinentes.

  Pour résumer

  Cet article explique les propriétés et méthodes communes événements DOM objets Event, mais a également introduit ses problèmes de compatibilité et de solutions dans IE.Cependant, la connaissance de l''événement DOM est beaucoup plus que cela, j''espère que cela ne peut qu''aider les développeurs de la connaissance DOM.

  Note: La référence du texte de "Javascript The Definitive Guide", un livre et Mu tutoriel réseau de classe "événements DOM Secret".

  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 (a) ?, grace à l''appui Maison de script!

  Vous pouvez également être intéressé par l''article: événements DOM en termes simples (a) généré dynamiquement DOM ne déclenche pas les causes de l''événement onclick et des solutions en ce qui concerne l''événement dom cause de liaison dynamique générée 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 (b)

Recommend Article: