Los eventos en el navegador existen en forma de objetos. Del mismo modo, también hay una diferencia en la obtención de objetos de eventos entre el navegador IE y los navegadores DOM estándar. En el navegador IE, el objeto del evento es un evento de atributo del objeto Windows. El siguiente método generalmente se usa para acceder a él.
La copia del código es la siguiente:
op.Oncclick = function () {
var oevent = window.event;
}
Aunque es una propiedad del objeto de ventana, solo se puede acceder al objeto de evento cuando ocurre el evento. Después de que se ejecutan todas las funciones de manejo de eventos, el objeto desaparece.
El DOM estándar estipula que los objetos de eventos deben pasar a las funciones de procesamiento de eventos como parámetros únicos. Acceso a los objetos de eventos en los navegadores Firefox Una vez se usa generalmente como parámetros, y el código es el siguiente:
La copia del código es la siguiente:
op.OnClick = function (oevent) {
}
Por lo tanto, para ser compatible con ambos navegadores, el siguiente método generalmente se usa
La copia del código es la siguiente:
op.OnClick = function (oevent) {
if (window.event) oevent = window.event;
}
Después de obtener el objeto de evento, el navegador puede manejar varios eventos a través de su serie de propiedades y métodos, como eventos de mouse, eventos de teclado y eventos del navegador. esperar
Los siguientes enumeran propiedades y métodos comunes:
De lo anterior, podemos ver que los dos tipos de navegadores todavía tienen algunas similitudes. Por ejemplo, el atributo de tipo es compatible con varios navegadores. Indica el tipo de evento para recuperar y devolver valores como "Click" y "MouseMove".
Esto es muy útil para manejar múltiples tipos de eventos en la misma función.
De la siguiente manera: la misma función maneja múltiples eventos.
La copia del código es la siguiente:
<script language = "javaScript">
Function Handle (Oevent) {
var disp = document.getElementById ("display");
if (window.event) oevent = window.event; // manejar la compatibilidad y obtener el objeto
if (oevent.type == "hacer clic")
disp.innerhtml += "¡Hiciste clic en mí!";
else if (oevent.type == "mouseover")
disp.innerhtml += "te mueves a la mía";
}
window.onload = function () {
var op = document.getElementById ("Box");
OP.OnClick = Handle;
op.onmouseover = manejar;
}
</script>
<div>
<div id = "box"> </div>
<P id = "Pantalla"> Haga clic en mí </p>
</div>
El código anterior agrega dos funciones de respuesta al evento al DIV de ID = "Box", y estos dos eventos son la misma función.
En esta función, primero considere obtener el objeto de evento compatible y luego usar el disco de atributo de tipo al nombre del evento.
Al detectar las tres teclas de Shift, ALT y CTRL, los métodos utilizados por los dos tipos de navegadores son exactamente las mismas, ambos tienen los tres atributos de ShiftKey, AllKey y CtrlKey.
El código es el siguiente:
La copia del código es la siguiente:
var bshift = oevent.hiftkey;
var Balt = oevent.altkey;
var bctrl = oevent.ctrlkey;
Además, al obtener punteros de mouse, los métodos utilizados por ambos tipos de navegadores son los mismos, los cuales incluyen ClientX, Clienty, Screens y Screeny.
Entre ellos, ClientX y Clienty representan la ubicación del mouse en el área del cliente, y no incluyen la barra de estado del navegador, la barra de menú, etc.
El código es el siguiente:
La copia del código es la siguiente:
var iClientx = oevent.clientx;
var iClienty = oevent.clienty;
Screenx y Screeny se refieren a la posición del mouse en toda la pantalla de la computadora, y el código es
La copia del código es la siguiente:
var iscreenx = oevent.screenx;
var iscreeny = oevent.screeny;
Muchas veces, los desarrolladores quieren saber que el evento se desencadena por ese objeto, es decir, el objetivo del evento.
Suponiendo que el elemento <p> asigna una función de controlador de eventos OnClick, <p> se considerará el objetivo cuando se active el evento de clic.
En el navegador IE, el objetivo está contenido en la propiedad SrCelement del objeto de evento, el código es el siguiente
La copia del código es la siguiente: var oTarget = oevent.srcelement;
En el navegador DOM estándar, el objetivo se incluye en el atributo de destino, el código es el siguiente
La copia del código es la siguiente: var otarget = oevent.target;
Obtenga el objetivo del evento
La copia del código es la siguiente:
<script language = "javaScript">
Function Handle (Oevent) {
var disp = document.getElementById ("display");
if (window.event) oevent = window.event; // manejar la compatibilidad y obtener el objeto
var oTarget;
if (oevent.srcelement) // manejar la compatibilidad y obtener eventos
oTarget = oevent.SrCelement;
demás
oTarget = oevent.target;
disp.innerhtml + = "nombre de elemento:" + otarget.tagname + "<br>" + "contenido del elemento:" + otarget.textContent + "<br>"
+ "Nodo inmediatamente siguiente:" + otarget.textContent + "<br>"
;
}
window.onload = function () {
var op = document.getElementById ("Box");
op.OnClick = Handle;
}
</script>
<div>
<div id = "box">
Contenido de caja
</div>
<p id = "visualización"> </p>
</div>
(Suplemento) Propiedades del objeto de elemento http://www.w3school.com.cn/xmldom/dom_element.asp
(Suplemento) Métodos de objeto de elemento http://www.w3school.com.cn/xmldom/dom_element.asp
Dado que el objetivo del evento es diferente en dos tipos de navegadores, el código debe garantizar la compatibilidad. La práctica habitual es usar directamente el objeto como la condición de la instrucción if. El código es el siguiente
La copia del código es la siguiente:
if (oevent.srcelement)
oTarget = oevent.SrCelement;
demás
oTarget = oevent.target;
Este método también se usa comúnmente en otras propiedades.