Tres elementos de activación de eventos: ¿por quién? ¿Por qué disparador? ¿Qué se debe hacer después del disparador?
Cómo escribir el evento:
estándar w3c: el evento se escribe en la línea, pero debido a que la estructura y el comportamiento deben estar separados, generalmente usamos JavaScript para vincular el evento. Solo en casos excepcionales se escribirá el evento en la línea.
Método de enlace de eventos:
El nodo (objeto) en browser.on + event handle = function () {
Que hacer (Colocado en el navegador, no ejecutado, y ejecutado cuando ocurre el evento).
}
例 ： oDiv.onclick = function () {alert （1）}
Resumen del evento:
El evento es definir una función de preprocesamiento para el navegador. Cuando se activa el evento, se ejecuta la función. Este es el evento.
Tipo de evento:
Escriba siempre que escriba eventos
Eventos del mouse:
1. Haga clic en evento
oDiv.onclick = función））
2. Haga doble clic en evento
oDiv.ondbclick = función））
3. Evento del botón derecho del mouse (menú contextual)
oDiv.oncontextmenu = función （） {
// contexto contexto
// menu menu}
4. Evento de mouse down
oDiv.onmousedowm = función （） {
console.log ('prensa')}
5. Evento del mouse up
oDiv.onmouseup = función （） {
console.log ('ascensor')}
6.1 Ratón en
oDiv.onmouseover = función （） {
console.log ('Pasar el mouse')}
6.2 El mouse se movió hacia adentro, pero no se disparará cuando cruce el elemento secundario
oDiv.onmouseenter = función）） {
console.log ('Ratón para entrar')}
7.1 Ratón fuera
oDiv.onmouseout = función）） {
console.log ('Mouse out')}
7.2 El mouse se mueve hacia afuera, pero no se disparará cuando cruce el elemento hijo
oDiv.onmouseleave = función）） {
console.log ('Salir del permiso')}
8. Evento de movimiento del mouse
oDiv.onmousemove = función （） {
console.log ('mobile')}
Eventos de teclado:
var oInput = document.querySelector ( 'input')
1. Presione el teclado
oInput.onKeydown = function （） {
console.log ('prensa')}
2. El teclado está elevado
oInput.onKeyup = function （） {
console.log ('ascensor')}
3. Tocando el teclado
oInput.onKeypress = function （） {
console.log ('golpe de teclado')}
Este evento de presión se activará incluso si el teclado se mantiene presionado sin levantar
Eventos de forma:
En selección única, selección múltiple, el menú desplegable para enlazar estos elementos generalmente usa cambio
Ejemplo:
Obtener evento de enfoque: enfoque
oText.onfocus = function () {console.log ('get the focus')}
Evento de foco perdido: onblur
oText.onblur = function () {console.log ('foco perdido')
// Obtenga el contenido del cuadro de texto utilizando el atributo de valor
console.log （this.value）}
Evento de envío de formulario: escriba en toda la capa externa del formulario
： ： Varo Form = document.querySelector （'# form'）
oForm.onsubmit = function （） {
// Realice algún procesamiento antes de enviar el formulario
// Por ejemplo, si el cuadro de texto no tiene contenido, no se enviará
if （oText.value === ''） {
// No permitir el envío del formulario, devolver falso puede evitar
falso retorno}
console.log ('Enviar')}
evento evento
Cuando se activa el evento, recibirá un mensaje (objeto de evento), que contiene la encapsulación de algunas propiedades y métodos relacionados con el evento (como: el elemento del evento, el estado de la tecla del teclado, la posición del mouse, el estado del botón del mouse, etc.) , Solo cuando se desencadena el evento.
oDiv.onmousedown = función (e) {
alerta （e）;}
JS falta de ley de la virtud: hay un problema de compatibilidad de objetos de evento;
Entonces, hagámoslo compatible antes de usar el objeto de evento:
Si e es válido, entonces es e, no válido es igual a window.event
e = e || window.event;
alert (e.buttons) observa el valor de retorno de .buttons;
Eventos y métodos del mouse;
| Nombre del atributo |
Significado |
| e.botones |
Vuelva al botón de clic del mouse (1 botón izquierdo, 2 botón derecho, 4 rueda de desplazamiento del botón central) |
| e.offsetX / offsetY |
Obtenga las coordenadas del cuadro (origen del evento) que activó el evento Las coordenadas del borde del elemento con el clic más pequeño. |
| e.clientX / clientY |
Obtenga las coordenadas del área visible (de acuerdo con el posicionamiento del navegador) Independientemente de la ubicación, se fija al borde del área de visualización del navegador |
| e.screenX / screenY |
Obtenga las coordenadas de toda la pantalla No importa cuán grande sea el navegador, obtiene las coordenadas de todo el borde de la pantalla |
| e.pageX / e.pageY |
Obtener coordenadas del documento (incluida la barra de desplazamiento) |
Obtener el código de la tecla del teclado
Cada tecla del teclado tiene un código único para identificar qué tecla del teclado está operando actualmente el usuario
Tiene problemas de compatibilidad
e.keyCode || e.que
Código de tecla especial: si presionar alt ctrl y shift
e.altKey
e.ctrlKey
e.shiftKey
El valor de retorno es un valor booleano;
Se puede usar para juzgar combinaciones de teclas
if （e.keyCode == 13 && e.altKey） {
alerta ('Enter y alt fueron presionados al mismo tiempo))}
Comportamiento predeterminado (navegador)
Hay algunos comportamientos predeterminados de los elementos html, como una etiqueta, hay una acción de salto después de hacer clic; la entrada del tipo de envío en el formulario del formulario tiene un evento de salto de envío predeterminado; la entrada del tipo de reinicio tiene el comportamiento del formulario de reinicio. Sin embargo, a veces no necesitamos el evento predeterminado, por lo que debemos evitar el evento predeterminado
falso retorno;
Redacción compatible para evitar el comportamiento predeterminado, solo los eventos con comportamiento predeterminado deben escribir esto
En diferentes incidentes, se bloquean diferentes acciones, a saber:
if (e.preventDefault) {
e.preventDefault ();
} más {
window.event.returnValue = false;
//falso retorno;}
Centrarse en los errores:
No se puede leer la lista de clases de indefinido
TypeError no capturado: no se puede leer la propiedad 'classList' de undefined