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. Manejador de eventos
Como se mencionó anteriormente, los eventos son algunas acciones realizadas por el usuario o el navegador, como Click, Load y MouseOver son todos los nombres de los eventos. La función que responde a un evento determinado se llama controlador de eventos (también llamado controlador de eventos, controlador de eventos). El nombre del controlador de eventos comienza con "On", por lo que el controlador de eventos del evento de clics está en el cierre, y el controlador de eventos del evento de carga está en forma.
Hay tres formas principales de especificar manejadores de eventos para eventos.
1. Manejador de eventos HTML
En primer lugar, este enfoque está desactualizado. Porque las acciones (código JavaScript) y el contenido (código HTML) están estrechamente acoplados. Pero aún se puede usar al escribir una pequeña demostración.
Hay dos formas de hacer esto, las cuales son muy simples:
El primer tipo: Defina directamente el controlador de eventos y las acciones incluidas en el HTML.
La copia del código es la siguiente: <input type = "button" value = "haz clic en mí"/>
El segundo tipo: define el controlador de eventos en HTML, y las acciones ejecutadas llaman al script definido en otro lugar.
La copia del código es la siguiente: <input type = "Button" value = "Haga clic en mí"/> <script> Función showMessage () {alerta ("¡Haga clic en!");} </Script>
nota:
1) A través de la variable de evento, puede acceder directamente al evento en sí. Por ejemplo, onClick = "Alert (Event.Type)" aparecerá en el evento de clic.
2) Este valor es igual al elemento objetivo del evento, donde se ingresa el elemento de destino. Por ejemplo, onClick = "Alert (this.Value)" puede obtener el valor de valor del elemento de entrada.
2. Manejador de eventos de nivel DOM0
Este método es simple y cruzado, pero solo puede agregar un controlador de eventos a un elemento.
Debido a que este método agrega múltiples manejadores de eventos a los elementos, lo siguiente anulará el anterior.
Agregar controlador de eventos:
<input type = "button" value = "¡Haz clic en mí!" onClick = "showMessage ()"/> <script> function showMessage () {alerta ("¡Clicked!");} </script>Delete Event Handler:
La copia del código es la siguiente: mybtn.onclick = null;
3. Manejador de eventos de nivel DOM2
Los controladores de eventos de nivel DOM2 pueden agregar múltiples controladores de eventos a un elemento. Define dos métodos para agregar y eliminar controladores de eventos: AddEventListener () y RemoVentListener ().
Ambos métodos requieren 3 parámetros: nombre de evento, función de controlador de eventos y valor booleano.
Este valor booleano es verdadero, y el evento se procesa en la etapa de captura, falso, y el evento se procesa en la etapa de burbujas, que de valor predeterminada es falso.
Agregue el controlador de eventos: ahora agregue dos manejadores de eventos para el botón, uno aparece "Hola" y el otro sale "Mundo".
<input id = "mybtn" type = "button" value = "Haga clic en mí!"/> <script> var mybtn = document.getElementById ("mybtn"); mybtn.addeventListener ("hacer clic", function () {alert ("hola");}, falso); mybtn.addeventListener ("hacer clic", function () {alert ("mundo");}, falso); </script>Delete Event Handler: el controlador de eventos agregado a través de AddEventListener debe eliminarse a través de RemoVentListener, y los parámetros son consistentes.
Nota: La función anónima agregada a través de AddEventListener no se eliminará. ¡El siguiente código no funcionará!
La copia del código es la siguiente: mybtn.removeEventListener ("hacer clic", function () {alerta ("mundo");}, falso);
Parece que RemoLEventListener es consistente con el parámetro AddEventListener anterior, pero de hecho, la función anónima en el segundo parámetro es completamente diferente.
Entonces, para eliminar el controlador de eventos, el código se puede escribir así:
<input id = "mybtn" type = "button" value = "Haga clic en mí!"/> <script> var mybtn = document.getElementById ("mybtn"); var handler = function () {alert ("hola"); } mybtn.addeventListener ("hacer clic", manejador, falso); mybtn.removeEventListener ("Haga clic", Handler, False); </script>2. Es decir, manejador de eventos
1. Escenarios prácticos de aplicación
Los navegadores IE8 y debajo no admiten AdDEventListener. Si desea ser compatible con IE8 y debajo de los navegadores en el desarrollo real. Si usa eventos vinculantes nativos y necesita ser procesado compatible, puede usar JQuery Bind.
2. IE8 Evento vinculante
IE8 y los siguientes navegadores implementan dos métodos similares que en DOM: AttachEvent () y DETACHEVENT ().
Ambos métodos requieren dos parámetros: el nombre del controlador de eventos y la función del controlador de eventos.
nota:
¡IE11 solo admite AdDeventListener!
¡IE9 e IE10 adjuntan adjunta y addEventListener!
TE8 y debajo solo admite adjunta.
Puede usar el siguiente código para probarlo en varios navegadores de versión de IE.
<input id = "mybtn" type = "button" value = "Haga clic en mí!"/> <script> var mybtn = document.getElementById ("mybtn"); var handlerie = function () {alert ("helloie"); } var handlerDom = function () {alert ("hellodom"); } mybtn.addeventListener ("Haga clic", HandlerDom, False); mybtn.attachevent ("onclick", manejador); </script>Agregue el controlador de eventos: ahora agregue dos manejadores de eventos para el botón, uno aparece "Hola" y el otro aparece "Mundo"
<script> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("onClick", function () {alert ("hola");}); mybtn.attachevent ("onClick", function () {alert ("mundo");}); </script>Nota: Vale la pena señalar el efecto de operación:
"Mundo" aparece primero en navegadores debajo de IE8, y luego "Hola". El orden de activación del evento en DOM es opuesto.
IE9 y superior a los navegadores que primero aparecen "hola" y luego aparecen "mundo". El mismo orden que el evento que se activa en DOM.
Se puede ver que el navegador IE se está poniendo gradualmente en el camino correcto. . .
Delete Handler de eventos: el controlador de eventos agregado a través de AttackEvent debe eliminarse a través del método de despojo, y los parámetros son consistentes.
Al igual que el evento DOM, las funciones anónimas adicionales no se eliminarán.
Entonces, para eliminar el controlador de eventos, el código se puede escribir así:
<input id = "mybtn" type = "button" value = "Haga clic en mí!"/> <script> var mybtn = document.getElementById ("mybtn"); var handler = function () {alert ("hola"); } mybtn.attachevent ("onclick", manejador); mybtn.detachevent ("onclick", manejador); </script>Nota : Hay otro lugar al que prestar atención en el controlador de eventos IE: Alcance.
Usando el método adjuntevent (), el controlador de eventos se ejecuta en el alcance global, por lo que esto es igual a la ventana.
El alcance del método en el nivel DOM2 o DOM0 está dentro del elemento, y este valor es el elemento de destino.
El siguiente ejemplo aparecerá verdadero.
<input id = "mybtn" type = "button" value = "Haga clic en mí!"/> <script> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("onClick", function () {alert (this === Window);}); </script>Esto es algo a tener en cuenta al escribir código de navegador cruzado.
Detección de IE7/8:
// juzga la detección de compatibilidad IE7/8 var isie = !! window.activexObject; var isie6 = isie &&! window.xmlhttprequest; var isie8 = isie && !! document.documentMode; var isie7 = isie &&! isie6 &&! isie8; if (isie8 || isie7) {li.attachevent ("onClick", function () {_marker.openinfowindow (_iw);})} else {li.addeventListener ("click", function () {_marker.openinfowindow (_iw);})}Lo anterior es el conocimiento relevante del resumen de aprendizaje de eventos JavaScript (ii) del controlador de eventos JS que el editor le presentó. ¡Espero que sea útil para todos!