开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法对'EventTarget‘执行'addEventListener’

无法对'EventTarget'执行'addEventListener'是因为'EventTarget'不是一个具有该方法的有效对象。'addEventListener'是用于在DOM元素上添加事件监听器的方法，而'EventTarget'是一个抽象接口，表示可以接收事件的对象。

在Web开发中，'EventTarget'是其他接口的基类，包括DOM中的元素节点、文档节点和窗口对象等。这些对象都可以通过'addEventListener'方法来注册事件监听器，以便在特定事件发生时执行相应的操作。

如果无法对'EventTarget'执行'addEventListener'，可能有以下几种可能的原因：

对象类型错误：确保操作的对象是一个有效的'EventTarget'对象。可以通过检查对象的类型或使用相关的方法来验证对象是否是'EventTarget'的实例。
对象不存在：确保操作的对象存在于DOM中。如果对象尚未被创建或已被移除，将无法对其执行'addEventListener'。
浏览器兼容性问题：某些旧版本的浏览器可能不支持'addEventListener'方法或不支持某些事件类型。在这种情况下，可以考虑使用其他方法或技术来实现相同的功能，例如使用'attachEvent'方法（适用于IE浏览器）或使用框架/库来处理事件。

总结起来，'无法对'EventTarget'执行'addEventListener''通常是由于操作对象类型错误、对象不存在或浏览器兼容性问题所致。在解决此问题时，需要仔细检查代码，并确保操作的对象是有效的'EventTarget'对象，并且在适用的情况下，考虑使用其他方法或技术来实现相同的功能。

相关搜索:无法对'IDBObjectStore‘执行'add’无法对‘DOMWindow’执行'postMessage‘：如何仅对正文执行addEventListener？启用addEventListener回调来执行put addEventListener在被单击前执行表单Id无法识别addEventListener 无法对DataFrame值执行计算 addEventListener -函数在被调用之前执行 TypeError:未能对“EventTarget”执行“dispatchEvent”：参数%1不是“Event”类型无法读取null的属性addEventListener 无法对‘RTCPeerConnection’执行'setRemoteDescription‘：无法转换为字典无法对google sheets数据执行函数 Javascript-无法对'MutationObserver‘执行'observe’Sequelize:无法对列UpdatedAt执行更新无法对粘贴式视图执行setColorFilter 无法对‘Element’执行'setAttribute‘：Angular 11 无法对材料RadioGroup执行.map操作算法无法对最终数组值执行 SwiftUI无法对图像执行PanGesture操作无法对Firestore数据执行setState操作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

解决 Script Error 的另类思路

