Explication détaillée des flux d'événements et des gestionnaires d'événements en JavaScript

Flux d'événements: il existe deux types. IE est le flux de bulles d'événement. Lorsque l'événement démarre, il est reçu de l'élément le plus spécifique et propage vers le haut par étape vers des nœuds moins spécifiques (élément -> document). En revanche, le flux de capture d'événements de Netscape.

Les événements de niveau DOM2 stipulent que le flux d'événements comprend trois étapes: l'étape de capture de l'événement, l'étape cible et l'étape de la bulle d'événement.

La plupart du temps, c'est la phase de bulle d'ajouter un gestionnaire d'événements au flux d'événements. Un châtaignier d'un événement:

 var eventUtil = {addHandler: function (élément, type, handler) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.Attachevent ('on' + type, manageur); // ie8} else {element ['on' + type] = handler; }}, SuppearHandler: function () {...}}

Jetons un œil à cela en détail ci-dessous:

Gestionnaire d'événements de niveau DOM0

La façon traditionnelle de spécifier les gestionnaires d'événements via JavaScript est d'attribuer une fonction à un attribut de gestionnaire d'événements.

Chaque élément a ses propres attributs de gestionnaire d'événements, qui sont généralement tous en minuscules, comme onclick. La définition de la valeur de cette propriété sur une fonction peut spécifier le gestionnaire d'événements.

 var btn = document.getElementById ('mybtn'); // ajouter le gestionnaire d'événements btn.onclick = function () {alert (this); // est un élément DOM btn}; // supprimer le gestionnaire d'événements btn.onclick = null;

Avantages: 1. Simple 2. Il présente les avantages de Cross-Browser

Inconvénients: les gestionnaires d'événements ne sont pas spécifiés avant l'exécution du code, donc ces codes sont situés derrière le bouton de la page, il est donc possible qu'aucune réponse ne soit reçue après un certain temps, et l'expérience utilisateur devient pire.

Gestionnaire d'événements de niveau DOM2

Deux méthodes sont définies pour gérer les opérations qui spécifient et suppriment les gestionnaires d'événements: AdVEventListener () et DeVoveEventListener (). Trois paramètres, 1. Le nom de l'événement à traiter. 2. Fonctionne comme gestionnaire d'événements 3. Une valeur booléenne. La dernière valeur booléenne est vraie, ce qui signifie que le gestionnaire d'événements est appelé dans l'étape de capture, et faux signifie que le gestionnaire d'événements est appelé au stade de la bulle.

 // Ajouter plusieurs gestionnaires d'événements var btn = document.getElementById ('mybtn'); btn.addeventListener ('cliquez' btn.RemoveEventListener ('click', fonction () {// La fonction anonyme ne peut pas être supprimée, l'échec de l'échec}, false); // réécriture var handler = function () {alert (this.id); }; btn.addeventListener ('cliquez', gestionnaire, false); // Retirez à nouveau le gestionnaire d'événements btn.reMoveEventListener ('click', gestionnaire, false); // supprimer avec succès

Ces deux gestionnaires d'événements sont licenciés dans l'ordre dans lequel ils sont ajoutés. Dans la plupart des cas, les gestionnaires d'événements sont ajoutés à l'étape bouillonnante du flux d'événements, qui peut être une compatibilité maximale avec diverses versions du navigateur.

Avantages: un élément peut ajouter plusieurs gestionnaires d'événements

Inconvénients: IE8 et les navigateurs inférieurs ne prennent pas en charge les gestionnaires d'événements de niveau DOM2. (Y compris IE8)

IE Tépareur d'événements

Deux méthodes sont définies, similaires à ce qui précède: attachEvent (), Detachevent (). Ces deux méthodes reçoivent les deux mêmes paramètres: le nom du gestionnaire d'événements et la fonction du gestionnaire d'événements. Étant donné que les versions IE8 et antérieures ne prennent en charge que des bulles d'événements, les gestionnaires d'événements ajoutés via Deteachevent () seront ajoutés à la phase de bulle.

 var btn = document.getElementById ('mybtn'); btn.attachevent ('onclick', function () {alert (this); // window}); btn.attachevent ('onclick', funciton () {alert ("bonjour, monde");});

Cliquez sur le bouton, l'ordre de déclenchement de ces deux gestionnaires d'événements est exactement l'opposé de ce qui précède. Non déclenché dans l'ordre dans lequel les gestionnaires d'événements sont ajoutés, juste à l'opposé.

Avantages: un élément peut ajouter plusieurs gestionnaires d'événements

Inconvénients: ne soutient que c'est-à-dire.

Gestionnaire d'événements de croisement

Par exemple:

 var eventUtil = {addHandler: function (ele, type, handler) {if (ele.addeventListener) {ele.addeventListener (type, handler, false); } else if (ele.attachevent) {ele.Attachevent ('on' + type, gestionnaire); } else {ele ['on' + type] = handler}}, retirehandler: function (ele, type, handler) {if (ele.removeeventListener) {ele.reMoveEventListener (type, handler, false); } else if (ele.detachevent) {ele.detachevent ('on' + type, handler); } else {ele ['on' + type] = null; }}}