javascript – IE-Kompatibilitätsproblem. Dynamisch generierte Knoten können nicht vom IE-Browser ausgelöst werden.

Question

Der Code ist sehr einfach. Er generiert dynamisch Eingabe-Tags, um zu erkennen, dass das Änderungsereignis nicht dieselbe Datei verarbeiten kann. Es funktioniert in Chrome und Firefox, aber das Drucken kann im IE-Browser 3 nicht ausgelöst werden. Hilfe! ! !

var button=document.getElementsByClassName('button')[0];
var imgBox=document.getElementsByClassName('imgBox')[0];
button.onclick=function(){
    inputImg();
}

function inputImg(){
    var input=document.createElement('input');
    input.type='file';
    input.addEventListener('change',function(e){
        console.log(3);
    });
    
    input.click();
}

Answer 1

ie下click()不能操作文档中没有的节点，所以你可以在click()前添加下面的语句

document.body.appendChild( input );
input.style.display = 'none';
input.click();

要想兼容ie9之前用attachEvent而不是addEventListener。
还有ie9之前不兼容getElementsByClassName

Answer 2

为什么 button 使用了 .onclick，后面的 input 却用了 .addEventListener 呢？

在 addEventListener 文档的 传统的 Internet Explorer 及其 attachEvent 方法 有说明：

对于 Internet Explorer 来说，在IE 9之前，你必须使用 attachEvent 而不是使用标准方法
addEventListener。

Answer 3

IE8及以下没有addEventListener方法 可用attachEvent()方法监听事件 要注意attachEvent回调中的this指向的是window哦

Answer 4

用下面这个来绑定事件

var addEvent = function(elem, type, handler){
    if(window.addEventListener){
        addEvent = function(elem, type, handler){
            elem.addEventListener(type, handler, false);
        };
    }else if(window.attachEvent){
        addEvent = function(elem, type, handler){
            elem.attachEvent('on' + type, handler);
        };
    }

    addEvent(elem, type, handler);
};

addEvent(input, "change", function(e){
    alert("changed");
});