首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取错误未捕获的函数: document.querySelectorAll(...).addEventListener不是一个TypeError

获取错误未捕获的函数: document.querySelectorAll(...).addEventListener不是一个TypeError。

这个错误是由于document.querySelectorAll(...)返回的结果不是一个有效的DOM元素集合,而是一个类似数组的NodeList对象。NodeList对象并没有addEventListener方法,因此调用该方法会导致TypeError。

解决这个问题的方法是,在调用addEventListener之前,先检查document.querySelectorAll(...)返回的结果是否有效。可以使用以下代码进行检查:

代码语言:txt
复制
const elements = document.querySelectorAll(...);
if (elements && elements.length > 0) {
  elements.forEach(element => {
    element.addEventListener('event', handler);
  });
}

在上述代码中,我们首先检查elements是否存在且长度大于0,然后使用forEach方法遍历每个元素,并为其添加事件监听器。

这样可以确保只有有效的DOM元素集合才会调用addEventListener方法,避免了TypeError错误的发生。

关于document.querySelectorAll的更多信息,可以参考腾讯云的文档:document.querySelectorAll() - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScrip最容易犯十大错误及其避免方法()

当您异步获取数据时,组件将在加载数据之前至少呈现一次 - 无论是在构造函数,componentWillMount还是componentDidMount中获取它。...例如,如果您在CDN上托管JavaScript代码,任何捕获错误(冒泡到window.onerror处理程序错误,而不是在try-catch中捕获)将被报告为“脚本错误”而不是包含有用错误 信息...这相当于Chrome中错误TypeError:’undefined’不是函数”。 是的,不同浏览器可以针对相同逻辑错误具有不同错误消息。...一种是当你调用一个不终止递归函数时。 您可以在Chrome开发者控制台中对此进行测试。 8....TypeError: Cannot read property ‘length’ 您通常会在数组中找到定义长度,但如果初始化数组或者在另一个上下文中隐藏变量名,则可能会遇到此错误

11610

10 种 JavaScript 最常见错误

当异步获取数据时,不管它是在构造函数 componentWillMount 还是 componentDidMount 中获取,组件在数据加载之前至少会呈现一次,当 Quiz 第一次呈现时, this.state.items...JavaScript 错误(通过 window.onerror 处理程序引发错误,而不是捕获在 try-catch 中)被浏览器跨域策略限制时,会产生这类脚本错误。...例如,如果您将您 JavaScript 代码托管在 CDN 上,则任何未被捕获错误将被报告为“脚本错误” 而不是包含有用堆栈信息。...您通常会在数组中找到定义长度,但是如果数组初始化或者变量在另一个上下文中,则可能会遇到此错误。让我们用下面的例子来理解这个错误。...如果在使用 event 时遇到此错误,请确保使用传入事件对象作为参数。像 IE 这样旧浏览器提供了一个全局变量事件,但并不是所有浏览器都支持。

8.5K20

关于 JavaScript 错误处理最完整指南(上半部)

创建,错误对象有三个属性: message:带有错误消息字符串 name:错误类型 stack:函数执行堆栈跟踪 例如,我们使用 TypeError 对象创建一个错误,对应 message 是创建传入字符号...; } return string.toUpperCase(); } 这里我们检查函数参数是否为字符串。如果不是,我们抛出一个异常。...; throw null; 但是,最好避免这些事情:始终抛出正确错误对象,而不是一些基本类型。 这样有助于在代码中,错误处理一致性。...异常就像一个上升电梯:一旦你抛出一个,它就会在程序堆栈中冒泡,除非它在某个地方被捕获。...如果异常未被捕获,也就是说,程序员不采取任何措施来捕获它,程序将崩溃。 何时何地捕获代码中异常取决于特定用例。 例如,我们可能想在堆栈中传递一个异常,以使程序完全崩溃。

1.6K30

1000多个项目中十大JavaScript错误以及如何避免

