Analyse du modèle d'événement en js

Cet article présente principalement le modèle d'événement en JavaScript, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Événements et flux d'événements

L'événement est le moment où le navigateur interagit avec le document, comme cliquer sur un bouton, remplir un formulaire, etc. C'est le pont de communication entre Javascript et HTML. DOM est une structure arborescente. Si les événements sont liés aux deux nœuds parents en même temps, lorsque les nœuds enfants sont déclenchés, l'ordre dans lequel ces deux événements se produisent impliquera le contenu du flux d'événements, qui décrit l'ordre dans lequel les événements se produisent. la page est acceptée. Le flux d'événements décrit l'ordre dans lequel les événements sont reçus de la page, mais ce qui est plus intéressant est que les équipes de développement d'IE et de Netscape ont en réalité proposé des concepts presque complètement opposés. Le flux d'événements d'IE est un flux bouillonnant d'événements, tandis que le flux d'événements de Netscape Communicator est un flux de capture d'événements.

Le flux d'événements est donc principalement divisé en deux types : le bouillonnement d'événements et la capture d'événements.

Le flux d'événements d'IE est appelé bouillonnement d'événements, c'est-à-dire que 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), puis se propage vers le haut vers des nœuds moins spécifiques (le document) ). Un autre flux d'événements proposé par l'équipe Netscape est appelé capture d'événements. L'idée de la capture d'événements est que les nœuds les moins spécifiques doivent recevoir les événements plus tôt et que les nœuds les plus spécifiques doivent recevoir les événements en dernier. Le but de la capture est de capturer un événement avant qu'il n'atteigne sa destination prévue.

Le flux d'événements spécifié par les événements de niveau DOM2 comprend trois étapes : l'étape de capture d'événement, l'étape cible et l'étape de bouillonnement d'événement. La première chose qui se produit est la capture d'événement, qui offre la possibilité d'intercepter l'événement. Ensuite, la cible réelle reçoit l'événement. La phase finale est la phase bouillonnante, où vous pouvez réagir aux événements.

1. Modèle d'événement DOM niveau 0

Le modèle d'événement DOM niveau 0 est un modèle d'événement précoce, également connu sous le nom de modèle d'événement original dans ce modèle, les événements. ne se propagera pas, c'est-à-dire qu'il n'y a aucun concept de flux d'événements. La fonction d'écoute de liaison d'événement est relativement simple. Pour utiliser Javascript pour spécifier un gestionnaire d'événement, vous devez d'abord obtenir une référence à l'objet à exploiter.

Chaque élément (y compris window et document) possède ses propres attributs de gestion d'événements. Ces attributs sont généralement tous en minuscules, comme onclick. Les gestionnaires d'événements peuvent être spécifiés en définissant cet attribut sur une fonction :

 btn = document.getElementById("myBtn"= "Clicked!"

//HTML事件处理程序<form method="post">
    <input type="text" name="username" value="">
    <input type="button" value="Username" onclick = "alert(username.value)">
</form>

2. Modèle d'événement de niveau DOM2

Dans ce modèle, il est divisé en trois processus : l'étape de capture d'événement, l'étape de bouillonnement d'événement dans l'étape cible 7 ; 🎜>Phase de capture d'événement. L'événement se propage du document jusqu'à l'élément cible, vérifie si les nœuds passants sont liés à la fonction d'écoute d'événement et l'exécute si tel est le cas.

• 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 bouillonnante de l'événement. L'événement bouillonne de l'élément cible vers le document, vérifie si les nœuds passants sont liés à la fonction d'écoute d'événement et l'exécute si tel est le cas.

• Le niveau DOM2 définit deux méthodes pour gérer les opérations de spécification et de suppression des gestionnaires d'événements, addEventListener() et removeEventListener(). Tous les nœuds DOM contiennent ces deux méthodes et prennent trois paramètres, le nom de l'événement à gérer, la fonction en tant que gestionnaire d'événement et une valeur booléenne. Pour ajouter un gestionnaire d'événement à l'événement click, vous pouvez utiliser :

À ce stade, l'ordre d'exécution est une exécution séquentielle : "myBtn" " Bonjour gamin". Dans IE, l’ordre d’exécution est exactement le contraire.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", functioin() {
    alert(this.id);
}, false);
btn.addEventListener("click", function() {
    alert("Hello Kid");
}, false);

La manière de supprimer la fonction d'écoute d'événement est la suivante :

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};

Ici, vous ne pouvez utiliser que des expressions de fonction comme gestionnaire d'événements, car removeEventListener() nécessite que les paramètres transmis lors de la suppression soient les mêmes que ceux utilisés lors de l'ajout de l'application. Les fonctions d'écoute d'événements ajoutées via des fonctions anonymes ne peuvent pas être supprimées.

"click", handler, btn.removeEventListener("click", handler, );

3. Modèle d'événement dans IE

IE utilise deux méthodes similaires à celles du DOM : attachEvent() et detachEvent(). Les deux méthodes acceptent les deux mêmes paramètres, le nom du gestionnaire d'événements et la fonction du gestionnaire d'événements. Étant donné qu'IE8 et les versions antérieures ne prennent en charge que le bouillonnement d'événements, les gestionnaires d'événements ajoutés via attachEvent() seront ajoutés à la phase de bouillonnement. Si vous utilisez attachEvent() pour ajouter un gestionnaire d'événement au bouton, il est disponible :

var btn = document.getElementById("myBtn");var handler = function() {
    alert(this.id);
};
btn.attachEvent("onclick", handler);//添加事件处理程序btn.detachEvent("onclick", handler);//删除事件处理程序

Objet événement

.

L'objet événement dans DOM

le type représente le type d'événement déclenché

• la cible représente la cible de l'événement

• currentTarget représente l'élément dans lequel le gestionnaire d'événements traite actuellement l'événement

• cancelable (Boolean) 表明是否可以取消事件的默认行为

• bubbles （Boolean）表明事件是否冒泡

• perventDefault()取消事件的默认行为。如果cancelable为true，则可以使用这个方法

• stopPropagation()取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法。

IE中的事件对象

• type表示被触发的事件类型

• srcElement表示事件的目标

• cancelBubble （Boolean）默认是false，将其设为true就可以取消事件冒泡

• returnValue (Boolean) 默认是true，将其设置为false就可以取消事件的默认行为

        有了上面的事件对象，就可以写出跨浏览器的事件对象封装成事件包裹了。

var EventUtil = {
    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){                 //DOM2
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){                  //IE
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;                  //DOM0        }
    },

    getEvent: function(event){        
    return event ? event : window.event;
    },

    getTarget: 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;
        }
    }};

 以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

通过node.js来调取baidu-aip-SDK实现身份证识别的功能

如何把js变量值传到php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!