Lectures connexes:
JavaScript Event Learning Résumé (V) Type d'événement de souris en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Résumé (i) Flux d'événements
//www.vevb.com/article/86261.htm
JavaScript Event Learning Résumé (iv) Membres publics de l'événement (propriétés et méthodes)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Résumé (ii) JS Événements JS
//www.vevb.com/article/86264.htm
JavaScript Event Learning Résumé (III) Objet de l'événement JS
1. Les membres publics de l'objet de l'événement
1. Membres publics de l'événement dans DOM
L'objet d'événement contient des propriétés et des méthodes liées à l'événement spécifique qui l'a créé. Les types d'événements déclenchés sont différents et les propriétés et méthodes disponibles sont différentes. Cependant, tous les événements du DOM ont les membres publics suivants.
un. Comparaison de CurrentTarget et cible
À l'intérieur du gestionnaire d'événements, l'objet cela équivaut toujours à la valeur de CurrentTarget, et la cible contient simplement la cible réelle de l'événement.
Par exemple: il y a un bouton sur la page, enregistrez l'événement de clic dans le corps (le nœud parent du bouton). Lorsque le bouton est cliqué, l'événement de clic bubblera au corps pour le traitement.
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> document.body.onclick = fonction (événement) {console.log ("cliquez sur l'événement enregistré dans le corps"); console.log ("this === Event.CurrentTarget?" + (this === Event.CurrentTarget)); // true console.log ("currentTarget === document.body?" + (event.currentTarget === document.body)); // true console.log ('event.target === document.getElementByid ("btn")?' + (event.target === document.getElementById ("btn"))); // true} </ script> </body>Le résultat en cours est:
né Grâce à l'attribut type, plusieurs événements peuvent être gérés dans une fonction.
Principe: Différents événements sont gérés différemment en détectant l'attribut Event.Type.
Par exemple: définissez une fonction de gestionnaire pour gérer 3 types d'événements: cliquez sur, souris, souris.
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> var handler = function (event) {switch (event.type) {case "cliquez": alert ("cliquez"); casser; Case "Mouseover": event.target.style.backgroundColor = "Pink"; casser; case "Mouseout": event.target.style.backgroundColor = ""; }}; var btn = document.getElementById ("btn"); BTN.OnClick = Handler; btn.onMouseOver = Handler; btn.onmouseout = handler; </cript> </gody>Effet Effectif: cliquez sur le bouton et la case apparaît. Lorsque la souris passe par le bouton, la couleur d'arrière-plan du bouton devient rose; Lorsque la souris quitte le bouton, la couleur d'arrière-plan revient à la valeur par défaut.
c. Comparaison de stoppropagation () et stopMmedIatEpropagation ()
Idem: stopPropagation () et stopImMMediatEpropagation () peuvent être utilisés pour annuler la capture ou la bulle des événements.
Différent: la différence entre les deux est que lorsqu'un événement a plusieurs gestionnaires d'événements, StopImmMediatEpropagation () peut empêcher le gestionnaire d'événements d'être appelé plus tard.
Par exemple:
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> var btn = document.getElementById ("btn"); btn.addeventListener ("cliquez", fonction (événement) {console.log ("Buttn cliquez écouté une fois"); // event.stoppropagation (); // effets de visualisation non comité // event.StopimMediatEpropagation (); // L'effet de visualisation non comité}, false); btn.addeventListener ("cliquez", fonction () {console.log ("bouton cliquer écouté deux fois");}, false); document.body.onclick = function (event) {console.log ("Body cliquée"); } </cript> </ body>Effet de course:
D, Eventphase
La valeur de la phase d'événement est 1 dans la phase de capture, 2 dans la phase cible et 3 dans la phase de bulle.
exemple:
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> var btn = document.getElementById ("btn"); btn.onclick = function (event) {console.log ("Button Dom0-level ajout d'événements Handler EventPhase Value est?" + event.eventhase);} btn.adDeventListener ("Click". Console.log ("Button Dom2-Level Method Ajoute un gestionnaire d'événements, et la valeur EventPhase est" + event.eventPhase);}, true); btn.addeventListener ("click", fonction (événement) {console.log ("Button Dom2-level a ajoute le gestionnaire d'événements); document.body.addeventListener ("cliquez", fonction (événement) {console.log ("Body ajoute le gestionnaire d'événements, et la valeur de la phase d'événements est" + event.eventPhase);}, true); document.body.addeventListener ("click", fonction (événement) {console.log ("Body ajoute le gestionnaire d'événements et la valeur de la phase d'événements est la valeur de la phase d'événements est est "+ event.eventphase);}, false); </script>Effet de course:
2. Membres publics de l'événement dans IE
Les propriétés et les méthodes des événements dans IE varieront du type d'événements au DOM, mais certains sont des membres publics que tous les objets ont, et la plupart de ces membres ont des propriétés ou des méthodes DOM correspondantes.
Ce qui précède est la connaissance pertinente des membres du public (attributs et méthodes) de l'événement que l'éditeur vous a présenté (iv) et j'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message!