二是当通过异步方式获取数据时,无论是在构造函数中 componentWillMount 中,还是在构造函数中提取 componentDidMount,组件在数据加载之前至少会渲染一次。...(unknown): Script Error 当捕获 JavaScript 错误违背跨边界原则时,就会发生脚本错误。...例如,如果将 JavaScript 代码托管在 CDN 上,则任何未被捕获错误(通过 window.onerror 处理程序发出错误,而不是 try-catch 中捕获错误)将仅报告为“脚本错误...TypeError: ‘undefined’ Is Not a Function 当调用未定义函数时,Chrome 中就会发生这样错误。 ?...通常在数组中能够找到定义长度,但是如果数组初始化或变量名在另一个上下文中隐藏,则可能会出现这种错误。让我们用下面的例子来解释这种错误

8.2K40

社招前端必会面试题(附答案)

注意:all和race传入数组中如果有会抛出异常异步任务,那么只有最先抛出错误会被捕获,并且是被then第二个参数或者后面的catch捕获;但并不会影响数组中其它异步任务执行。...最后一个阶段是时间冒泡阶段,可以在这个阶段对事件做出响应。虽然捕获阶段在规范中规定不允许响应事件,但是实际上还是会执行,所以有两次机会获取到目标对象。<!...在这道题中,错误直接被then第二个参数捕获了,所以就不会被catch捕获了,输出结果为:error err!!!'...如果函数返回一个对象,那么new 这个函数调用返回这个函数返回对象,否则返回 new 创建新对象Promise.any描述:只要 promises 中有一个fulfilled,就返回第一个fulfilled...: fn2 is not a functionfn2这里也是在考察变量提升,关键在于第一个fn2(),这时fn2仍是一个undefined变量,所以会报错fn2不是一个函数

34130

JavaScript 错误处理大全【建议收藏】

TypeError URIError 请记住,所有这些错误类型都是实际构造函数,旨在返回一个错误对象。...(); } 在代码中我们检查函数参数是否为字符串,如果不是则抛出异常。...如果异常是捕获,也就是说程序员没有采取任何措施来捕获它,则程序将会崩溃。 你在什么时候及在什么地方捕获代码中异常取决于特定用例。 例如,你可能想要在栈中传播异常,使程序完全崩溃。...如果失败了,或者决定不去捕获它,则异常可以在栈中冒泡。 从本质上讲,这还不错,但是在不同环境下对捕获 rejection 反应不同。...异步生成器错误处理 JavaScript 中异步生成器(Async generators) 不是生产简单值,而是能够生成 Promise 生成器函数

6.3K50

一篇文章教你如何捕获前端错误

一般对页面的监控包含页面性能、页面错误以及用户行为路径获取上报等。 而本文将重点关注其中错误部分,主要介绍一下常见错误类型以及如何对它们进行捕获并上报。...3、未处理promise错误 使用catch捕获promise错误,往往都会存在比较大风险。而编码时有可能覆盖不够全面,因此有必要监控未处理promise错误并进行上报。...4、异步请求错误(fetch与xhr) 异步错误捕获分为两个部分:一个是传统XMLHttpRequest,另一个是使用fetch api。...,加载资源元素会触发一个Event接口error事件,并执行该元素上onerror()处理函数。...当网站请求并执行一个托管在第三方域名下脚本时,就可能遇到该错误。最常见情形是使用 CDN 托管 JS 资源。 其实这并不是一个 JavaScript Bug。

3.6K40

如何搭建前端异常监控系统

