无法对'EventTarget‘执行'addEventListener’ - 腾讯云开发者社区

文章/答案/技术大牛

发布

解决 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.5K49 2

事件

(): 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.8K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

详解JavaScript事件处理程序

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

1.3K0 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 可能无法及时执行

4.8K1 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.6K3 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 可能无法及时执行

2.1K2 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 可能无法及时执行

1.4K1 0

【JavaScript】JavaScript开篇基础（5）

如果你对我的内容感兴趣，记得关注我以便不错过每一篇精彩。当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正️️。让我们共同努力，一起进步！加油，一起CHIN UP！ 2....() 特点：同一个元素同一个事件可以注册多个监听器（监听处理函数function），按注册顺序依次执行 eventTarget.addEventListener(type, listener, useCapture...) 将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数，涉及到的参数为： type：事件类型为字符串，比如’click’、‘mouseover’，注意这里不要带...DOM 事件流分为3个阶段：捕获阶段当前目标阶段冒泡阶段（更常用） JS代码中只能执行捕获或者冒泡其中的一个阶段，并且要执行冒泡或者捕获阶段必需用方法监听注册方式注册事件才能执行，且由它控制...5.事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event

3731 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.7K1 0

中断操作：AbortController学习笔记

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

1.2K2 0

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

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

1K2 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代码中只能执行捕获或者冒泡其中的一个阶段

1.4K1 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

3.5K5 1

拖放实现--兼容手机与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.6K2 0

《现代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

6464 0

事件高级

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

2.1K4 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

9431 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都不会执行今天先学别的啦,明天继续学

6841 0

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

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

6951 0

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

4.3K2 1

点击加载更多

解决 Script Error 的另类思路

事件

详解JavaScript事件处理程序

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

如何优雅处理前端异常？

如何优雅处理前端异常？

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

【JavaScript】JavaScript开篇基础（5）

事件高级

中断操作：AbortController学习笔记

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

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

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

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

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

事件高级

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

JavaScript笔记(16)之事件高级

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

js高级技巧_JavaScript高级程序

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