Analyse du modèle d'événement en js-js tutoriel-php.cn

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!"

Copier après la connexion

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

Copier après la connexion

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);

Copier après la connexion

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);
};

Copier après la connexion

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, );

Copier après la connexion

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);//删除事件处理程序

Copier après la connexion

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

Copier après la connexion

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