当 JavaScript 运行时错误(包括语法错误)发生时,window 会触发一个 ErrorEvent 接口 error 事件,并执行 window.onerror() 若该函数返回 true,...(如 或 )加载失败,加载资源元素会触发一个 Event 接口 error 事件,并执行该元素上 onerror() 处理函数。...这些 error 事件不会向上冒泡到 window,不过(至少在 Firefox 中)能被单一 window.addEventListener 捕获。...:', err, vm, info); } React React16,提供了一个内置函数 componentDidCatch ,使用它可以非常简单获取到 React 下错误信息。...: 事件处理程序 异步代码(例如 setTimeout 或 requestAnimationFrame 回调) 服务器端渲染 在错误边界本身(而不是其子级)中引发错误 iframe 由于浏览器设置

1.2K00

1000个项目中前10名JavaScript错误介绍

基本上,如果第二个错误只是第一个错误重复,我们会把两个错误分到同一组。这会给用户一个很好概括,而不是像在日志文件中看到那样直接一大堆让人感觉到十分压迫 dump。...(unknown): Script error 当捕获 JavaScript 错误(通过window.onerror处理程序引发错误,而不是捕获在try-catch中)被浏览器跨域策略限制时...例如,如果您将您 JavaScript 代码托管在 CDN 上,则任何未被捕获错误将被报告为“脚本错误” 而不是包含有用堆栈信息。...您通常会在数组中找到定义长度,但是如果数组初始化或者变量名称在另一个上下文中隐藏,则可能会遇到此错误。让我们用下面的例子来理解这个错误。...Uncaught TypeError: Cannot set property 当我们尝试访问一个未定义变量时,它总是返回 undefined,我们不能获取或设置任何未定义属性。

6.2K10

如何搭建前端异常监控系统

运行时错误(包括语法错误)发生时,window会触发一个ErrorEvent接口error事件,并执行window.onerror()。...或)加载失败,加载资源元素会触发一个Event接口error事件,并执行该元素上onerror()处理函数。...这些error事件不会向上冒泡到window,不过(至少在Firefox中)能被单一window.addEventListener捕获。...:', err, vm, info); } React React 16,提供了一个内置函数componentDidCatch,使用它可以非常简单获取到React下错误信息。...: 事件处理程序 异步代码(例如setTimeout或requestAnimationFrame回调) 服务器端渲染 在错误边界本身(而不是其子级)中引发错误 iframe 由于浏览器设置“同源策略

1.7K20

浅析前端异常及降级处理

,将引发该异常: image.png TypeError 传递给函数操作数或实参与该操作符或函数期望类型不兼容: image.png URIError 当全局URI处理函数错误方式使用时:...特定错误信息,比如错误所在生命周期钩子 // 只在 2.2.0+ 可用 } 复制代码 指定组件渲染和观察期间捕获错误处理函数。...这个处理函数被调用时,可获取错误信息和 Vue 实例。 从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里错误。...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise 链错误也会被处理。 以上引用自Vue 官网。...if (error.message.indexOf('TypeError')) { alert('这是一个TypeError错误,请通知开发人员');

1.4K10

10 种最常见 Javascript 错误

基本上,如果第二个错误只是第一个错误重复,我们会把两个错误分到同一组。这会给用户一个很好概括,而不是像在日志文件中看到那样直接一大堆让人感觉到十分压迫 dump。...(unknown): Script error 当捕获 JavaScript 错误(通过window.onerror处理程序引发错误,而不是捕获在try-catch中)被浏览器跨域策略限制时,会产生这类脚本错误...例如,如果您将您 JavaScript 代码托管在 CDN 上,则任何未被捕获错误将被报告为“脚本错误” 而不是包含有用堆栈信息。...您通常会在数组中找到定义长度,但是如果数组初始化或者变量名称在另一个上下文中隐藏,则可能会遇到此错误。让我们用下面的例子来理解这个错误。...Uncaught TypeError: Cannot set property 当我们尝试访问一个未定义变量时,它总是返回 undefined,我们不能获取或设置任何未定义属性。

6.8K80

一篇文章教你如何捕获前端错误

