ionic3+angular4中给DOM添加监听事件后报错：Uncaught (in promise): TypeError: Cannot read property 'addEventListen

Uncaught (in promise): TypeError: Cannot read property 'addEventListener' of null TypeError: Cannot read property 'addEventListener' of null at new MessagePage

原因：在页面还没有加载完成后这段监听的js代码已经执行，所以在执行这段代码的时候监听的DOM节点还没有加载创建，所以根本就找不到监听的元素。所以返回null。

解决方法：

等待页面完全加载完了再加载这段Js即可；

这个问题在ionic里面和原生js里面都会出现；

1.在ionic里面出现的解决方式为：

将这段js逻辑封装在ionViewDidEenter里面（不知道是什么的参照文章：http://blog.csdn.net/qq_34645412/article/details/76033045）

ionViewDidEnter() {
    var res = document.getElementById("bgpic");
    var ins = document.getElementById("IdCard");
    var resbg=document.getElementById("bgpicb");
    var insbg=document.getElementById("IdCardbg");
    if(typeof FileReader==="undefined"){
        res.innerHTML="很抱歉你的浏览器不支持FileReader";
        ins.setAttribute("disabled","disabled");
        resbg.innerHTML="很抱歉你的浏览器不支持FileReader"
        insbg.setAttribute("disabled","disabled")
    }else{
        ins.addEventListener('change',readerfile,false);
        insbg.addEventListener('change',readerfilebg,false);
    }
    function readerfile(){
        var file = this.files[0];
        console.log(file.size/1024);
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            console.log(res);
            res.setAttribute('src',this.result);
        }
    }
    function readerfilebg(){
        var file = this.files[0];
        console.log(file.size/1024);
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        var readerbg = new FileReader();
        readerbg.readAsDataURL(file);
        readerbg.onload = function (e) {
            console.log(resbg);
            var aa=this.result;
            console.log(aa);
            resbg.setAttribute('src',this.result);
        }
    }
}

2.在原生js中的解决方法：

     1.将脚本放在页面的底部。
     2.在加载事件中调用附加代码。
     3.使用jQuery库，它是DOM就绪事件。
什么是jQuery ready事件？
JavaScript提供了在页面呈现时执行代码的加载事件，但是直到所有资源（如图像）都被完全收到为止，才会触发该事件。 在大多数情况下，只要DOM层次结构完全构建，脚本就可以运行。 传递给.ready（）的处理程序保证在DOM准备好后执行，所以这通常是附加所有其他事件处理程序的最佳位置...