javascript - IE onpropertychange 事件不会触发

Question

<a href="javascript:void(0)" id="select-handler">select</a>
<input type="file" id="real-file-input" style="display:none" />

$('#select-handler').click(function(){
    $('#real-file-input').click(); 
});

$('#real-file-input').bind('propertychange', function(){
    alert('changed');
});

奇怪的是，当我使用 .click() 时，propertychange 不会被触发。

Answer 1

实际上您的代码在 IE7 和 8 中对我来说工作正常，每当我更改 input type ='file' 的值时，都会触发警报。而它不适用于 >IE9 版本。

来自 paulbakaus's blog on propertychange on Internet Explorer 9

What’s wrong with propertychange on IE9?

1. IE9 doesn’t fire non-standard events when binding them through addEventListener. Every modern JS library that uses feature detection, including jQuery, will fail (see also: http://bugs.jquery.com/ticket/8485). “Not a biggie” you say, “simply use attachEvent directly” you say?

2. The good news: propertychange fires when using attachEvent. The bad news: It refuses to fire when modifying any CSS properties on the element that are unknown to the engine.. “Well this sucks,” you say, “but I read you can use DOMAttrModified on IE9!” you say?

3. DOMAttrModified features exactly the same behavior. It does not fire for unknown CSS properties. This is a complete disaster.

许多开发人员都面临着同样的怪异行为。

为什么要使用只有 Internet Explorer 支持的 onpropertychange？

我宁愿继续更改事件处理程序

$('#real-file-input').bind('change', function(){
    alert('changed');
});

或者如果它是 HTML5，则 input 事件处理程序。

$('#real-file-input').bind('input', function(){
    alert('changed');
});