IE瀏覽器是全球最流行的瀏覽器之一,但其在一些Javascript事件上的支持度不高。在其中,IE瀏覽器對jQuery change事件的支持也存在問題。
在使用jQuery的時候,change事件是經(jīng)常用到的一個事件。change事件可以檢測表單元素的值是否發(fā)生改變,從而進(jìn)行相關(guān)的操作。但是,在IE瀏覽器中,change事件會出現(xiàn)一些不兼容的問題,特別是對于動態(tài)生成的元素和使用JavaScript動態(tài)改變元素的值時,IE瀏覽器的change事件表現(xiàn)得并不一致。
// 簡單的change事件代碼 $('input').change(function(){ console.log($(this).val()); });
上述代碼,在大多數(shù)瀏覽器中是可以正常使用的。但是在IE瀏覽器中,當(dāng)使用jQuery動態(tài)創(chuàng)建一個表單元素,或者改變一個表單元素的值時,change事件會失效。即使使用jQuery的trigger方法也無法觸發(fā)change事件。
// 動態(tài)生成表單元素并綁定change事件 $('').attr('id', 'testInput').appendTo('body').change(function(){ console.log($(this).val()); }); // 嘗試改變testInput元素的值 $('#testInput').val('test').change();
在大多數(shù)瀏覽器中,上述代碼會輸出"test",但是在IE瀏覽器中卻不會觸發(fā)change事件。為了解決這個問題,我們需要對IE瀏覽器中的change事件進(jìn)行特殊處理。下面是一段在IE瀏覽器中實現(xiàn)change事件的代碼。
// 在IE瀏覽器中實現(xiàn)change事件 $('input[type="text"], textarea').on('input propertychange', function(){ console.log($(this).val()); });
以上代碼使用了input和propertychange兩個事件來模擬change事件。當(dāng)一個表單元素的值發(fā)生改變時,會觸發(fā)input事件。而在IE瀏覽器中,當(dāng)一個表單元素的屬性發(fā)生改變時,會觸發(fā)propertychange事件。因此,使用這兩個事件可以在IE瀏覽器中實現(xiàn)change事件。