Uso de oninput, onpropertychange, onchange
O evento de gatilho onchange deve atender a duas condições:
a) As propriedades do objeto atual mudam e são acionadas por eventos de teclado ou mouse (o acionamento de script é inválido)
b) O objeto atual perde o foco (onblur);
No caso de onpropertychange, desde que as propriedades do objeto atual mudem, o evento será acionado, mas é exclusivo do IE;
oninput é a versão do navegador não-IE do onpropertychange. Ele suporta navegadores como Firefox e Opera, mas há uma diferença: quando está vinculado a um objeto, nem todas as alterações de propriedade do objeto podem acionar eventos. mudanças no valor do objeto.
Pare de borbulhar eventos
if (e) //Parar o borbulhamento do evento e.stopPropagation();
senão window.event.cancelBubble = true;
Execute o código acima e clique na caixa de entrada para descobrir que onpropertychange também será acionado. Inserir um valor também acionará este evento. Isso prova que enquanto o valor de uma propriedade for modificado, este evento será acionado.
Em segundo lugar, agora que descobrimos esse recurso, haverá um problema: às vezes, quando queremos executar uma operação de função quando o valor da caixa de entrada muda, também precisamos modificar um atributo personalizado, então onpropertychange será acionado duas vezes, isso pode não ser o que queremos.
Apenas adivinhe, uma vez que tal atributo é fornecido, você poderá obter qual atributo foi alterado. Tente obter o número de parâmetros e seu conteúdo.
Código XML/HTML
Copie o código do código da seguinte forma:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alerta(argumentos.comprimento);
for(var i=0;i<argumentos.comprimento;i++){
alerta(argumentos[i]);
}
});
-->
</script>
Executando o código acima, você verá que 1 e [object] aparecem, o que mostra que o evento passa apenas um parâmetro para a função de retorno de chamada e é do tipo object.
Então vamos tentar percorrer este objeto.
Código XML/HTML
Copie o código do código da seguinte forma:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(var item em o){
alerta(item+":"+o[item]);
}
});
//-->
</script>
Depois de executá-lo, descobrimos que existem muitos atributos, mas se olharmos com atenção, podemos encontrar tal atributo: nome da propriedade, acredito que todos podem adivinhar o significado deste atributo. Sim, isso é usado para saber qual atributo foi modificado.
Código XML/HTML
Copie o código do código da seguinte forma:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alerta(o.propertyName);
});
//-->
</script>
Clique na caixa de texto e insira um valor respectivamente, e você verá que myprop e value aparecem respectivamente.
Voltando à pergunta com a qual começamos, só precisamos determinar se o valor foi alterado.
Vejamos o código diretamente:
Código XML/HTML
Copie o código do código da seguinte forma:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="texto/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //Não execute as seguintes operações, a menos que o valor seja alterado;
//.....Processamento de função
});
//-->
</script>