Lecturas relacionadas:
JavaScript Event Learning Resumen (V) Tipo de evento de ratón en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Resumen (I) Flujo de eventos
//www.vevb.com/article/86261.htm
JavaScript Event Learning Resumen (IV) Miembros públicos del evento (propiedades y métodos)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Summary (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript Event Learning Resumen (III) JS Event Object
1. Miembros públicos del objeto del evento
1. Miembros públicos del evento en DOM
El objeto de evento contiene propiedades y métodos relacionados con el evento específico que lo creó. Los tipos de eventos activados son diferentes, y las propiedades y métodos disponibles son diferentes. Sin embargo, todos los eventos en el DOM tienen los siguientes miembros públicos.
a. Comparación de CurrentTarget y Target
Dentro del controlador de eventos, el objeto esto siempre es igual al valor del CurrentTarget, y el objetivo solo contiene el objetivo real del evento.
Por ejemplo: hay un botón en la página, registre el evento de clic en el cuerpo (el nodo principal del botón). Cuando se hace clic en el botón, el evento de clics burbujea al cuerpo para su procesamiento.
<body> <input id = "btn" type = "button" valor = "clic"/> <script> document.body.onclick = function (event) {console.log ("Haga clic en el evento registrado en el cuerpo"); console.log ("this === Event.CurrentTarget?"+(this === Event.CurrentTarget)); // True Console.log ("CurrentTarget === Document.Body?"+(Event.CurrentTarget === Document.Body)); // true console.log ('event.target === document.getElementById ("btn")?'+(event.target === document.getElementById ("btn"))); // true} </script> </body>El resultado de la ejecución es:
b. A través del atributo de tipo, se pueden manejar múltiples eventos en una función.
Principio: Los diferentes eventos se manejan de manera diferente al detectar el atributo de tipo evento.
Por ejemplo: Defina una función de controlador para manejar 3 tipos de eventos: haga clic, Mouseover, MouseOut.
<body> <input id = "btn" type = "button" valor = "clic"/> <script> var handler = function (event) {switch (event.type) {case "haga clic": alerta ("haciendo clic"); romper; Caso "Mouseover": event.target.style.backgroundcolor = "Pink"; romper; caso "Mouseout": event.target.style.backgroundcolor = ""; }}; var btn = document.getElementById ("btn"); btn.Onclick = Handler; btn.onmouseover = Handler; btn.onmouseout = handler; </script> </body>Efecto de ejecución: haga clic en el botón y aparece el cuadro. Cuando el mouse pasa a través del botón, el color de fondo del botón se vuelve rosa; Cuando el mouse deja el botón, el color de fondo vuelve al valor predeterminado.
do. Comparación de stoppropagation () y stopimmediatepropagation ()
Lo mismo: StopPropagation () y StopimMediatePropagation () se pueden usar para cancelar una mayor captura o burbujeo de eventos.
Diferente: la diferencia entre los dos es que cuando un evento tiene múltiples manejadores de eventos, StopimMediatePropagation () puede evitar que el controlador de eventos se llame más tarde.
Por ejemplo:
<body> <input id = "btn" type = "button" valor = "clic"/> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("hacer clic", function (event) {console.log ("buttn haga clic escuchado una vez"); // event.stoppropagation (); // efecto de visualización de uncomment // event.stopimmediatePropagation (); // efecto de visualización de nomment}, falso); btn.addeventListener ("hacer clic", function () {console.log ("botón Click escuchado dos veces");}, falso); document.body.OnClick = function (event) {console.log ("cuerpo hizo clic"); } </script> </body>Efecto de ejecución:
D, Event Fase
El valor de la fase del evento es 1 en la fase de captura, 2 en la fase objetivo y 3 en la fase de burbuja.
ejemplo:
<body> <input id = "btn" type = "button" value = "haga clic"/> <script> var btn = document.getElementById ("btn"); btn.onclick = function (event) {console.log ("botón dom0-level-level addynler eventphase Value es?" +ventphase);} btn.addeventlistlister (event fase (events es? " console.log ("El método de nivel DOM2 del botón agrega el controlador de eventos, y el valor de EventPhase es"+event.eventPhase);}, true); btn.addeventListener ("click", function (event) {console.log ("Botton DOM2-Level-Level agrega Handler, y el valor de EventPhase es"+Event.eventPhase);}, False); document.body.addeventListener ("clic", function (event) {console.log ("Body agrega el controlador de eventos, y el valor de EventPhase es"+event.eventphase);}, true); document.body.addeventListener ("Click", Function (Event) {Console.log ("Body Body Agrega Event Handler y el Valor EventPhase es es el valor de EventPhase es "+event.eventPhase);}, falso); </script>Efecto de ejecución:
2. Miembros públicos del evento en IE
Las propiedades y métodos de eventos en IE variarán del tipo de evento a DOM, pero algunos son miembros públicos que todos los objetos tienen, y la mayoría de estos miembros tienen propiedades o métodos de DOM correspondientes.
Lo anterior es el conocimiento relevante de los miembros públicos (atributos y métodos) del evento que el editor le presentó (iv) y espero que sea útil para usted. Si tiene alguna pregunta, ¡déjame un mensaje!