解决.addEventListener is not function问题

最新推荐文章于 2023-07-28 20:05:40 发布
最新推荐文章于 2023-07-28 20:05:40 发布
阅读量2.3k 收藏
点赞数 3
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XunLin233/article/details/127470615
版权

先来看这样一个代码，给a_left添加事件监听器

 但是报错了：a_left.addEventListener is not a function

问题很大，因为我们获取过来的a_left是一个数组，没办法直接添加事件监听器。

这时候就需要先遍历数组，给每一个数组里的元素添加事件监听器。 

这样就解决了 .addEventListener is not a function的问题

永久旅途
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈addEventListener和attachEvent的区别
11-30
• addEventListener共有3个参数，如下所示： element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事件的对象，及HTML节点。 type 事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”。 listener 要绑定的事件监听函数，注意只写函数名，不要带括号。 userCapture 事件监听方式，只能是true和false：true，采用capture(捕获)模式；false，采
self.attachevent is not a function的解决方法
11-28
总之，解决`self.attachevent is not a function`错误的关键在于理解`attachEvent`和`addEventListener`的区别，并通过条件判断或者使用库来实现跨浏览器的兼容性。同时，对于事件处理的模式选择，应根据实际需求和...
addEventListener is not a function报错
judykang123的博客
07-27 1万+
1、不是id，获取不到唯一一个 给想要监听的那个元素加一个id就可以了 2、js和jq连用 addEventListener是js的写法，如果你在前面写$("#id")的话当然获取不到 可以写成 $("#id")[0] 或者document.getElementById(“id”) ...
addEventListener is not a function , JavaScript添加监听事件时报错
weixin_65793170的博客
03-21 5117
在写js代码的时候，控制台有时候会遇到这样的报错，addEventListener is not a function，说addEventListener不是一个函数，具体原因是因为侦听事件的事件源不对，事件源应该是一个元素，而非其它
错误btn.addEventListener is not a function
monkey_sister的博客
06-17 1万+
今天碰到了这个错误，百度了很久没有结果尝试很多方法来解决这个错误，其中一种尝试报错为：document.getElementsByClassName(...).addEventListener is not a function直接百度，找到解决办法：https://www.cnblogs.com/zhahouming/p/5254750.html（虽然不知道该作者是不是原创，因为发现其他主页上的...
js中出现addEventListener is not a function
weixin_47417033的博客
04-18 1万+
js错误记录 js中出现addEventListener is not a function，多半是侦听事件的事件源不对，事件源应该是一个元素，而非数组。 getElementsByClassName getElementByTagName()获取到的都是数组，即使满足条件的元素只有一个，也是数组。 因此在事件监听时，必须加[0]，否则会报如下错误 上代码 var items = document.querySelectorAll('.item'); // getElementsByClassName
uniapp使用this.$refs.content.addEventListener提示 addEventListener is not a function 错误
weixin_52256715的博客
07-14 1764
这是因为在 Vue 中，$refs 是一个对象，它直接引用组件实例或 DOM 元素，而不是原生的 DOM 元素。要解决这个问题，可以使用 $el 属性来访问原生的 DOM 元素，然后再使用 addEventListener。通过使用 $el 属性，可以访问到 this.$refs.content 的原生 DOM 元素，并且可以正确地使用 addEventListener。
TypeError document.getElementById(...) is null错误原因
09-03
document.addEventListener('DOMContentLoaded', function() { // JavaScript代码 }); ``` - **将脚本放在`<body>`标签的底部**：这确保脚本在所有HTML元素解析之后才执行，不需要额外的事件监听器。 - **检查...
Javascript 的addEventListener()及attachEvent()区别分析
12-10
Mozilla中： addEventListener的使用方式： target.addEventListener(type, listener, useCapture); target： 文档节点、document、window 或 XMLHttpRequest。 type： 字符串，事件名称，不含“on”，比如“click”...
在layui中layer弹出层点击事件无效的解决方法
12-10
`click`事件通常用在页面加载时已经存在的元素上，通过`.click(function(){...})`或`addEventListener('click', function(){...})`等方法进行绑定。然而，这样的绑定方式不会作用于后续动态添加到页面的元素，因为...
小知识：btn.addEventListener is not a function报错处理
tuzi007a的博客
03-02 7107
用自己的话讲有趣的知识。大家好，我是梅巴哥er。本篇介绍一个报错处理和document.getElementsByClassName('xxx')的用法。 今天看到有人发帖说在用getElementsByClassName的时候出现了报错，而且就算解决了，也还没弄清原因，所以写一下关于报错原因、解决办法及获取DOM元素方法的总结，解决大家的疑惑。 参考资料： MDN/getElementsByClassName的用法 报错举例： // 举个例子 <!DOCTYPE html> <
Vue中使用七牛云上传报错o.upload.addEventListener is not a function以及其他报错问题
weixin_40442888的博客
08-12 4394
1.运行提示o.upload.addEventListener is not a function 解决方案:(此方法不是根本解决办法，问题3的解决办法是最终解决方案) 找到node_modules/mockjs/dist/mock.js 第8308行 找到node_modules/mockjs/src/xhr/xhr.js 第216行(确保在生产模式下打包出来的代码正常使用。) 添加代码： Mo...
vue项目使用elementui上传组件 打包后报错t.upload.addEventListener is not a function的解决方案
qq_44146522的博客
04-17 2088
这个问题是因为mockjs改动了axios里面XMLHttpRequest对象致使的根据axios源码 l是一个XMLHttpRequest对象mockJs把l变量从XMLHttpRequest对象改为了MockXMLHttpRequest对象因此l.upload是一个空对象 空对象没有 addEventListener方法 因此报错。
addEventListener is not a function
热门推荐
Yanfengting的博客
12-14 1万+
addEventListener is not a function 这是因为选择器没有正确选择元素对象 document.getElementsByClassName(…)捕捉到的是该类名元素的数组 正确的访问方式应该是： document.getElementsByClassName(…)[0].addEventListener… 参考：https://blog.csdn.net/jzsn_...
VUE上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function
dxn16638400024的博客
07-28 860
尝试使用 Vue CLI 提供的打包分析工具，查看哪些文件被打包进了你的代码中，是否有可能因为某些文件没有被正确打包导致了问题。2.文件node_modules/mockjs/src/mock/xhr/xhr.js 第216行。这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。确认你的上传代码是否与打包后的代码在同一目录下或同一级目录下，否则需要修改引用路径。确认你的上传代码路径是否正确，是否有被正确引入。
通过npm引入的echart目录_用npm的方式引入echarts,出现这个错: el.addEventListener is not a funct...
weixin_39668527的博客
12-19 692
安卓IOS微信应该都是没问题的，如果是H5的话，不建议用封装的mpvue-echarts标签，而是使用原本的H5用法，采用预编译，类似import * as echarts from 'echarts'// #ifndef H5import mpvueEcharts from 'mpvue-echarts'// #endif...// #ifdef H5mounted(){this.myChart...
vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEventListener is not a function
weixin_49562833的博客
02-20 1199
vue3项目使用elementui-plus上传组件 打包后报错t.upload.addEventListener is not a function
vue项目使用element-ui组件上传文件报错upload.addEventListener is not a function Mock数据报错的解决方案
qq_53979100的博客
04-04 1774
需要查找文件node_modules/mockjs/dist/mock.js以及node_modules/mockjs/src/mock/xhr/xhr.js。主要是因为mockjs改动了axios里面XMLHttpRequest对象从而导致报错。就是给MockXMLHttpRequest对象添加一个原生xhr.upload方法。找到后打开文件大约在8312行和216行的位置添加以下代码。
.addEventListener is not a function
最新发布
10-20
".addEventListener is not a function"是JavaScript中常见的错误之一，通常是因为监听事件的事件源不正确导致的。在JavaScript中，只有元素才能添加事件监听器，而如果你尝试在非元素上使用addEventListener()方法，就会出现这个错误。解决这个问题的方法是确保你的事件源是一个元素，或者使用querySelector()方法来获取元素。例如，你可以使用以下代码来解决这个问题： const btn = document.querySelectorAll(".submitIpt"); btn.addEventListener('click', function () { console.log("enumerable"); }); 或者： const btnTwo = document.querySelector(".submitIpt"); btnTwo.addEventListener("click", (() => { console.log("immediate"); }));
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值