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

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

php是最好的语言

Libérer： 2018-07-26 12:53:37

original

1700 Les gens l'ont consulté

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)"/>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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
}

Copier après la connexion

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>

Copier après la connexion

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!