1. Événements multiplateformes
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 IE Propriétés et méthodes
keycode charcode
empêcherdEfault returnValue = false
RelatedTarget Froobj | toobj
stopPropation annulebuble = 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 = fonction (événement) {if (isie && iswin) --- Détection des problèmes de navigateur {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;}2. À propos de la cible bouillonnante et du courant de courant
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);3. La différence entre IE et DOM
Domestique
Obtenez l'événement cible.target event.srcelement
Obtenez le code de caractères event.Charcode event.Keycode
Bloquer l'événement de comportement par défaut.
bubble 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 (); }}4. É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;}Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.