e.g: 下图是图片资源不存在时上报数据: 3、未处理promise错误 使用catch捕获promise错误,往往都会存在比较大风险。...e.g: 下图是promise请求接口发生错误后,未进行catch时上报数据: 4、异步请求错误(fetch与xhr) 异步错误捕获分为两个部分:一个是传统XMLHttpRequest,另一个是使用...使用true或false都可以,默认为false 2、资源加载错误使用addEventListener去监听error事件捕获 实现原理:当一项资源(如或)加载失败,加载资源元素会触发一个...Event接口error事件,并执行该元素上onerror()处理函数。...当网站请求并执行一个托管在第三方域名下脚本时,就可能遇到该错误。最常见情形是使用 CDN 托管 JS 资源。 其实这并不是一个 JavaScript Bug。

3.2K90

1000多个项目中十大JavaScript错误以及如何避免

二是当通过异步方式获取数据时,无论是在构造函数中 componentWillMount 中,还是在构造函数中提取 componentDidMount,组件在数据加载之前至少会渲染一次。...Type your name" /> (unknown): Script Error 当捕获...例如,如果将 JavaScript 代码托管在 CDN 上,则任何未被捕获错误(通过 window.onerror 处理程序发出错误,而不是 try-catch 中捕获错误)将仅报告为“脚本错误...Rollbar.isAwesome(); TypeError: ‘undefined’ Is Not a Function 当调用未定义函数时,Chrome 中就会发生这样错误。...[image.png] 通常在数组中能够找到定义长度,但是如果数组初始化或变量名在另一个上下文中隐藏,则可能会出现这种错误。让我们用下面的例子来解释这种错误

6.2K30

【Web技术】剖析前端异常及降级处理

,将引发该异常: image.png TypeError 传递给函数操作数或实参与该操作符或函数期望类型不兼容: image.png URIError 当全局URI处理函数错误方式使用时:...特定错误信息,比如错误所在生命周期钩子 // 只在 2.2.0+ 可用 } 复制代码 指定组件渲染和观察期间捕获错误处理函数。...这个处理函数被调用时,可获取错误信息和 Vue 实例。 从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里错误。...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise 链错误也会被处理。 以上引用自Vue 官网。...if (error.message.indexOf('TypeError')) { alert('这是一个TypeError错误,请通知开发人员');

1.3K10

JavaScript错误处理完全指南

; 创建后,错误对象将显示三个属性: message:包含错误消息字符串 name:错误类型 stack:函数执行堆栈跟踪 例如,如果我们创建一个 TypeError 对象,带有适当消息,该...SyntaxError TypeError URIError 请记住,所有这些错误类型都是 实际构造函数,旨在返回一个错误对象。...; throw null; 但最好避免这些事情,始终抛出正确错误对象,而不是基元。这样,你就可以在代码库中保持错误处理一致性。...如果这个异常 捕获,即程序员没有采取任何措施来捕获它,则程序将崩溃。 在何时何地捕获代码中异常取决于具体用例。 例如,你可能想在堆栈中传播一个异常,以使程序完全崩溃。...如果我们失败了,或者决定不在这里捕获它,那么 异常就可以在堆栈中冒泡了。这本身并不坏,但是不同环境对捕获拒绝反应是不同

4.8K20

js底层原理,助你更好完成技术上提升

实现一个call函数 // 思路:将要改变this指向方法挂到目标this上执行并返回 Function.prototype.mycall = function (context) { if (typeof...实现一个apply函数 // 思路:将要改变this指向方法挂到目标this上执行并返回 Function.prototype.myapply = function (context) { if...实现一个bind函数 // 思路:类似call,但返回函数 Function.prototype.mybind = function (context) { if (typeof this !...实现一个基本Promise // 添加异步处理等其他边界情况 // ①自动执行函数,②三个状态,③then class Promise { constructor (fn) { // 三个状态...实现一个防抖函数 // 思路:在规定时间内触发第二次,则执行 function debounce (fn, delay) { // 利用闭包保存定时器 let timer = null return

65910
领券