1. Eventos de plataforma cruzada
O que é um evento de plataforma cruzada? Ou seja, o mesmo evento é executado em diferentes navegadores e os métodos utilizados são diferentes.
O que é um objeto eventutil? Qual é a sua função? Ou seja, um contêiner que combina todas as funções relacionadas a eventos para facilitar o gerenciamento de objetos de evento e não possui atributos. Ele lida principalmente com a execução entre os eventos DOM e os eventos do IE para torná-los o mais semelhante possível.
Vamos dar uma olhada nas propriedades e métodos do objeto entre DOM e IE para comparar (existem apenas as diferentes propriedades e métodos entre os dois). Existem cinco pontos principais:
Propriedades e métodos do DOM, ou seja, propriedades e métodos
Charcode KeyCode
PreventDefault ReturnValue = false
RelatedTarget fromObj | Toobj
StopPropation Cancelbuble = true
alvo srcobj
Vamos dar uma olhada nisso com uma pequena demonstração, que pode resolver o problema de compatibilidade de plataforma cruzada dos eventos:
<html> <head> <title> eventUtil </ititle> <script eventtype = "text/javascript"> var eventUtil = {// Ouça o addListener: function (obj, EventType, fn) {if (obj.addeventListener) {obj.adDeVentPener (eventtyTyTENTEN; } else if (obj.attachevent) {obj.attachevent ('on' + EventType, fn); } else {obj ['em' + eventType] = fn; }}, // retorna o objeto de evento getEvent: function (event) {return Event || Window.Event; // Evento de retorno? Evento: Window.Event; }, // retorna o 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; }}, removeListener: function (obj, eventtype, fn) {if (obj.removeEventListener) {obj.removeEventListener (eventtype, fn, false); } else if (obj.deattachevent) {obj.detachevent (eventtype, fn); } else {obj ['em' + eventType] = null; }}, StopPropagation: function (event) {if (event.stopPropagation) {event.stopPropagation (); } else {event.cancelbubble = true; }}}; </script> </ad Head> <body> <input eventtype = "button" value = "clique em mim" id = "btn"/> <p> evento </p> <a> hello word! </a> <script eventType = "text/javascript"> function addbtnlisten (event) {var = eventutil.getinEntin. var no destino = eventUtil.getTarget (evento); alerta ("meu nome é kock"); alerta (event.EventType); alerta (alvo); eventUtil.stopPropagation (evento); } função getBodyListen (event) {alert ("clique no corpo"); } função getLinkListen (event) {alert ("prevenir evento padrão"); 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, "clique", addbtnListen); eventUtil.addlistener (document.body, "clique", getbodylisten); eventUtil.addlistener (link, "clique", getLinkListen); } </script> </body> </html>O método acima pode resolver a questão da plataforma cruzada dos eventos. Em seguida, vamos dar uma olhada nas propriedades do Charcode.
Primeiro, defina um novo método para eventuil, formatevent, aceita um parâmetro, ou seja, o objeto de evento.
eventUtil.formatevent = function (event) {if (isie && iswin) --- Detecção de problemas do navegador {event.charcode = (event.type == "keypress")? Event.KeyCode: 0; Event.EventPhase = 2;-Indica a fase de borbulhamento, ou seja, suporta apenas o evento de retorno da fase de borbulha;}2. Sobre o alvo borbulhante e o CurrentTarget
O alvo está no estágio de destino do fluxo de eventos; O CurrentTarget está no estágio de captura, alvo e bolha do fluxo de eventos. Somente quando o fluxo de eventos está no estágio de destino, os dois ponteiros são os mesmos e, quando está nos estágios de captura e bolha, o alvo aponta para o objeto clicado e o CurrentTarget aponta para o pai do evento atual.
<div id = "Outer" style = "Background:#099"> <p> Eu sou o alvo div </p> ---- Clique nesta peça, saída: e.target.TagName: p || E.CurrentTarget.TagName: Div <P ID = "Inner" Style = "Background:#9C0"> Eu sou o alvo p </p> --- Clique nesta peça, saída: e.Target.TagName: P || E.CurrentTarget.TagName: Div <br> --- Clique nesta peça, saída: e.target.TagName: Div || E.CurrentTarget.TagName: Div </div> // Veja a segunda coluna de mudança: <div id = "Outer" style = "Background:#099"> <div> Eu sou o alvo div </div> ---- Clique nesta parte, saída: e.Target.Tagname: Div || E.CurrentTarget.TagName: Div <P ID = "Inner" Style = "Background:#9C0"> Eu sou o alvo p </p> --- Clique nesta peça, saída: e.Target.TagName: P || E.CurrentTarget.TagName: Div <br> --- Clique nesta peça, saída: e.target.TagName: Div || E.CurrentTarget.TagName: div </div>
function getObj (id) {return document.getElementById (id); } função addEvent (obj, evento, fn) {if (window.attachevent) {obj.attachevent ("no" + evento, fn); } else if (window.addeventListener) {obj.addeventListener (evento, fn, false); }} função teste (e) {alert ("e.target.tagname:" + e.target.tagname + "/n e.currentTarget.tagname:" + e.currentTarget.tagname); } var outer = getObj ("externo"); var interno = getObj ("interno"); // addEvent (interno, "clique", teste); addEvent (externo, "clique", teste);3. A diferença entre ie e dom
Domie
Obtenha o Event.Target Event.Srcelement
Obtenha o código de caracteres Event.CharCode Event.KeyCode
Bloqueie o evento de comportamento padrão.prevetDefault () event.returnValue = false
bubble event.stopPropagation () event.cancelbubble = true
Em relação ao bloqueio do comportamento padrão, por exemplo, quando o usuário clica com o botão direito do mouse, se você não deseja que o menu apareça, pode usar o bloqueio de comportamento padrão:
document.body.onContextMenu = function (event) {if (isie) {var oevent = window.event; oevent.returnValue = false; // também pode ser devolvido diretamente diretamente; prevenir o comportamento padrão} else {oevent.preventDefault (); }}4. Evento do mouse
<p> Use o mouse para clicar e clique duas vezes no quadrado vermelho </p> <div onMouseOverover = "handleEvent (event)" onMouseout = "handleEvent (event)" onMousedown = "handleEvent (event)" em/handleevent (event) "oClick =" "Event)" OnMouse = "PtleEvent (Event)" OCLICK = " id = "txt1" linhas = "5" cols = "45"> </sexttarea> </p> <!-Detecção de eventos do teclado-> <p> <input type = "text" id = "textbox" onkeydown = "handle (event)" onkeypress = "handle (event)" onkeyup = "handle (event)"> </pa> </pa> </pa> </pa> " cols = "45"> </sexttarea> </p>
O arquivo JS é o seguinte:
function handleEvent (event) {var otext = document.getElementById ('txt1'); otext.value+= "/n"+Event.type; otext.value+= "/n Target é"+(event.srcelement || event.target) .id; otext.value+= "/n em ("+event.clientx+","+event.clienty+") no cliente"; otext.value+= "/n botão para baixo é"+event.button; var Arrkeys = []; otext.value+= "/n RelatedTarget is"+event.RelatedTarget.TagName; //event.RelatedTarget.TagName pode determinar a fonte e a fonte do identificador da função do mouse} (event) {var otext2 = document.getElementById ('txt2'); otext2.value+= "/n"+event.type; var Arrkeys = []; if (event.shiftKey) {arrkeys.push ("shift");} if (event.ctrlkey) {arrkys.push ("ctrl");} if (event.altkey) {arrkys.push ("alt");} otext2.value+= "/n keydown is"+arrkys;}O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.