Qu'est-ce que l'événement multiplateforme? Autrement dit, le même événement est exécuté sur différents navigateurs, et les méthodes utilisées sont différentes.
Qu'est-ce qu'un objet EventUtil? Quelle est sa fonction? Autrement dit, un conteneur qui combine toutes les fonctions liées aux événements pour faciliter la gestion des objets d'événement, et il n'a aucun attribution. Il traite principalement de la course entre les événements DOM et les événements IE pour les rendre aussi similaires que possible.
Jetons un coup d'œil aux propriétés et aux méthodes de l'objet entre DOM et IE pour comparer (il n'y a que les différentes propriétés et méthodes entre les deux). Il y a cinq points principaux:
| Propriétés et méthodes DOM | C'est-à-dire des propriétés et des méthodes |
| charcode | keycode |
| empêcher dedefault | returnValue = false |
| RelatedTarget | FRATBJ | TOOBJ |
| stoppropation | Cancelbuble = True |
| cible | srcobj |
Jetons un coup d'œil avec une petite démo, qui peut résoudre le problème de compatibilité multiplateforme des événements:
<html> <éad- head> <itle> eventUtil </ title> <script eventType = "text / javascript"> var eventUtil = {// écouter l'événement addListener: function (obj, eventType, fn) {if (obj.addeventListener) {obj.addeventListener (EventType, fn, false); } else if (obj.attachevent) {obj.attachevent ('on' + eventType, fn); } else {obj ['on' + eventType] = fn; }}, // renvoie l'objet de l'événement getEvent: fonction (événement) {return event || window.event; // Événement de retour? Événement: Window.Event; }, // Renvoie l'objet de l'événement cible getTarget: function (event) {return event.target || event.srcobj; }, empêcherdFault: function (event) {if (event.preventDefault) {event.PreventDefault (); } else {event.returnvalue = false; }}, removeListener: function (obj, eventType, fn) {if (obj.reMoveEventListener) {obj.reMoveEventListener (EventType, fn, false); } else if (obj.deatTachevent) {obj.detachevent (eventType, fn); } else {obj ['on' + eventType] = null; }}, stopPropagation: function (event) {if (event.stoppropagation) {event.stoppropagation (); } else {event.cancelbubble = true; }}}; </ script> </ head> <body> <entrée EventType = "Button" value = "cliquez sur moi" id = "btn" /> <p> Event </p> <a> Bonjour Word! </a> <Script EventType = "Text / JavaScript"> fonction AddBtnListen (événement) {var eventUtil.getEvent (événement); var cible = eventUtil.getTarget (événement); alert ("Mon nom est Kock"); alert (event.eventType); alerte (cible); eventUtil.stoppropagation (événement); } fonction getBodyListen (event) {alert ("cliquez sur corps"); } fonction getLinkListen (événement) {alert ("Empêcher l'événement par défaut"); var event = eventUtil.getEvent (événement); EventUtil.PreventDefault (événement); } window.onload = function () {var btn = document.getObjbyid ("btn"); var link = document.getObjsByTagName ("a") [0]; eventUtil.addListener (btn, "click", addbtnListeten); eventUtil.AddListener (document.body, "cliquez", getBodyListen); eventUtil.AddListener (lien, "cliquez", getLinkListeten); } </ script> </ body> </html>La méthode ci-dessus peut résoudre le problème multiplateforme des événements. Ensuite, jetons un coup d'œil aux propriétés de Charcode.
Tout d'abord, définir une nouvelle méthode pour EventUtil, Formatevent, accepte un paramètre, c'est-à-dire l'objet de l'événement.
eventUtil.Formatevent = function (event) {if (isie && iswin) {event.charcode = (event.type == "keypress")? Event.KeyCode: 0; event.eventPhase = 2; - indique la phase de bouillonnement, c'est-à-dire ne prend en charge que l'événement de retour de la phase bouillonnante;}Deux: à propos de la cible et du courant actuel dans la bouillonnement
L'objectif est au stade cible du flux d'événements; CurrentTarget est dans l'étape de capture, de cible et de bulle du flux d'événements. Ce n'est que lorsque le flux d'événements est en phase cible, les deux pointeurs sont les mêmes, et lorsqu'il est dans les étapes de capture et de bulles, la cible pointe vers l'objet cliqué et le CurrentTarget pointe vers le parent de l'événement actuel.
<div id = "exter" style = "background: # 099"> <p> je suis le div cible </p> ---- cliquez sur cette partie, sortie: e.target.tagname: p || e.currentTarget.tagname: div <p id = "inner" style = "background: # 9c0"> Je suis la cible p </p> --- cliquez sur cette pièce, sortie: e.target.tagname: p || e.currentTarget.tagname: div <br> --- cliquez sur cette partie, sortie: e.target.tagname: div || e.currentTarget.tagname: div </div> // Regardez la deuxième colonne de modification: <div id = "exter" style = "background: # 099"> <div> Je suis le div cible </div> ---- cliquez sur cette partie, sortie: e.target.tagname: div || e.currentTarget.tagname: div <p id = "inner" style = "background: # 9c0"> Je suis la cible p </p> --- cliquez sur cette pièce, sortie: e.target.tagname: p || e.currentTarget.tagname: div <br> --- cliquez sur cette partie, sortie: e.target.tagname: div || e.currentTarget.tagname: div </div>
fonction getOBj (id) {return document.getElementById (id); } fonction addEvent (obj, événement, fn) {if (window.attachevent) {obj.attachevent ("on" + event, fn); } else if (window.addeventListener) {obj.addeventListener (événement, fn, false); }} Fonction Test (e) {alert ("e.target.tagname:" + e.target.tagname + "/ n e.currentTarget.tagname:" + e.currentTarget.tagname); } var exter = getoBj ("exter"); var inner = getoBj ("inner"); // addEvent (intérieur, "cliquez", test); AddEvent (extérieur, "cliquez", test);Trois: la différence entre IE et DOM
| Dom | C'est-à-dire | |
| Obtenir la cible | event.target | event.srcelement |
| Obtenir le code des caractères | event.Charcode | event.KeyCode |
| Bloquer le comportement par défaut | event.PrevetDefault () | event.Returnvalue = false |
| bulle | event.stoppropagation () | event.cancelbubble = true |
En ce qui concerne le blocage du comportement par défaut, par exemple, lorsque l'utilisateur clique avec le bouton droit sur la souris, si vous ne voulez pas que le menu apparaisse, vous pouvez utiliser le blocage du comportement par défaut:
document.body.onContextMenu = function (event) {if (isie) {var oevent = window.event; oevent.reTurnValue = false; // il peut également être renvoyé faux directement; empêcher le comportement par défaut} else {oevent.PreventDefault (); }}Quatre: événement de souris
<p> Utilisez votre souris pour cliquer et double-cliquez sur le carré rouge </p> <div onMouseOver = "handleEvent (event)" onMouseout = "handleEvent (event)" onMoudown = "handleevent (événement)" onMouseUp = "handleEvent (event)" onclick = "handleevent (event)" ondBLClick = "handleEvent (event)" id = "div1"> <p> <p> <p> <p> <p> <p> id = "txt1" rows = "5" cols = "45"> </ textarea> </p> <! - Détection des événements du clavier -> <p> <input type = "text" id = "textbox" onkeydown = "manche (event)" onKeypress = "mandeins)" onkeyUp = "manche cols = "45"> </ textarea> </p>
Le fichier JS est le suivant:
function handleevent (event) {var otext = document.getElementyId ('txt1'); otext.value + = "/n"+Event.type; otext.value + = "/ n cible est" + (event.srcelement || event.target) .id; otext.value + = "/ n at (" + event.clientx + "," + event.clienty + ") dans le client"; otext.value + = "/ n bouton en bas est" + event.button; var arrkeys = []; otext.value + = "/ n lingtarget est" + event.relatedtarget.tagname; //Event.RelatedTarget.Tagname peut déterminer la source et la source de la souris} Fonction Handle (Event) {var otext2 = document.getElementById ('txt2'); otext2.value + = "/ n" + event.type; var arrkeys = []; if (event.shiftKey) {arrkeys.push ("shift");} if (event.ctrlkey) {Arrkeys.push ("ctrl");} if (event.altkey) {arrkeys.push ("alt");} otext2.value + = "/ n keydown est" + arrkeys;}Le résumé ci-dessus des incidents les plus négligés dans JS est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.