'click', () => { throw new Error('Fail 3000'); }); public/at4000.js 同样的，创建一个在 4000 端口执行的脚本： const btn4k...但是，这个方案有两个致命的弱点：如果 JS 声明了 crossorigin="anonymous" 但是响应头没有正确，JS 会直接无法执行我们并不总是有静态服务器的配置权限，跨域头不是想加就能加...这个魔法 JS，其实也很简单： const originAddEventListener = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener...简单解释一下：改写了 EventTarget 的 addEventListener 方法；对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；浏览器不会对...实现这个效果，也很简单： (() => { const originAddEventListener = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener

3.3K49 1

事件

(): eventTarget.addEventListener(type, listener[, useCapture]) type: 事件类型字符串，如 click、mouseover 等，不带 on...把相同的方法抽出来后会发现，无法实现多个监听，就是因为两个方法变成完全一样了。...("click", fn) function fn() { console.log(1); } //结果：1 可以控制监听器的触发阶段（可选捕获或冒泡）对任何 DOM...注意： JS 代码只能执行捕获或者冒泡其中一个阶段 onclick 和 attachEvent 只能得到冒泡阶段 const btn = document.getElementById("btn");...eventTarget.onclick = function(event) {} eventTarget.addEventListener("click", function(event){}) 如上式所示

1.3K2 0

如何优雅处理前端异常？(史上最全前端异常处理方案)

; EventTarget.prototype.addEventListener = function (type, listener, options) { const wrappedListener...的 addEventListener 方法；对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；浏览器不会对 try-catch 起来的异常进行跨域拦截...，我们还可以达到「扩展堆栈」的效果： (() => { const originAddEventListener = EventTarget.prototype.addEventListener;...EventTarget.prototype.addEventListener = function (type, listener, options) { + // 捕获添加事件时的堆栈...originAddEventListener.call(this, type, wrappedListener, options); } })(); 十一、崩溃和卡顿卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行

3.4K1 0

详解JavaScript事件处理程序

，还会一直向上寻找所有父元素对应的事件处理程序并执行。...2、事件委托让父元素监听执行子元素的某个事件，原理：子元素没有注册事件处理程序，事件会冒泡向上寻找相应执行程序。...更多... video.onclick = function(e) { e.stopPropagation(); video.play(); }; 五、EventTarget EventTarget...1、EventTarget.addEventListener 功能：将回调函数和元素事件进行绑定，当事件发生时，回调函数会被执行。...("click", clickTest); 2、EventTarget.removeEventListener 删除用 EventTarget.addEventListener 注册的事件处理程序。

8530 0

前端开发，如何优雅处理前端异常？

五、window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...;EventTarget.prototype.addEventListener = function (type, listener, options) { const wrappedListener...的 addEventListener 方法；对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；浏览器不会对 try-catch 起来的异常进行跨域拦截...，我们还可以达到「扩展堆栈」的效果： (() => { const originAddEventListener = EventTarget.prototype.addEventListener;...originAddEventListener.call(this, type, wrappedListener, options); } })(); 十一、崩溃和卡顿卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行

9651 0

事件高级

() 它是一个方法  IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替  特点：同一个元素同一个事件可以注册多个监听器  按注册顺序依次执行 1.2 事件监听 addEventListener...()事件监听（IE9以后支持） eventTarget.addEventListener(type, listener[, useCapture]) eventTarget.addEventListener...()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。...eventTarget.onclick = function(event) { // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt } eventTarget.addEventListener

1.2K1 0

如何优雅处理前端异常？

; EventTarget.prototype.addEventListener = function (type, listener, options) { const wrappedListener...的 addEventListener 方法； 2、对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch； 3、浏览器不会对 try-catch 起来的异常进行跨域拦截...，我们还可以达到「扩展堆栈」的效果： (() => { const originAddEventListener = EventTarget.prototype.addEventListener;...EventTarget.prototype.addEventListener = function (type, listener, options) { + // 捕获添加事件时的堆栈 + const...originAddEventListener.call(this, type, wrappedListener, options); } })(); 十一、崩溃和卡顿卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行

2.1K3 0

如何优雅处理前端异常？

window.addEventListener 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。...的 addEventListener 方法；对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；浏览器不会对 try-catch 起来的异常进行跨域拦截...，我们还可以达到「扩展堆栈」的效果： (() => { const originAddEventListener = EventTarget.prototype.addEventListener;...EventTarget.prototype.addEventListener = function (type, listener, options) { + // 捕获添加事件时的堆栈...originAddEventListener.call(this, type, wrappedListener, options); } })(); 崩溃和卡顿卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行

1.7K2 0

中断操作：AbortController学习笔记

MDN上对它的介绍是 AbortController接口表示一个控制器对象，允许根据需要终止一个或多个Web请求。...希望支持终止功能的 API 可以接受 AbortSignal 对象，并基于其状态来确定执行流程。...答：signals和abortedFlags准确的说是WeakMap类型，而WeakMap跟Map会有所区别，WeakMap的键只能是对象的引用，当垃圾回收机制执行时，会检测WeakMap的键是否被引用...，若没有被引用，该键对会被删除，并自动回收，从而防止缓存雪崩的问题。...答：它本身并不具备事件处理能力，它继承了一个EventTarget类使其具备监听处理事件能力参考文章：一个可中断请求fetch的原理分析和应用 https://zhuanlan.zhihu.com/p/

8882 0

那些关于DOM的常见Hook封装（一）

本文是深入浅出 ahooks 源码系列文章的第十四篇，这个系列的目标主要有以下几点：加深对 React hooks 的理解。学习如何抽象自定义 hooks。...培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。上一篇我们探讨了 ahooks 对 DOM 类 Hooks 使用规范，以及源码中是如何去做处理的。...useEventListener 优雅的使用 addEventListener。...我们先来看看 addEventListener 的定义，以下来自 MDN 文档： EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时...，指定的回调函数就会被执行。

7042 0

【如果你要学JS 】——事件绑定及解除DOM事件流

()方法eventTarget.addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上，当该对象触发指定的事件时,就会执行事件处理函数.该方法接收三个参数:...mouseover , 这里不带on●listener :事件处理函数,事件发生时,会调用该监听函数●useCapture :可选参数,是一个布尔值,默认是false1.3attachEvent注册事件eventTarget.attachEvent...(eventNameWithon, callback)（仅支持i9以前的,但是现在ie已经没有了）eventTarget.attachEvent ()方法将指定的监听器注册到eventTarget (...目标对象)上，当该对象触发指定的事件时,指定的回调函数就会被执行。...('click', function () { alert('father') }, false); 注意：JS代码中只能执行捕获或者冒泡其中的一个阶段

1931 0

不用try catch，如何机智的捕获错误

Pause on exceptions无法在抛出错误的用户代码处暂停，因为error已经被React catch了。除非我们进一步开启Pause on caught exceptions。 ?...如何解决对用户来说，我写在componentDidMount中的代码明明未捕获错误，可是错误发生时Pause on exceptions却失效了，确实有些让人困惑。...根据EventTarget.dispatchEvent MDN[2]：不同于DOM节点触发的事件（比如click事件）回调是由event loop异步触发。...('error', handleWindowError); fakeNode.addEventListener(evtType, callCallback, false); event.initEvent...MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent [3] 这里: https://github.com

2.7K5 1

《现代Javascript高级教程》页面生命周期

bubbles：布尔值，指示事件是否会冒泡，默认为 false cancelable：布尔值，指示事件是否可以被取消，默认为 false target：事件的目标对象，即触发事件的元素 1.2 API EventTarget.addEventListener...bubbles：布尔值，指示事件是否会冒泡，默认为 false cancelable：布尔值，指示事件是否可以被取消，默认为 false target：事件的目标对象，即触发事件的元素 2.2 API EventTarget.addEventListener...常见的应用场景包括：执行一些需要页面完全加载后才能进行的操作初始化和配置第三方库和插件启动动画或其他视觉效果 2.4 示例代码 window.addEventListener('load',...bubbles：布尔值，指示事件是否会冒泡，默认为 false cancelable：布尔值，指示事件是否可以被取消，默认为 true target：事件的目标对象，即触发事件的元素 3.2 API EventTarget.addEventListener...bubbles：布尔值，指示事件是否会冒泡，默认为 false cancelable：布尔值，指示事件是否可以被取消，默认为 false target：事件的目标对象，即触发事件的元素 4.2 API EventTarget.addEventListener

2384 0

拖放实现--兼容手机与pc端原

("mousedown", handleEvent, false); document.addEventListener("mousemove", handleEvent...() { this.handlers = {} } EventTarget.prototype = { constructor: EventTarget,...this.handlers[type] = []; //console.log("hi") } //接着执行...console.log("isArray") var handlers = this.handlers[event.type]; //循环执行多个事件...首先，创建一个新的EventTarget 对象，然后添加enable()和disable()方法，最后返回这个对象。

1.2K2 0

事件高级

1.2 事件监听 addEventListener()事件监听（IE9以后支持） eventTarget . addEventListener (type, listener[, useCapture]...) eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...Js代码中只能执行捕获或者泡其中的一个阶段。 2. onclick和attachEvent 只能得到冒泡阶段。

1.5K4 1

不使用jquery只执行一次事件侦听器函数

当按下enter时,我将加载一组带有该项目的图像.代码工作正常,但在输入命中后,这段代码需要停止,所以我可以用箭头键做其他事情并输入.现在它只是在输入被击中后继续前进.我尝试使用var检查,但是我似乎无法从交换机内部更改变量...enterPushed){ document.addEventListener('keydown', function(event){ if(event.keyCode ==...', _ => console.log('once'), {once: true}); 资料来源: https ://developer.mozilla.org/en-US/docs/Web/API/EventTarget...,如下所示:document.body.addEventListener('click', _ => console.log('once'), {once: true}); 资料来源: https :/.../developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 浏览器兼容性: Chrome 55,Firefox 50,Safari

1821 0

【前端 · 面试】JavaScript 之你不一定会的基础题（一）

("child").addEventListener("click", function (e) { alert(`child 事件触发，` + e.target.id); }); 第三次再执行一套...只要对 JavaScript 基础知识掌握得较为牢固，那么这题就是送分题，轻松加愉快；可一旦对这一块的知识有盲点，那就成了送命题了，且行且珍惜。...而在浏览器中默认执行的是事件冒泡，即我们一般观察不到事件捕获阶段，比如 onclick 等事件。如果想要观察到事件的捕获阶段，那我们就需要借助 addEventListener 接口来实现。...listener 事件触发实际执行的匿名函数。 userCapture 可选，类型为 Boolean，意思是是否执行事件捕获阶段。...关于 listener 中的 this 和 target 当一个 EventListener 在 EventTarget 正在处理事件的时候被注册到 EventTarget 上，它不会被立即触发，

5551 0

JavaScript笔记(16)之事件高级

按注册顺序依次执行 eventTarget.addEventListener( type,listener[ , useCapture] ) eventTarget.addEventListener...(type,listener[, useCapture])方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数该方法接收三个参数 type:...传统注册方式 eventTarget.onclick = null; 方法监听注册方式 eventTarget.removeEventListener(type, listener[, useCapture...注意: JS代码中只能执行捕获或者冒泡其中的一个阶段 onclick和attachEvent只能得到冒泡阶段 addEventListener(type,listener[, useCapture])...现在我们放两个盒子: 所以后面的father和document都不会执行今天先学别的啦,明天继续学

4871 0

JavaScript高级技巧

("click", enhanchBind(handler.handleClick, handler, event, "函数柯里化")); 二、防篡改对象一旦把对象定义为防篡改，就无法撤销了。...三、高级定时器 JavaScript运行于单线程的环境中，而定时器仅仅只是计划代码在未来的某个时间执行。执行时机不能保证。定时器对队列的工作方式是，当特定时间过去后将代码插入。...注意，给队列添加代码并不意味着对它立即执行，而是能表示它会尽快执行。设定一个150ms后执行的定时器不代表了150ms代码就立刻执行，它表示代码会在150ms后被加入到队列中。...btn.addEventListener("click", function(){ // 300ms时间执行 setInterval(function(){ // 执行需要...为上述实例中对象 // 继承EventTarget，具有事件功能 var dragdrop = new EventTarget(),

1.1K5 1

js高级技巧_JavaScript高级程序

("click", enhanchBind(handler.handleClick, handler, event, "函数柯里化")); 二、防篡改对象一旦把对象定义为防篡改，就无法撤销了。...总结三、高级定时器 JavaScript运行于单线程的环境中，而定时器仅仅只是计划代码在未来的某个时间执行。执行时机不能保证。定时器对队列的工作方式是，当特定时间过去后将代码插入。...注意，给队列添加代码并不意味着对它立即执行，而是能表示它会尽快执行。设定一个150ms后执行的定时器不代表了150ms代码就立刻执行，它表示代码会在150ms后被加入到队列中。...btn.addEventListener("click", function(){ // 300ms时间执行 setInterval(function(){...为上述实例中对象 // 继承EventTarget，具有事件功能 var dragdrop = new EventTarget(), dragging = null, diffX = 0, diffY

4K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