Modèle d'événement de base JS (flux d'événements et d'événements et événements personnalisés et bulles d'événements / agent)

1. Événements et déroulement des événements

Un événement est le moment d'interaction avec le navigateur ou le document, comme cliquer sur un bouton, remplir un formulaire, etc. C'est un pont entre JS et HTML.
Le DOM est une structure arborescente. Si les événements sont liés à la fois aux nœuds parents et enfants en même temps, lorsque le nœud enfant est déclenché, comment l'ordre des deux événements est-il déterminé? Cela implique le concept de flux d'événements, qui décrit le acceptation dans la page La séquence des événements.

Il existe deux types de flux d'événements:

• Capture d'événements: c'est une façon de se propager de bas en haut. L'événement est initialement reçu par l'élément le plus spécifique (le nœud avec le niveau d'imbrication le plus profond dans le document, qui est le nœud enfant du niveau le plus bas du DOM), puis se propage progressivement vers le haut vers le nœud le moins spécifique, qui est le nœud niveau le plus élevé du parent dans le nœud DOM.
• Événement bouillonnant: l'opposé du bouillonnement d'événement. Au début de l'événement, le nœud le moins spécifique accepte l'événement en premier et le nœud le plus spécifique accepte l'événement en dernier.

Séquence:
phase de capture phase-cible phase-bullage phase
En même temps, la capture d'événement de liaison et le bullage d'événement, la capture d'événement sera effectuée en premier.

Deuxièmement, le modèle d'événement

• DOM0 est un événement écrit directement en html via onclick;
• DOM2 est un événement lié par addEventListener, et les événements DOM2 sous IE sont liés par attachEvent;
• DOM3 est quelques nouveaux événements.

1. Modèle de niveau DOM0

Également appelé modèle d'événement d'origine, dans ce modèle, les événements ne se propageront pas, c'est-à-dire qu'il n'y a pas de concept de flux d'événements. La fonction de surveillance de la liaison d'événement est relativement simple, il existe deux façons:

1. Liaison directe dans le code HTML:

<input type="button" onclick="fun()">

2. Spécifiez les valeurs d'attribut via le code JS:

var btn = document.getElementById('.btn');
btn.onclick = fun;

Supprimez la fonction de surveillance:

btn.onclick = null;

De cette façon, tous les navigateurs sont compatibles, mais il n'y a pas de séparation entre la logique et l'affichage.

Modèle d'événement 2.IE

Il existe deux processus dans le modèle d'événement IE:

• Phase de traitement des événements (phase cible). Lorsque l'événement atteint l'élément cible, la fonction d'écoute de l'élément cible est déclenchée.

• Phase de bouillonnement d'événement (phase de bouillonnement). Les événements remontent de l'élément cible au document, vérifient si le nœud transmis est lié à une fonction d'écoute d'événements et l'exécutent s'il y en a une.

La manière de lier la fonction d'écouteur d'événements est la suivante:

attachEvent(eventType, handler)

La façon de supprimer la fonction d'écouteur d'événements est la suivante:

detachEvent(eventType, handler)

Description du paramètre:

• eventType spécifie le type d'événement (notez l'ajout de on)

• handler est un
  exemple de fonction de traitement d'événement :

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

3. Modèle de niveau DOM2

Il appartient au modèle standard du W3C et les navigateurs modernes (autres que IE6-8) prennent en charge ce modèle. Dans ce modèle d'événement, il existe trois processus pour un événement:

• Phase de capture d'événement (phase de capture). L'événement est propagé depuis le document jusqu'à l'élément cible, et les nœuds de passage vérifient à leur tour si la fonction d'écoute d'événement est liée, et si c'est le cas, elle est exécutée.

• Phase de traitement des événements (phase cible). Lorsque l'événement atteint l'élément cible, la fonction d'écoute de l'élément cible est déclenchée.

• Phase de bouillonnement d'événement (phase de bouillonnement). Les événements remontent de l'élément cible au document, vérifient si le nœud transmis est lié à une fonction d'écoute d'événements et l'exécutent s'il y en a une.

La manière de lier la fonction d'écouteur d'événements est la suivante:

addEventListener(eventType, handler, useCapture)

La façon de supprimer la fonction d'écouteur d'événements est la suivante:

removeEventListener(eventType, handler, useCapture)

Description du paramètre:

• eventType spécifie le type d'événement (ne pas ajouter)
• handler est la fonction de traitement des événements
• useCapture est un booléen utilisé pour spécifier s'il faut traiter dans la phase de capture, et il est généralement défini sur false pour être cohérent avec le navigateur IE. (Faux bullage par défaut)

Exemple:

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);

