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

最新推荐文章于 2024-04-09 13:55:57 发布

原创最新推荐文章于 2024-04-09 13:55:57 发布 · 1.4w 阅读

1 ·

CC 4.0 BY-SA版权

ionic+angular4 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了JavaScript中常见的TypeError问题——无法读取属性'addEventListener'的情况及其原因，并提出了两种解决方案：一是对于Ionic应用，在ionViewDidEnter生命周期钩子中执行监听逻辑；二是针对原生JS，通过调整脚本位置、利用加载事件或jQuery库确保DOM加载完成后再执行监听代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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准备好后执行，所以这通常是附加所有其他事件处理程序的最佳位置...