JS中addEventListener不能用的问题

最新推荐文章于 2025-01-07 08:20:21 发布
原创 最新推荐文章于 2025-01-07 08:20:21 发布 · 5.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了JavaScript中事件监听器绑定的位置对于其是否生效的影响。通过两个不同结构的HTML示例对比，揭示了DOM元素加载顺序与脚本执行时机之间的关系。了解这一原理有助于开发者避免因元素未加载完成而导致的事件绑定失效问题。
<html> 
<head> 
</head> 
<body> 
<div id="name3" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
</div> 
<div id="info"></div> 
<script type="text/javascript"><!-- 
var name3=document.getElementById('name3'); //要注意 
var name2=document.getElementById('name2'); //要注意 
var info=document.getElementById('info'); 


name3.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 

// --></script> 
</body> 

</html> 

以上代码是能用的，但是换了JS代码和Div的位置后，就不能用了

<html> 
<head> 
</head> 
<body> 

<script type="text/javascript"><!-- 
var name3=document.getElementById('name3'); //要注意 
var name2=document.getElementById('name2'); //要注意 
var info=document.getElementById('info'); 


name3.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 

// --></script> 
<div id="name3" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
</div> 
<div id="info"></div> 

</body> 

</html> 


js中addEventListener()与removeEventListener()用法案例分析
10-15
在JavaScript中，`addEventListener()` 和 `removeEventListener()` 是两个非常重要的事件处理方法，它们用于向DOM元素添加或移除事件监听器。理解这两个方法的工作原理对于编写交互式的Web应用程序至关重要。 `...
精选资源
JS中onclick与addEventListener的区别详解
01-08
在JavaScript中，`onclick`和`addEventListener`是两种常见的用于为HTML元素添加点击事件处理程序的方法，它们在处理事件上有着显著的区别。 1. `onclick`属性： - 使用方式：`element.onclick = function () {}` ...
.addEventListener添加事件失败原因之一
anwebDesigner的博客
02-08 1万+
正确语法：document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; });addEventListener() 方法用于向指定元素添加事件句柄。注意，这个指定元素是一个元素，所以当使用doc...
对于js中addEventListener()出现无法读取的情况的解决
热门推荐
weixin_44647865的博客
12-07 3万+
对于js中addEventListener()出现无法读取的情况的解决 1、检查元素是否获取到 2、检查字符拼写，引用函数名是否正确 3、检查上下文
为什么 JavaScript 中的 window.addEventListener 不生效？
向着太阳迎着光
01-07 3068
事件未正确绑定：确保代码在 DOM 完全加载后执行。事件目标错误：确保将事件绑定到正确的对象上。事件绑定时机错误：在 React 或单页应用中，需要确保事件绑定在正确的生命周期钩子中进行。事件被阻止：检查或是否被不必要地调用。浏览器兼容性问题：需要兼容旧版浏览器时，使用。事件处理函数错误：确保事件处理函数中没有错误，必要时使用try-catch来捕获异常。根据具体的情况进行调试，可以帮助你找出问题的根源并解决不生效的情况。
addEventlistener不生效，已经执行了注册，但是事件没有注册成功
08-24 1万+
浏览器强刷的时候，有时候明明代码已经执行了addEventlistener，但是在chrome上的event listener就是没有看到注册的，自然也不会响应事件   重点，有时候可以有时候不可以。 后来发现是vue的原因，由于使用了vue的单文件组件，template里面的模板替换掉了html上的vue的el节点。 所以实际上是有时候注册了事件，但是又被vue的模板重新替换掉了注册...
javascript attachEvent和addEventListener使用方法
10-30
JavaScript 是一种基于对象和事件驱动的脚本语言，它...最后，需要注意的是，在实际编程中，多次为同一个事件类型绑定多个事件处理函数可能会导致性能问题，因此应当谨慎使用，并确保在不需要时及时移除事件监听器。
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
在JavaScript中，`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法，但它们之间存在一些关键差异，特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分，被大多数现代浏览器支持...
js滚动条事件监听addEventListener、removeEventListener不生效
weixin_36931308的博客
07-12 1445
参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderlandEventTarget.removeEventListener - Web API 接口参考 | MDN
vue自学,window.addEventListener不生效解决方案
yrldjsbk的博客
02-25 8896
自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
weixin_44434938的博客
12-26 7024
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
在使用vue swiper 下 mui时间选择 addEventListener 点击失效
swusn的博客
05-15 429
在使用vue swiper 下 mui时间选择 addEventListener 点击失效 我的解决办法是 直接去掉 btn.addEventListener(‘tap’, function() {}, false); 因为去掉了点击，所以只会已加载就只执行一次，于是再写一个调用，就好了 html代码： <span @click="DatePicker()" id='result' data-options='{"type":"date"}' class="btn mzq-color3">
window.addeventlistener 不能调用方法_方法与构造器
weixin_39647471的博客
12-09 1081
方法也称函数，是一系列逻辑的封装，是类型成员中的一部分，包括构造器和其它方法，构造器又分为实例构造器与类型构造器实例构造器, 类型的实例成员class Teacher{ //声明实例构造器publicTeacher(){}}上述代码声明了一个无参的实例构造器，使用new关键字实例化对象时调用的便是构造器方法，注意:如果没有主动声明无参构造器，编译器会默认生成一个无参的...
Vue第 42 篇，控制台报错：addEventListener is not a function （JavaScript添加监听事件时报错，JS添加监听事件时报错）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
03-21 6566
⭐在写前端代码的时候，控制台有时候会遇到这样的报错，addEventListener is not a function，说addEventListener不是一个函数，具体原因是因为侦听事件的事件源不对，事件源应该是一个元素，而非其它。请看
document.addeventlistener方法不执行_CompletableFuture 的执行模型
weixin_32866779的博客
12-24 839
许多现代的 Java 多线程程序都广泛使用了 CompletableFuture 抽象作为描述异步任务的方法，Apache Flink 和 Pravega 等项目中都能看到这个 Java 8 才被引进的新的并发工具的身影。由于 CompletableFuture 混用了 Future/Promise 并发模型中的 Future 和 Promise，即它既是 Future 又是 Promise，并且...
关于在同一元素上使用相同参数多次调用addEventListner()的结果
韦奕-web前端开发
08-19 1258
JS权威指南17.2.3节中说: 使用相同的参数在同一个对象上多次调用addEventListner是没用的,处理程序仍然只会注册一次.  为了验证这句话的可信度,我做了小测试,结果表明当第二个参数使用函数直接量时,此理论不成立, 当使用函数引用时,此理论成立, 代码如下: addEventListener() body {margin: 100px;} 验证:"
小白必看——原生JS解决addEventListener ()以及attachEvent()兼容问题
qq_31232201的博客
08-26 1295
原生JS解决兼容问题 为一个元素绑定多个事件的时候我们可以使用 obj.addEventListener( ) 但是我们需要考虑兼容问题，这种方法在IE8以下不支持 所以我们就需要另一种方法去解决IE中的问题; addEventListener ()的使用方法 obj.addEventListener("绑定的事件类型", 回调函数, 布尔值); /*参数一 * 绑定的事件类...
【JS】动态添加的元素绑定点击事件在移动端不生效
SZnAl的博客
07-13 3792
蜂鸟视图 蜂鸟云 移动端点击事件无法触发
js中addEventListener
最新发布
08-01
注意：`removeEventListener` 必须传入与 `addEventListener` 相同的函数引用，因此不能使用匿名函数。 --- ### 事件传播（冒泡 vs 捕获）： - 默认是冒泡阶段触发（`useCapture = false`）。 - 如果你想在捕获...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值