1. Eventos multiplataforma
¿Qué es el evento multiplataforma? Es decir, el mismo evento se ejecuta en diferentes navegadores, y los métodos utilizados son diferentes.
¿Qué es un objeto EventUtil? ¿Cuál es su función? Es decir, un contenedor que combina todas las funciones relacionadas con los eventos para facilitar la gestión de los objetos de eventos, y no tiene atributos. Se trata principalmente de la ejecución entre eventos DOM y los eventos de IE para que sean lo más similares posible.
Echemos un vistazo a las propiedades y métodos del objeto entre DOM y IE para comparar (solo existen las diferentes propiedades y métodos entre los dos). Hay cinco puntos principales:
Propiedades y métodos de DOM IE Propiedades y métodos
código de teclas de charqueo
PreventDefault ReturnValue = falso
Target Related Fromobj | Toobj
stopPropation CancelBuble = True
objetivo srcobj
Echemos un vistazo con una pequeña demostración, que puede resolver el problema de compatibilidad de la plataforma multiplataforma de los eventos:
<html> <fead> <title> eventUtil </title> <script eventType = "text/javaScript"> var eventUtil = {// escucha a event 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; }}, // Devuelve el objeto del evento getEvent: function (evento) {Evento de retorno || Window.event; // Evento de regreso? Evento: Window.event; }, // Devuelve el objeto de evento de destino getTarget: function (event) {return Event.target || event.srcobj; }, PreventDefault: function (event) {if (event.preventDefault) {event.preventDefault (); } else {event.returnValue = false; }}, removeSistener: 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> <input eventType = "button" value = "Click me" id = "btn"/> <p> event </p> <a> hello word! </a> <script eventType = "text/javaScript"> function addBtnListen (event) {var eventUtUtil.getEvent (event); var Target = eventUtil.getTarget (evento); alerta ("mi nombre es kock"); alerta (event.eventType); alerta (objetivo); eventUtil.stoppropagation (evento); } function getBodyListen (evento) {Alert ("Haga clic en el cuerpo"); } function getLinkListen (evento) {alert ("prevenir el evento predeterminado"); var event = eventUtil.getEvent (evento); eventUtil.PreventDefault (evento); } window.onload = function () {var btn = document.getObjById ("btn"); Var link = document.getObjsbytagName ("A") [0]; eventUtil.AddListener (btn, "hacer clic", addBtnListen); eventUtil.addListener (document.body, "haga clic", getBodyListen); eventUtil.addListener (enlace, "hacer clic", getLinkListen); } </script> </body> </html>El método anterior puede resolver el problema multiplataforma de los eventos. A continuación, echemos un vistazo a las propiedades de CharCode.
Primero, defina un nuevo método para EventUtil, FormateVent, acepta un parámetro, es decir, el objeto de evento.
eventUtil.FormateVent = function (event) {if (isie && iswin) --- detección de problemas de navegador {event.charcode = (event.type == "KeyPress")? Event.KeyCode: 0; event.eventPhase = 2;-indica la fase burbujeante, es decir, solo admite la fase burbujeante} Evento de retorno;}2. Acerca del objetivo burbujeante y CurrentTarget
El objetivo está en la etapa objetivo de la transmisión del evento; CurrentTarget está en la etapa de captura, objetivo y burbuja de la transmisión del evento. Solo cuando la transmisión del evento está en la etapa objetivo, los dos punteros son los mismos, y cuando se encuentra en las etapas de captura y burbuja, el objetivo apunta al objeto haciendo clic y al TorrittTarget apunta al padre del evento actual.
<div id = "outer" style = "fondo:#099"> <p> Soy el objetivo div </p> ---- Haga clic en esta parte, salida: e.target.tagname: p || E.CurrentTarget.tagname: div <p id = "inner" style = "fondo:#9c0"> Soy el objetivo p </p> --- haga clic en esta parte, salida: e.target.tagname: p || E.CurrentTarget.tagname: div <br> --- Haga clic en esta parte, salida: e.target.tagname: div || E.CurrentTarget.tagname: Div </div> // Mira la segunda columna de cambio: <div id = "outer" style = "fondo:#099"> <div> Soy el objetivo div </div> ---- Haga clic en esta parte, salida: e.target.tagname: div || E.CurrentTarget.tagname: div <p id = "inner" style = "fondo:#9c0"> Soy el objetivo p </p> --- haga clic en esta parte, salida: e.target.tagname: p || E.CurrentTarget.tagname: div <br> --- Haga clic en esta parte, salida: e.target.tagname: div || E.CurrentTarget.tagname: div </div>
function getObj (id) {return document.getElementById (id); } function addEvent (obj, event, fn) {if (window.attachevent) {obj.attachevent ("on" + evento, fn); } else if (window.addeventListener) {obj.addeventListener (evento, fn, falso); }} test de función (e) {alert ("e.target.tagname:" + e.target.tagname + "/n e.currentTarget.tagname:" + e.currentTarget.tagname); } var outter = getObj ("exterior"); var inner = getobj ("interno"); // addEvent (interior, "hacer clic", prueba); addEvent (exterior, "hacer clic", prueba);3. La diferencia entre IE y DOM
Domie
Obtenga el evento Target.Target Event.
Obtenga el código de caracteres Event.Charcode Event.KeyCode
Bloquee el comportamiento predeterminado.
bubble event.stoppropagation () event.cancelbubble = true
Con respecto a bloquear el comportamiento predeterminado, por ejemplo, cuando el usuario hace clic con el botón derecho en el mouse, si no desea que aparezca el menú, puede usar el comportamiento predeterminado de bloqueo:
document.body.onContextMenu = function (event) {if (isie) {var oevent = window.event; oevent.returnValue = false; // También se puede devolver falso directamente; prevenir el comportamiento predeterminado} else {oevent.preventDefault (); }}4. Evento del mouse
<p> Use su mouse para hacer clic y haga doble clic en el cuadrado rojo </p> <div onMouseOver = "manejo de (event)" onMouseOut = "handleEvent (event)" onmousEdown = "handleEvent (event)" onMouseUp = " id = "txt1" Rows = "5" cols = "45"> </textarea> </p> <!-Detección de eventos de teclado-> <p> <input type = "text" id = "textbox" onkeydown = "handle (event)" onkeyPress = "handle (event)" onKeyUp = "handy) cols = "45"> </textarea> </p>
El archivo JS es el siguiente:
función handleEvent (event) {var oText = document.getElementById ('txt1'); oText.value+= "/n"+event.type; oText.Value+= "/n El objetivo es"+(Event.Srcelement || Event.Target) .id; oText.Value+= "/n at ("+event.clientx+","+event.clienty+") en el cliente"; oText.Value+= "/n Botton Down IS"+Event.Button; var Arrkeys = []; oText.Value+= "/n RelationTarget es"+event.relatedTarget.tagname; //event.relatedTarget.tagname puede determinar la fuente y la fuente del mango de la función de mouse} (evento) {var oText2 = document.getElementById ('txt2'); oText2.Value+= "/n"+event.type; var Arrkeys = []; if (event.shiftkey) {Arrkeys.push ("shift");} if (event.ctrlkey) {arkeys.push ("ctrl");} if (event.altkey) {arqueys.push ("alt");} oText2.value+= "/n teclawn es"+arskeys;}Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.