Maison >interface Web >js tutoriel >Laissez-moi vous présenter les objets événementiels. Que sont les objets événementiels js ?

Laissez-moi vous présenter les objets événementiels. Que sont les objets événementiels js ?

php是最好的语言original: 2018-07-26 12:53:371711parcourir

Tout d'abord, introduisons l'objet événement. Les événements existent sous la forme d'objets dans les navigateurs, c'est-à-dire des événements. Lorsqu'un événement est déclenché, un événement d'objet événement est généré, qui contient toutes les informations relatives à l'événement. Inclut les éléments qui ont provoqué l'événement, le type d'événement et d'autres informations liées à l'événement spécifique. Cet article présente principalement les informations pertinentes sur les objets d'événement js dans les événements JavaScript. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

<.> 1. Objet événement

1. Comprendre l'objet événement

Les événements existent sous forme d'objets dans les navigateurs, c'est-à-dire des événements . Lorsqu'un événement est déclenché, un événement d'objet événement est généré, qui contient toutes les informations relatives à l'événement. Inclut les éléments qui ont provoqué l'événement, le type d'événement et d'autres informations liées à l'événement spécifique.

Par exemple : les événements générés par les opérations de la souris contiendront des informations sur la position de la souris ; les événements générés par les opérations du clavier contiendront des informations sur les touches enfoncées.

Tous les navigateurs prennent en charge les objets événement, mais les méthodes de prise en charge sont différentes. Dans DOM, l'objet événement doit être transmis comme seul paramètre à la fonction de traitement des événements. Dans IE, l'événement est un attribut de l'objet fenêtre.

2. event

<input id="btn" type="button" value="click" onclick=" console.log(&#39;html事件处理程序&#39;+event.type)"/>

dans le gestionnaire d'événements HTML créera une fonction contenant l'événement variable local. Les objets d'événement sont accessibles directement via l'événement.

3. Objets événement dans DOM

Les gestionnaires d'événements DOM niveau 0 et DOM niveau 2 transmettront l'événement en tant que paramètre.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("DOM0 & click");
console.log(event.type); //click
}
btn.addEventListener("click", function (event) {
console.log("DOM2 & click");
console.log(event.type); //click
},false);
</script>
</body>

4. Objet événement dans IE

Le premier cas : lors de l'ajout d'un gestionnaire d'événement via la méthode de niveau DOM0, l'objet événement est utilisé as window Une propriété de l'objet existe.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event.type); //click
}
</script>
</body>

Le deuxième cas : le gestionnaire d'événements ajouté via attachEvent(), l'objet événement est passé en paramètre.

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
})
</script>
</body>

Mais il y a deux choses que je ne comprends pas.

1. Un paramètre d'événement peut également être transmis au gestionnaire d'événements ajouté via la méthode DOM niveau 0. Son type est le même que window.event.type, mais le paramètre d'événement. transmis est différent. C'est différent de window.event, pourquoi ?

btn.onclick= function (event) {
var event1=window.event;
console.log(&#39;event1.type=&#39;+event1.type); //event1.type=click
console.log(&#39;event.type=&#39;+event.type); //event.type=click
console.log(&#39;event1==event?&#39;+(event==event1)); //event1==event?false
}

2. L'événement transmis dans le gestionnaire d'événements ajouté via attachEvent est différent de window.event Pourquoi ?

<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
console.log("event==window.event?"+(event==window.event)); //event==window.event?false
})
</script>
</body>

Ce qui précède est un résumé de l'apprentissage des événements JavaScript présenté par l'éditeur (3) Connaissances connexes des objets d'événement js. J'espère que cela sera utile à tout le monde. pour en savoir plus Pour plus de contenu, faites attention au site de Script House !

Recommandations associées :

Résumé de l'apprentissage de l'événement JavaScript (2) gestionnaire d'événements js
Résumé d'apprentissage de l'événement JavaScript (4) Membres publics (propriétés et méthodes) de l'événement
Résumé de l'apprentissage des événements JavaScript (1) Flux d'événements
Résumé de l'apprentissage des événements JavaScript (5) Événements de souris des types d'événements en js

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des instructions couramment utilisées dans VueArticle suivant：Résumé des instructions couramment utilisées dans Vue

Articles Liés

Voir plus