Uso de oninput, onpropertychange, onchange
El evento desencadenante de cambio debe cumplir dos condiciones:
a) Las propiedades del objeto actual cambian y se activan mediante eventos de teclado o mouse (la activación del script no es válida)
b) El objeto actual pierde el foco (onblur);
En el caso de onpropertychange, siempre que las propiedades del objeto actual cambien, se activará el evento, pero es exclusivo de IE;
oninput es la versión de onpropertychange para navegadores que no son IE. Admite navegadores como Firefox y Opera, pero hay una diferencia cuando está vinculado a un objeto, no todos los cambios de propiedad del objeto pueden desencadenar eventos. El valor del objeto cambia. Funcionó.
Deja de difundir eventos
if (e) //Detener la difusión del evento e.stopPropagation();
más window.event.cancelBubble = true;
Ejecute el código anterior y haga clic en el cuadro de entrada para descubrir que también se activará onpropertychange. Ingresar un valor también activará este evento. Esto demuestra que siempre que se modifique el valor de una propiedad, este evento se activará.
En segundo lugar, ahora que hemos descubierto esta característica, habrá un problema: a veces, cuando queremos realizar una operación de función cuando cambia el valor del cuadro de entrada, también necesitamos modificar un atributo personalizado, por lo que onpropertychange se activará dos veces, esto Puede que no sea lo que queremos.
Simplemente adivine, dado que se proporciona dicho atributo, debería poder obtener qué atributo se cambió. Intente obtener la cantidad de parámetros y su contenido.
código XML/HTML
Copie el código de código de la siguiente manera:
<tipo de entrada="texto" valor="xxx" id="xx" onclick="this.myprop='xx'">
<tipo de script="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alerta(argumentos.longitud);
for(var i=0;i<argumentos.longitud;i++){
alerta(argumentos[i]);
}
});
-->
</script>
Al ejecutar el código anterior, encontrará que aparecen 1 y [objeto], lo que muestra que el evento solo pasa un parámetro a la función de devolución de llamada y es de tipo objeto.
Entonces intentemos atravesar este objeto.
código XML/HTML
Copie el código de código de la siguiente manera:
<tipo de entrada="texto" valor="xxx" id="xx" onclick="this.myprop='xx'">
<tipo de script="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(var elemento en o){
alerta(elemento+":"+o[elemento]);
}
});
//-->
</script>
Después de ejecutarlo, encontramos que hay muchos atributos, pero si miramos con atención, podemos encontrar uno de estos atributos: nombre de propiedad. Creo que todos pueden adivinar el significado de este atributo. Sí, esto se utiliza para obtener qué atributo se ha modificado.
código XML/HTML
Copie el código de código de la siguiente manera:
<tipo de entrada="texto" valor="xxx" id="xx" onclick="this.myprop='xx'">
<tipo de script="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alerta(o.nombredepropiedad);
});
//-->
</script>
Haga clic en el cuadro de texto e ingrese un valor respectivamente, y encontrará que myprop y value aparecen respectivamente.
Volviendo a la pregunta con la que empezamos, sólo necesitamos determinar si el valor ha sido cambiado.
Veamos el código directamente:
código XML/HTML
Copie el código de código de la siguiente manera:
<tipo de entrada="texto" valor="xxx" id="xx" onclick="this.myprop='xx'">
<tipo de script="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //No realice las siguientes operaciones a menos que el valor cambie.
//.....Procesamiento de funciones
});
//-->
</script>