JS 変更、プロパティ変更、入力イベント_JavaScript スキルに関する簡単な説明

https://github.com/mootools/mootools-core/issues/2170

この問題は、IE (LTE8) でのチェックボックスおよび無線変更イベントの実装に起因します。 )、チェックボックスまたはラジオをクリックしても、フォーカスを失わない限り、変更イベントはすぐにトリガーされません。ただし、他の標準ブラウザー (IE9 を含む) では、クリックした直後に変更イベントがトリガーされます。解決策に関しては、IE (LTE8) の要素固有の propertychange イベントを使用することで比較的簡単に解決できます (IE9 にはこの機能はありません)。 :

コードをコピー コードは次のとおりです:

checkEl.attachEvent(' onpropertychange', function() {
console.log('やあ、私は変わった')
});

しかし、解決したと考えるだけでは不十分です。なぜなら、checkEl.setAttribute('data-value', 'god') などのオペレーションも propertychange イベントをトリガーするため、次のように、event.propertyName を使用して判断する必要があるためです。 >

コードをコピーします コードは次のとおりです: checkEl.attachEvent('onpropertychange', function() {

if(window.event.propertyName == 'checked')

console.log('何とか何とか...')
});


これは問題ありません。このことから、選択を再度テストしたところ、変更イベントのパフォーマンスはさまざまなブラウザーで一貫しており、最初にフォーカスを失う必要はありませんでした。 input[type="text"] を再度テストしました。この変更イベントはフォーカスを失ったときにのみトリガーされます。そのため、何かが入力されるとすぐにトリガーしたい場合は、前の例を参照してください。 IE (LTE8) では、propertychange を使用してこれを実現できますが、propertyName の条件は「value」になります。他の標準ブラウザ (IE9 を含む) では、次のような HTML5 の標準イベント入力を使用できます。

コードをコピー コードは次のとおりです: inputEl.addEventListener('input', function(event) {

console.log('input event fired');

}, false) ;


このように、入力を行うたびにこのイベントがトリガーされます。この問題を説明する記事 (元のリンク) を参照してください。興味があれば読んでみてください。