1. Eventos de burbujas
Hay dos tipos de modelos de eventos para navegadores: capturar eventos y eventos de burbujas. Dado que IE no admite eventos de captura, lo siguiente utiliza principalmente eventos de burbujas como explicación.
(Burbuja doblada) El tipo de burbuja se refiere al evento más específico para el evento menos específico activado uno por uno.
La copia del código es la siguiente:
<Body OnClick = "add ('Body <br>')">
<div onClick = "add ('div <br>')">
<ponclick = "add ('p <rr>')"> Haga clic en mí </p>
</div>
</body>
<div id = "visualización">
</div>
<script type = "text/javaScript">
función add (Stext) {
var uLo = document.getElementById ("display");
Ulo.innerhtml += Stext;
}
</script>
Las tres funciones anteriores han agregado la función OnClick. Se disparan las tres funciones después del elemento P independiente. El elemento P se ejecuta primero, luego se ejecuta el DIV y finalmente el cuerpo se ejecuta.
Aquí, aquí hay un recordatorio del evento de captura, y su orden es exactamente lo opuesto al evento de burbujas.
2. Monitoreo de eventos
Un evento requiere una función para responder. Este tipo de función generalmente se llama controlador de eventos. Desde otra perspectiva, estas funciones están escuchando en tiempo real si ocurre un evento, generalmente llamado oyente de eventos. La función de escucha de eventos es bastante diferente para los diferentes navegadores.
i. Método de escucha general, como usar el método OnClick, casi todas las etiquetas admiten este método. Y la compatibilidad del navegador es muy alta
Considerando el comportamiento, separación de eventos.
En general, monitorear utilizando los siguientes métodos
La copia del código es la siguiente:
<Body>
<div id = "me"> hacer clic </div>
<script type = "text/javaScript">
var opp = document.getElementById ("me"); // Evento encontrado
opp.OnClick = function () {// Establecer la función de evento
alerta ("¡Me hicieron clic!")
}
</script>
</body>
Ambos métodos introducidos anteriormente son muy convenientes y son amados por los desarrolladores de Everbright al hacer y manejar algunas funciones pequeñas. Pero para el mismo evento. Solo pueden agregar una función, como la función OnClick marcada por p. Ambos métodos solo pueden tener una función. Por lo tanto, IE tiene su propia solución, colegas y DOM estándar estipula otro método.
II. Método de monitoreo en IE
En el navegador de la mañana, cada elemento tiene dos métodos para manejar la escucha del tiempo.
son adjuntos () y DETACHENEVT () respectivamente.
Como puede ver en sus nombres de funciones, adjectEnVt () es una función utilizada para agregar el procesamiento de eventos a un elemento, mientras que el desachevent () se usa para eliminar la función de escucha en el elemento. Su sintaxis es la siguiente:
[objeto] .attachevent ("enevt_handler", "fnhandler");
[objeto] .detachevent ("enevt_handler", "fnhandler");
Entre ellos, enevt_handler representa OnClick, Onload, OnMouseOver, etc.
fnhandler es el nombre de la función del oyente.
En la sección anterior, puede usar el método AttachEvent () en lugar de agregar la función de escucha. Cuando hace clic en él, puede usar DETACHEVENT () para eliminar la función de escucha para que no se ejecute después del siguiente clic.
La copia del código es la siguiente:
<script type = "text/javaScript">
función fnClick () {
alerta ("¡Me hicieron clic!");
op.detachevent ("onclick", "fnclick");
}
var op;
window.onload = function () {
op = document.getElementById ("OOP"); // Encuentra el objeto
op.attachevent ("onclick", "fnclick"); // Agregar una función de oyente
}
</script>
<div>
<p id = "oop">
</p>
</div>
iii. Agregue múltiples eventos de escucha (es decir)
La copia del código es la siguiente:
<script language = "javaScript">
función fnClick1 () {
alerta ("FnClick1");
}
función fnClick2 () {
alerta ("FnClick2" me hizo clic;
//op.detachevent("OnClick",fnclick1); // Eliminar la función del oyente 1
}
var op;
window.onload = function () {
op = document.getElementById ("myp"); // Encuentra el objeto
op.attachevent ("onclick", fnclick1); // Agregar función del oyente 1
op.attachevent ("onclick", fnclick2); // Agregar la función del oyente 2
}
</script>
</ablo>
<Body>
<div>
<p id = "myp"> haga clic en mí </p>
</div>
3. Monitoreo de eventos DOM estándar
Con los dos métodos de IE, el DOM estándar también utiliza dos métodos para agregar y eliminar la función del oyente respectivamente. es decir, addEventListener () y RemoLEventListener ()
A diferencia de IE, estas dos funciones aceptan 3 parámetros, a saber, el nombre del evento, el nombre de la función que se asignará y si se usa para la etapa de burbujas o la etapa de captura. Los parámetros de la etapa de captura son verdaderos, y los parámetros de la etapa de burbuja son falsos. La sintaxis es la siguiente:
La copia del código es la siguiente:
[objeto] .adDeventListener ("event_name", fnhandler, bcapture);
[objeto] .RemoveEventListener ("Event_Name", fnhandler, bcapture);
Los métodos de uso de estas dos funciones son básicamente similares a IE, pero debe tener en cuenta que el nombre de Event_Name es "Haga clic", "Mouseover", etc., en lugar de "Onclick" y "OnMouseOver" en IE.
Además, el tercer parámetro bcapture generalmente se establece en falso, en la etapa burbujeante.
Método de escucha de eventos DOM estándar:
La copia del código es la siguiente:
<script language = "javaScript">
función fnClick1 () {
alerta ("Me hicieron clic 1");
op.RemoveEventListener ("Haga clic", fnclick1, falso);
}
función fnClick2 () {
alerta ("Me hicieron clic 2");
}
window.onload = function () {
op = document.getElementById ("myp");
op.addeventListener ("hacer clic", fnclick1, falso);
op.addeventListener ("hacer clic", fnclick2, falso);
}
</script>
<div>
<p id = "myp"> haga clic en mí </p>
</div>
Puede probar la orden de ejecución específica.
Lo anterior se trata de este artículo, espero que les guste.