oninput、onpropertychange、onchange の使用法
onchange トリガー イベントは、次の 2 つの条件を満たす必要があります。
a) 現在のオブジェクトのプロパティが変更され、キーボードまたはマウス イベントによってトリガーされます (スクリプト トリガーは無効です)。
b) 現在のオブジェクトはフォーカスを失います (onblur)。
onpropertychange の場合、現在のオブジェクトのプロパティが変更される限り、イベントはトリガーされますが、これは IE に限定されます。
oninput は、onpropertychange の非 IE ブラウザ バージョンです。ただし、オブジェクトにバインドされている場合、オブジェクトのすべてのプロパティ変更がイベントをトリガーできるわけではありません。オブジェクトの値が変わりました。
バブリングイベントを停止する
if (e) //イベントバブリングを停止 e.stopPropagation();
それ以外の場合は window.event.cancelBubble = true;
上記のコードを実行して入力ボックスをクリックすると、値を入力するとこのイベントもトリガーされることがわかります。これは、プロパティの値が変更されている限り、このイベントがトリガーされることを示しています。
次に、この機能を発見したので、問題が発生します。入力ボックスの値が変更されたときに関数操作を実行したい場合、カスタム属性も変更する必要があるため、onpropertychange が 2 回トリガーされる可能性があります。私たちが望んでいることではありません。
このような属性が提供されているので、どの属性が変更されたのかを取得できるはずです。パラメータの数とその内容を取得してみます。
XML/HTMLコード
次のようにコードをコピーします。
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
アラート(引数.長さ);
for(var i=0;i<arguments.length;i++){
アラート(引数[i]);
}
});
-->
</script>
上記のコードを実行すると、1 と [object] がポップアップ表示されます。これは、イベントがコールバック関数に 1 つのパラメーターのみを渡し、そのパラメーターの型がオブジェクトであることを示しています。
次に、このオブジェクトを走査してみましょう。
XML/HTMLコード
次のようにコードをコピーします。
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(o の var item){
アラート(アイテム+":"+o[アイテム]);
}
});
//-->
</script>
実行すると属性がたくさんあることがわかりますが、よく見てみると、propertyname という属性が見つかるかもしれません。この属性の意味は誰でも推測できると思います。はい、これはどの属性が変更されたかを取得するために使用されます。
XML/HTMLコード
次のようにコードをコピーします。
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
アラート(o.propertyName);
});
//-->
</script>
テキスト ボックスをクリックして値をそれぞれ入力すると、myprop と value がそれぞれポップアップ表示されることがわかります。
最初の質問に戻りますが、必要なのは値が変更されたかどうかを判断することだけです。
コードを直接見てみましょう。
XML/HTMLコード
次のようにコードをコピーします。
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //値が変更されない限り、次の操作を実行しないでください。
//....関数処理
});
//-->
</script>