4. Méthode de gestion des événements au niveau DOM3

De nombreux événements peuvent se produire dans le navigateur DOM. Il existe de nombreux types d'événements différents avec des informations différentes. Les événements de niveau DOM3 stipulent les types d'événements suivants

• Les événements de l'interface utilisateur sont déclenchés lorsque l'utilisateur interagit avec des éléments de la page
• Les événements de focus sont déclenchés lorsqu'un élément gagne ou perd le focus
• L'événement souris est déclenché lorsque l'utilisateur effectue une opération sur la page avec la souris
• L'événement de roue est déclenché lorsque la molette de la souris ou un appareil similaire est utilisé
• L'événement de texte est déclenché lorsque du texte est entré dans le document
• Les événements de clavier sont déclenchés lorsque l'utilisateur effectue une opération sur la page via le clavier
• L'événement de synthèse est déclenché lorsqu'un caractère est entré pour l'éditeur de méthode IMEInput
• L'événement de changement est déclenché lorsque la structure Dom sous-jacente change

Le module d'événements de niveau DOM3 redéfinit ces événements sur la base des événements de niveau DOM2 et ajoute de nouveaux événements. Les principaux navigateurs, y compris IE9, prennent en charge les événements de niveau DOM2 et IE9 prend également en charge les événements de niveau DOM3.

Les événements du DOM simulent des événements personnalisés

Le niveau DOM3 définit également les événements personnalisés. Les événements personnalisés ne sont pas déclenchés nativement par le DOM. Son but est de permettre aux développeurs de créer leurs propres événements. L'événement personnalisé à créer peut être créé par createEvent ("CustomEvent");

L'objet retourné a une méthode initCustomEvent qui reçoit les quatre paramètres suivants.

• Personnalisez le type d'événement déclenché par la chaîne de type. Par exemple "keyDown" "selectedChange";

• La bulle booléenne indique si l'événement doit bouillonner

• annulable (booléen) indique si l'événement peut être annulé

• Toute valeur de l'objet de détail est stockée dans l'attribut de détail de l'objet d'événement

Les détails seront décrits plus loin.

Troisièmement, l'objet événement

Lorsqu'un événement est déclenché, un objet événement (objet événement) est créé, qui contient des propriétés ou des méthodes liées à l'événement. Cet objet sera passé à la fonction d'écoute en tant que premier paramètre.

Attributs communs des objets d'événement dans le modèle d'événement DOM:

• type est utilisé pour obtenir le type d'événement
• cible pour obtenir la cible de l'événement
• stopPropagation () empêche l'événement de bouillonner
• preventDefault () empêche le comportement par défaut de l'événement

Attributs communs des objets d'événement dans le modèle d'événement IE:

• type est utilisé pour obtenir le type d'événement
• srcElement obtient la cible de l'événement
• cancelBubble empêche l'événement de bouillonner
• returnValue empêche le comportement par défaut de l'événement

Quatre, liaison et annulation d'événements

1. Liaison d'événements

1.1 Nom de l'événement Object.on = fonction de gestion des événements

Inconvénient: si vous liez plusieurs événements, l'événement précédent sera écrasé par l'événement suivant

document.getElementById("btn").onclick = function () {
        console.log("第一");
    };

