Lectures connexes:
JavaScript Event Learning Résumé (V) Type d'événement de souris en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Résumé (i) Flux d'événements
//www.vevb.com/article/86261.htm
JavaScript Event Learning Résumé (iv) Membres publics de l'événement (propriétés et méthodes)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Résumé (ii) JS Événements JS
//www.vevb.com/article/86264.htm
JavaScript Event Learning Résumé (III) Objet de l'événement JS
//www.vevb.com/article/86266.htm
1. Objet de l'événement
1. Comprendre l'objet de l'événement
Les événements existent dans le navigateur en tant qu'objets, c'est-à-dire l'événement. Le déclenchement d'un événement générera un événement d'objet d'événement, qui contient toutes les informations liées à l'événement. Comprend les éléments qui se traduisent par l'événement, le type d'événement et d'autres informations liées à un événement spécifique.
Par exemple: l'événement généré par l'opération de souris contiendra des informations sur la position de la souris; L'événement généré par l'opération de clavier contiendra des informations liées à la touche pressée.
Tous les navigateurs prennent en charge les objets d'événement, mais les méthodes de support sont différentes. Dans DOM, les objets de l'événement doivent être transmis aux fonctions de traitement des événements comme paramètres uniques. Dans IE, l'événement est un attribut d'objets Window.
2. Événement dans le gestionnaire d'événements HTML
<input id = "btn" type = "bouton" value = "cliquez" onclick = "console.log ('html handler d'événements' + event.type)" />Cela crée une fonction contenant l'événement variable local. L'objet d'événement est accessible directement via l'événement.
3. Événement Objets dans DOM
Les gestionnaires d'événements au niveau DOM0 et NIVEL DOM2 passeront l'événement sous forme de paramètres.
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> 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); // cliquez}, false); </cript> </ body>4. Événement Objets dans IE
Le premier cas: lors de l'ajout d'un gestionnaire d'événements via la méthode de niveau DOM0, l'objet d'événement existe en tant qu'attribut de l'objet Window.
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> var btn = document.getElementById ("btn"); btn.onclick = function () {var event = window.event; console.log (event.type); // Cliquez sur} </cript> </ody>Le deuxième cas: le gestionnaire d'événements ajouté via attachEvent (), et l'objet d'événement est passé en tant que paramètre.
<body> <entrée id = "btn" type = "bouton" value = "cliquez" /> <cript> var btn = document.getElementById ("btn"); btn.attachevent ("onclick", fonction (type) {console.log (event.type); // cliquez}) </scripteur> </pole>Mais je ne comprends pas deux choses.
1. Un paramètre d'événement peut également être transmis dans le gestionnaire d'événements ajouté via la méthode de niveau DOM0. Son type est le même que Window.Event.Type, mais le paramètre d'événement passé est différent de Window.Event. Pourquoi?
btn.onclick = function (event) {var event1 = window.event; console.log ('event1.type =' + event1.type); //event1.type=clickconsole.log('event.type='+Event.type); //event.type=clickconsole.log('event1==event?'+(event==event1)); // Event1 == Event? Faux}2. L'événement passé dans le gestionnaire d'événements ajouté via attachEvent est différent de Window.Event. Pourquoi?
<body> <input id = "btn" type = "bouton" value = "cliquez" /> <cript> var btn = document.getElementById ("btn"); btn.attachevent ("onClick", function (type) {console.log (event.type); //clickconsole.log("event==window.event?"+(event==window.event));Ce qui précède est le résumé de JavaScript Event Learning (III) Connaissances connexes sur les objets d'événement JS introduits par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous voulez en savoir plus, veuillez faire attention au site Web de Wulin.com!