Eventos no navegador existem todos na forma de objetos. Da mesma forma, também há uma diferença na obtenção de objetos de eventos entre o navegador do IE e os navegadores DOM padrão. No navegador do IE, o objeto de evento é um evento de atributo do objeto Windows. O método a seguir é geralmente usado para acessá -lo.
A cópia do código é a seguinte:
op.OnClick = function () {
var oevent = window.event;
}
Embora seja uma propriedade de objeto de janela, o objeto de evento só pode ser acessado quando o evento ocorre. Depois que todas as funções de manuseio de eventos são executadas, o objeto desaparece.
O DOM padrão estipula que os objetos do evento devem ser passados para as funções de processamento de eventos como parâmetros exclusivos. O acesso a objetos de eventos nos navegadores do Firefox é geralmente usado como parâmetros, e o código é o seguinte:
A cópia do código é a seguinte:
op.OnClick = function (oEvent) {
}
Portanto, para ser compatível com os dois navegadores, o seguinte método é geralmente usado
A cópia do código é a seguinte:
op.OnClick = function (oEvent) {
if (window.event) oevent = window.event;
}
Depois de obter o objeto de evento, o navegador pode lidar com vários eventos por meio de sua série de propriedades e métodos, como eventos de mouse, eventos de teclado e eventos do navegador. espere
Os seguintes listam propriedades e métodos comuns:
Pelo acima, podemos ver que os dois tipos de navegadores ainda têm algumas semelhanças. Por exemplo, o atributo de tipo é compatível com vários navegadores. Indica o tipo de evento e retorna valores como "clique" e "mousemove".
Isso é muito útil para lidar com vários tipos de eventos na mesma função.
Como segue: a mesma função lida com vários eventos.
A cópia do código é a seguinte:
<Script Language = "JavaScript">
identificador de função (oevent) {
var dis = document.getElementById ("display");
if (window.event) oevent = window.event; // lide com compatibilidade e obtenha o objeto
if (oevent.type == "clique")
disp.innerhtml += "Você clicou em mim!";
caso contrário, if (oevent.type == "mouseOver")
disp.innerhtml += "você se move para o meu";
}
window.onload = function () {
var op = document.getElementById ("caixa");
op.OnClick = Handle;
op.onMouseOver = Handle;
}
</script>
<div>
<div id = "caixa"> </div>
<P ID = "Display"> Clique em mim </p>
</div>
O código acima adiciona duas funções de resposta a eventos à div do id = "caixa", e esses dois eventos são a mesma função.
Nesta função, primeiro considere obter o objeto de evento compatível com o Evento e, em seguida, usando o disco de atributo Type para o nome do evento.
Ao detectar as três teclas de turno, alt e ctrl, os métodos usados pelos dois tipos de navegadores são exatamente os mesmos, ambos têm os três atributos de ShiftKey, Altkey e Ctrlkey.
O código é o seguinte:
A cópia do código é a seguinte:
var bshift = oevent.shiftKey;
var Balt = OEvent.altkey;
var bctrl = oEvent.ctrlkey;
Além disso, ao obter ponteiros de mouse, os métodos usados por ambos os tipos de navegadores são os mesmos, os quais incluem ClientX, Clienty, ScreenX e Screeny.
Entre eles, ClientX e Clienty representam a localização do mouse na área do cliente e não incluem a barra de status do navegador, a barra de menus, etc.
O código é o seguinte:
A cópia do código é a seguinte:
var iclientX = oEvent.ClientX;
var iClienty = oEvent.Clienty;
Screenx e Screeny se referem à posição do mouse em toda a tela do computador, e o código é
A cópia do código é a seguinte:
var iscreenx = oevent.screenx;
var iscreeny = oevent.screeny;
Muitas vezes, os desenvolvedores querem saber que o evento é desencadeado por esse objeto, ou seja, o alvo do evento.
Supondo que o elemento <p> aloce uma função de manipulador de eventos OnClick, <p> será considerada o destino quando o evento de cliques for acionado.
No navegador do IE, o alvo está contido na propriedade SRCELEMENT do objeto de evento, o código é o seguinte
A cópia do código é a seguinte: var otarget = oevent.srcelement;
No navegador DOM padrão, o alvo está incluído no atributo de destino, o código é o seguinte
A cópia do código é a seguinte: var otarget = oevent.target;
Obtenha o alvo do evento
A cópia do código é a seguinte:
<Script Language = "JavaScript">
identificador de função (oevent) {
var dis = document.getElementById ("display");
if (window.event) oevent = window.event; // lide com compatibilidade e obtenha o objeto
var otarget;
If (oevent.srcelement) // lide com compatibilidade e obtenha eventos
OTARGET = OEVENT.SRCELEMENT;
outro
OTARGET = OEVENT.TARGET;
disp.innerhtml + = "Nome do elemento:" + otarget.tagname + "<br>" + "Conteúdo do elemento:" + otarget.textContent + "<br>"
+ "Nó imediatamente seguindo:" + otarget.textContent + "<br>"
;
}
window.onload = function () {
var op = document.getElementById ("caixa");
op.OnClick = Handle;
}
</script>
<div>
<div id = "Box">
Conteúdo da caixa
</div>
<p id = "display"> </p>
</div>
(Suplemento) Propriedades do objeto elemento http://www.w3school.com.cn/xmldom/dom_element.asp
(Suplemento) Métodos do objeto elemento http://www.w3school.com.cn/xmldom/dom_element.asp
Como o alvo do evento é diferente em dois tipos de navegadores, o código deve garantir a compatibilidade. A prática usual é usar diretamente o objeto como a condição da instrução IF. O código é o seguinte
A cópia do código é a seguinte:
if (oevent.srcelement)
OTARGET = OEVENT.SRCELEMENT;
outro
OTARGET = OEVENT.TARGET;
Este método também é comumente usado em outras propriedades.