1.2. Object. AddEventListener ("le nom de l'événement sans on", gestionnaire d'événements, false)

Explication: Le troisième paramètre est expliqué dans la phase d'événement de cet article, false: bullage; true: capture

Avantages: plusieurs événements peuvent être liés

Inconvénients: prise en charge de Google et Firefox, IE8 ne prend pas en charge

document.getElementById("btn").addEventListener("click", function () {
        console.log("第一");
    }, false);
    //false冒泡阶段(默认),true捕获阶段

3. Object.attachEvent ("sur le nom de l'événement", fonction de traitement des événements);

Avantages: plusieurs événements peuvent être liés

Inconvénients: Google et Firefox ne prennent pas en charge, IE8 prend en charge

document.getElementById("btn").attachEvent("onclik", function () {
        console.log("第一");
    });

2. Dissocier

Comment lier l'événement, vous devez utiliser la méthode correspondante pour dissocier l'événement
1. Dissocier l' événement

对象.on事件名字=事件处理函数--->绑定事件  
对象.on事件名字=null;  

2. Incident de dénouement

对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件  
对象.removeEventListener("没有on的事件类型",函数名字,false);  

3. Incident de dénouement

对象.attachEvent("on事件类型",命名函数);---绑定事件  
对象.detachEvent("on事件类型",函数名字);  

五 、 Wrapper d'événement

En raison des différences entre les modèles d'événements et les objets Event, afin d'assurer la compatibilité avec divers navigateurs, nous pouvons ajouter un Event Wrapper, qui devrait fournir une interface d'opération d'événements cohérente pour chaque navigateur.

var eventUtils={
     // 添加句柄
     addHandler:function(element,type,handler){
       if(element.addEventListener){
         element.addEventListener(type,handler,false);
       }else if(element.attachEvent){
         element.attachEvent('on'+type,handler);
       }else{
         element['on'+type]=handler;
       }
     },
     // 删除句柄
     removeHandler:function(element,type,handler){
       if(element.removeEventListener){
         element.removeEventListener(type,handler,false);
       }else if(element.detachEvent){
         element.detachEvent('on'+type,handler);
       }else{
         element['on'+type]=null;
       }
     },
    //获取事件对象
    //IE模型中event是一个全局唯一的对象绑定在window对象上
    getEvent:function(event){
       return event?event:window.event;
    },
    //获取类型
    getType:function(event){
     return event.type;
    },
    getElement:function(event){
     return event.target || event.srcElement;
    },
    //阻止默认事件
    preventDefault:function(event){
     if(event.preventDefault){
      event.preventDefault();
     }else{
      event.returnValue=false;
     }
    },
    //阻止冒泡
   stopPropagation:function(event){
   if(event.stopPropagation){
     event.stopPropagation();
   }else{
     event.cancelBubble=true;
    }
   }
  }

Six événements personnalisés

Il existe de nombreux événements intégrés dans JS, tels que le clic, le survol de la souris, etc., mais les événements intégrés sont finalement limités. Parfois, nous voulons définir certains événements nous-mêmes, tels que trois clics, trois clics. Comment implémenter des événements personnalisés?

1. Commencez par créer un événement. Les méthodes suivantes peuvent être utilisées:

var event = new Event('threeclick', {"bubbles":true, "cancelable":false});

• bulles indique si l'événement bouillonne.
• annulable indique si l'événement peut être annulé.

2. Ensuite, nous devons enregistrer une fonction d'écoute pour l'événement:

target.addEventListener('threeclick', hello, false);

3. Enfin, nous devons déclencher l'événement au bon moment, nous pouvons utiliser la fonction dispatchEvent. Cette méthode déclenche un événement spécifié sur le nœud actuel, déclenchant ainsi l'exécution de la fonction de surveillance. Cette méthode renvoie une valeur booléenne. Tant qu'une fonction d'écoute appelle Event.preventDefault (), elle renvoie false, sinon elle renvoie true.

target.dispatchEvent(event);

Seven, modèle d'événement JQuery

L'un des principaux problèmes résolus par JQuery est la compatibilité des navigateurs, qui dispose de sa propre implémentation de modèle d'événement. Il présente principalement les caractéristiques suivantes:

• Redéfinir l'objet JQuery.Event, unifier les attributs et méthodes d'événement et unifier le modèle d'événement
• Vous pouvez ajouter plusieurs gestionnaires d'événements à un type d'événement, et vous pouvez ajouter des gestionnaires d'événements de plusieurs types d'événements à la fois
• Prise en charge des événements personnalisés (espace de noms d'événements)
• Fournit des événements de combinaison de basculement et de survol
• Fournir un, vivre-mourir, déléguer-non-délégué
• Fournit un mécanisme unifié d'encapsulation, de liaison, d'exécution et de destruction des événements
• $ (document) .ready ();

8. Modèle d'observateur de modèle d'événement JS

Le mode Observateur est également appelé mode Publier / Souscrire, qui permet à plusieurs objets Observateur de surveiller un certain objet de rubrique en même temps. Lorsque l'état de cet objet de rubrique change, il avertit tous les abonnés afin qu'ils puissent réagir.
Le modèle d'événement de JS est une manifestation du mode observateur: lorsque l'événement correspondant est déclenché, toutes les fonctions de surveillance qui surveillent l'événement seront appelées.

Code pour un modèle d'observateur implémenté dans JS:

var events = (function() {
  var topics = {};

  return {
    publish: function(topic, info) {
      console.log('publish a topic:' + topic);
      if (topics.hasOwnProperty(topic)) {
        topics[topic].forEach(function(handler) {
          handler(info ? info : {});
        })
      }
    },
    subscribe: function(topic, handler) {
      console.log('subscribe an topic:' + topic);
      if (!topics.hasOwnProperty(topic)) {
        topics[topic] = [];
      }

      topics[topic].push(handler);
    },
    remove: function(topic, handler) {
      if (!topics.hasOwnProperty(topic)) {
        return;
      }

      var handlerIndex = -1;
      topics[topic].forEach(function(element, index) {
        if (element === handler) {
          handlerIndex = index;
        }
      });

      if (handlerIndex >= 0) {
        topics[topic].splice(handlerIndex, 1);
      }
    },
    removeAll: function(topic) {
      console.log('remove all the handler on the topic:' + topic);
      if (topics.hasOwnProperty(topic)) {
        topics[topic].length = 0;
      }
    }
  }
})();

utilisation:

//主题监听函数
var handler = function(info) {
    console.log(info);
}
//订阅hello主题
events.subscribe('hello', handler);

//发布hello主题
events.publish('hello', 'hello world');

Neuf, exemple de code (liaison d'événement générale, bulle d'événement et proxy)

1. Liaison d'événement général

//原本的
var btn = document.getElementById('btn1');
btn.addEventListener('click',function(event){
    console.log('clicked');
})

//封装的    如addEventListener 就不用重复写，不然太长了影响压缩，占用带宽
function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}
//使用
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
    e.preventDefault(); //阻止默认行为，如a标签跳转
    alert(clicked);
})

