Cannot read property 'addEventListener' of null

今天打开页面的时候遇到个问题,Cannot read property 'addEventListener' of null

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

解决方法:

1.等待页面完全加载完了再加载这段Js即可;

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

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

下面还有网上的一个解决方法,上边的方法不好用的话,可以试下下面这个方法

JS部分:

html部分:

把js部分的代码加在了如下代码框内。

拓展资料:

js,JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。

因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

null报错是由于无法读取null对象的addEventListener属性所致。在引用中的代码中,oEnterBtn对象被赋值为null,因此无法使用addEventListener方法。 要解决这个问题,可以检查oEnterBtn对象是否成功获取了元素。可以使用querySelector方法来查找元素,并且在找不到元素时添加错误处理。例如: ```javascript const oEnterBtn = doc.querySelector("#enter"); if (!oEnterBtn) { console.error("无法获取按钮元素"); return; } ``` 这样,在oEnterBtn为空时,会输出错误信息并退出函数,避免继续执行导致报错。 另外,在引用的代码中,也可以考虑使用事件委托的方式来绑定事件,以确保元素存在,例如给父元素绑定click事件,然后在事件处理函数中判断点击的目标元素是否为oEnterBtn。 ```javascript function bindEvent() { doc.addEventListener('click', handlerClick, false); } function handlerClick(event) { if (event.target === oEnterBtn) { // 处理点击事件 } } ``` 这种方式可以在元素不存在时避免报错,并且可以将事件绑定到父元素上,减少事件绑定的数量。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Uncaught TypeError: Cannot read propertyaddEventListener‘ of null 可能出现的问题](https://blog.csdn.net/yqx_123/article/details/118759694)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [解决removeEventListener 无法清除监听的问题](https://download.csdn.net/download/weixin_38693506/14752546)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值