Hoy en día para compartir con ustedes forman eventos serie JS.
1 tipo de eventos de formulario
1.1 evento de entrada
evento de entrada se activa cuando el valor ,, cambia. Para casillas de verificación () o el botón de radio () cuando el usuario cambia la selección, puede desencadenar este evento. Además, el elemento de propiedad contenteditable abierta, siempre y cuando el valor cambia, el evento se disparará entrada.
Una característica de los eventos de entrada es continuamente desencadenantes, como el usuario cada vez que se pulsa el botón, se disparará un evento de entrada.
evento de entrada objeto hereda interfaz InputEvent.
El evento es similar, excepto que con el evento de entrada de evento de cambio se produce inmediatamente después de que el valor del elemento de cambio, y el cambio se produce cuando el elemento pierde el foco, y el contenido en este momento puede haber cambiado varias veces. Es decir, si hay un cambio continuo, eventos de entrada se desencadenan múltiples activa el evento de cambio veces sólo una vez cuando se pierde el foco.
Los siguientes son ejemplos <SELECT> elemento.
/* HTML 代码如下
<select id="mySelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
*/
function inputHandler(e) {
console.log(e.target.value)
}
var mySelect = document.querySelector('#mySelect');
mySelect.addEventListener('input', inputHandler);
El código de seguridad cuando se cambia la opción de caja desplegable, el evento se disparará entrada para realizar la inputHandler función de devolución de llamada.
1.2 evento select
seleccione incendios de evento cuando el <input>, <textarea> dentro del texto seleccionado.
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
console.log(e.type); // "select"
}, false);
Seleccionado texto puede selectionDirection, selectionEnd, selectionStart y el valor de los atributos event.target elemento de conseguir.
evento de cambio de 1,3
evento de cambio se activa cuando el valor ,, cambia. Es la diferencia más grande con el evento desencadenante de entrada no es continua sólo cuando todos los cambios son completos desencadenará otra parte, los eventos de entrada deben estar acompañados por un evento de cambio. En concreto, dividido en las siguientes situaciones.
casilla de verificación cuando se activa el gatillo (radio) o casillas de verificación (casilla de verificación).
Se activa cuando el usuario somete. Por ejemplo, de la siguiente lista (seleccionar) la selección, la selección de fecha de finalización o archivo cuadro de entrada.
Cuando el valor del elemento desencadenante de un cuadro de texto o cambiado, y pérdida de concentración.
He aquí un ejemplo.
// HTML 代码如下
// <select size="1" οnchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>
function changeEventHandler(event) {
console.log(event.target.value);
}
Si los eventos de entrada y comparador de ejemplo, se encuentran los elementos para que, de entrada y eventos de cambio es básicamente equivalente.
1.4 evento no válido
cuando el usuario envía el formulario, si el valor del elemento de formulario no cumple con la condición de comprobación puede desencadenar el evento válido.
<form>
<input type="text" required oninvalid="console.log('invalid input')" />
<button type="submit">提交</button>
</form>
El código de seguridad, se requiere la trama de entrada. Si usted no llena, cuando el usuario hace clic en el botón de envío, será evento cuadro de entrada no válida disparar, lo que lleva a que presentaran sido cancelada.
1,5 evento de restauración, presentar el caso
de que ambos eventos se llevaron a cabo en el objeto de formulario, en vez de ocurrir en los miembros de la forma.
evento de reset se activa cuando la forma se pone a cero (todos los miembros forman de nuevo al valor predeterminado).
presentar activa el evento cuando los datos de formulario se envía al servidor. Tenga en cuenta que la ocurrencia del evento es el elemento objeto presentar, no el elemento, ya que se envía el formulario, en lugar del botón.
2 Interface InputEvent
interfaz InputEvent se utiliza principalmente para describir ejemplos de eventos de entrada. La interfaz se extiende la interfaz de eventos, también define una serie de ejemplos de sus propiedades y métodos de instancia.
navegador nativo proporciona el constructor InputEvent (), para generar una instancia de objeto.
new InputEvent(type, options)
InputEvent constructor puede aceptar dos parámetros. El primer parámetro es una cadena que representa el nombre del evento, este parámetro es necesario. El segundo parámetro es una instancia de objeto de configuración para configurar las propiedades del evento, el parámetro es opcional. Además de configurar el atributo de objeto de configuración de campos constructor de eventos puede establecer los siguientes campos que son opcionales.
inputType: cadena que representa el tipo (ver abajo) se cambia.
datos: cadena que representa la cadena insertada. Si no hay una cadena de caracteres (tales como Borrar) insertada, se devuelve null o cadena vacía.
dataTransfer: Devuelve una instancia de objeto dataTransfer, que por lo general sólo acepta cuadro de entrada de texto enriquecido atributo válido en la entrada.
ejemplo InputEvent atributos de sólo lectura principalmente por encima de tres atributos, son tres ejemplos de atributos.
(. 1) InputEvent.data
propiedad InputEvent.data devuelve una cadena que representa los cambios de contenido.
// HTML 代码如下
// <input type="text" id="myInput">
var input = document.getElementById('myInput');
input.addEventListener('input', myFunction, false);
function myFunction(e) {
console.log(e.data);
}
En el código anterior, si la entrada manual en el cuadro de entrada que abc, salida de la consola a una, entonces la siguiente línea de salida B, y entonces la salida de la línea siguiente c. A continuación, seleccione abc, eliminarlos a la vez, la salida de la consola voluntad un nulo o cadena vacía.
(2) InputEvent.inputType
propiedad InputEvent.inputType devuelve una cadena que representa el tipo de cadenas de cambio que se produce.
Para el caso común, el navegador Chrome, el valor de retorno es el siguiente. Para obtener una lista completa se puede consultar la documentación.
Manualmente inserción de texto: insertText
Pegar para insertar el texto: insertFromPaste
borrar hacia atrás: deleteContentBackward
borrar hacia adelante: deleteContentForward
(. 3) InputEvent.dataTransfer
propiedad InputEvent.dataTransfer devuelve una instancia de DataTransfer. Esta propiedad (insertFromPaste) o arrastrando el contenido (insertFromDrop) acepta sólo es válido cuando se pega en el cuadro de texto.
Acerca de la serie JS de eventos - eventos de formulario, se aprende cuánto? Los comentarios son bienvenidos en el área de comentarios!