Améliorer la fonction des événements de liaison générale (ajouter un proxy)

function bindEvent(elem,type,selector,fn){
    if(fn == null){//没传入代理
        fn = selector;x
        selector = null;
    }
    elem.addEventListener(type,function(e){
        var target;
        if(selector){//如果存在代理
        target = e.target;  //target事件属性可返回事件的目标节点（触发该事件的节点）
        if(target.matches(selector)){ //判断是否满足这个选择器
            fn.call(target,e)
        }
        }else{
            fn(e);
        }
    })
}


//使用代理  好处：代码简洁，减少浏览器内存占用
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function(e){
    console.log(this.innerHTML); //此处的this是a
});

2. Événement bouillonnant

Cliquez sur p1 pour activer, cliquez sur autre pour annuler, utilisez le bullage, pas besoin d'ajouter un événement de clic annulé à côté

 <body>
        <div id="div1">
            <p id="p1">激活</p>
             <p id="p2">取消</p>
              <p id="p3">取消</p>
               <p id="p4">取消</p>
        </div>
        <div id="div2">
            <p id="p5">取消</p>
             <p id="p6">取消</p>
        </div>
    </body>


    var p1 = document.getElementById('p1');
    var body = document.body;
    bindEvent(p1,'click',function(e){
        e.stopPropatation();  // 阻止冒泡，就不会再触发body上的取消事件了；
        alert('激活');
    })
    bindEvent(body,'click',function(e){
        alert('取消')
    })

     //封装的    如addEventListener 就不用重复写，不然太长了影响压缩，占用带宽
        function bindEvent(elem,type,fn){
            elem.addEventListener(type,fn);
        }

3. Agence

 <div id="div1">
       <a href="#">a1</a>
        <a href="#">a2</a>
         <a href="#">a3</a>
          <a href="#">a4</a>
          <!-- 会随时新增更多的 a标签 -->
</div>

var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
    var target = e.target;
    if(target.nodeName === 'A'){
        alert(target.innerHTML);
    }
})

Opération de nœud supplémentaire

• document.getElementById (); // id nom, qui est rarement utilisé dans le développement réel. L'ID de classe est généralement utilisé dans le sélecteur. Généralement, il n'est utilisé qu'au niveau supérieur et ne peut pas trop s'appuyer sur l'id.

• document.getElementsByTagName (); // Nom de la balise

• document.getElementsByClassName (); // 类 名

• document.getElementsByName (); // valeur d'attribut name, généralement non utilisée

• document.querySelector (); // modèle de sélecteur css, retourne le premier élément qui correspond au modèle, et le résultat est un élément; si aucun élément correspondant n'est trouvé, null est retourné

• document.querySelectorAll () // modèle de sélecteur css, retourne tous les éléments correspondant au modèle et le résultat est un tableau de classes

• parentNode // Récupère le nœud parent du nœud sélectionné, le nœud le plus haut est #document

• childNodes // Récupère les nœuds enfants du nœud sélectionné

• firstChild // Récupère le premier nœud enfant du nœud sélectionné

• lastChild // Récupère le dernier nœud enfant du nœud sélectionné

• nextSibling // Obtient la valeur d'attribut nextSibling du dernier nœud dans la liste de nœuds frères suivant du nœud sélectionné est nulle

• previousSibling // Récupère la valeur de l'attribut previousSibling du premier nœud de la liste des nœuds frères précédents du nœud sélectionné pour qu'elle soit nulle

Référence: https://segmentfault.com/a/1190000006934031

Lien vers cet article: https://blog.csdn.net/qq_39903567/article/details/115281827