JS中addEventListener不能用的问题

最新推荐文章于 2023-12-26 11:02:41 发布
最新推荐文章于 2023-12-26 11:02:41 发布
阅读量5.7k 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/artemisrj/article/details/8639488
版权
<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> 


artemisrj
关注
专栏目录
关于在同一元素上使用相同参数多次调用addEventListner()的结果
韦奕-web前端开发
08-19 1204
JS权威指南17.2.3节中说: 使用相同的参数在同一个对象上多次调用addEventListner是没用的,处理程序仍然只会注册一次.  为了验证这句话的可信度,我做了小测试,结果表明当第二个参数使用函数直接量时,此理论不成立, 当使用函数引用时,此理论成立, 代码如下: addEventListener() body {margin: 100px;} 验证:"
js中addEventListener()与removeEventListener()用法案例分析
10-15
在JavaScript中，`addEventListener()` 和 `removeEventListener()` 是两个非常重要的事件处理方法，它们用于向DOM元素添加或移除事件监听器。理解这两个方法的工作原理对于编写交互式的Web应用程序至关重要。 `...
.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、检查上下文
addEventlistener不生效，已经执行了注册，但是事件没有注册成功
08-24 1万+
浏览器强刷的时候，有时候明明代码已经执行了addEventlistener，但是在chrome上的event listener就是没有看到注册的，自然也不会响应事件   重点，有时候可以有时候不可以。 后来发现是vue的原因，由于使用了vue的单文件组件，template里面的模板替换掉了html上的vue的el节点。 所以实际上是有时候注册了事件，但是又被vue的模板重新替换掉了注册...
js滚动条事件监听addEventListener、removeEventListener不生效
weixin_36931308的博客
07-12 1318
参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderlandEventTarget.removeEventListener - Web API 接口参考 | MDN
JS中onclick与addEventListener的区别详解
01-08
在JavaScript中，`onclick`和`addEventListener`是两种常见的用于为HTML元素添加点击事件处理程序的方法，它们在处理事件上有着显著的区别。 1. `onclick`属性： - 使用方式：`element.onclick = function () {}` ...
javascript attachEvent和addEventListener使用方法
10-30
JavaScript 是一种基于对象和事件驱动的脚本语言，它...最后，需要注意的是，在实际编程中，多次为同一个事件类型绑定多个事件处理函数可能会导致性能问题，因此应当谨慎使用，并确保在不需要时及时移除事件监听器。
addEventListener和attachEvent二者绑定的执行函数中的this不相同
09-05
在JavaScript中，`addEventListener`和`attachEvent`都是用于向元素添加事件监听器的方法，但它们之间存在一些关键差异，特别是在处理`this`关键字时。`addEventListener`是W3C标准的一部分，被大多数现代浏览器支持...
vue自学,window.addEventListener不生效解决方案
yrldjsbk的博客
02-25 7764
自己的代码里写的时候，多了一个小括号，导致代码不生效。百度反复查询了各种解决方案，最终，在对比网友的解决方案时候，注意到了这个细节，发现网友的方法调用，也是不带小括号的。我去掉括号后，代码生效了。最近在网上跟着别人的教程视频自学vue，在给window对象添加监听事件后，发现起初，一直没有效果。找不到原因，比较困惑。如图，出现了 这个脚本的图标，点击，就会回到页面的顶部，大于400像素后会出现，小于400像素是不会出现的。如图，这是自定义一个判定，要不要显示该图标的代码。如图，这是老师视频里面的截图代码。
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
最新发布
weixin_44434938的博客
12-26 5125
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
在使用vue swiper 下 mui时间选择 addEventListener 点击失效
swusn的博客
05-15 388
在使用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 1001
方法也称函数，是一系列逻辑的封装，是类型成员中的一部分，包括构造器和其它方法，构造器又分为实例构造器与类型构造器实例构造器, 类型的实例成员class Teacher{ //声明实例构造器publicTeacher(){}}上述代码声明了一个无参的实例构造器，使用new关键字实例化对象时调用的便是构造器方法，注意:如果没有主动声明无参构造器，编译器会默认生成一个无参的...
Vue第 42 篇，控制台报错：addEventListener is not a function （JavaScript添加监听事件时报错，JS添加监听事件时报错）
weixin_65793170的博客
03-21 5588
⭐在写前端代码的时候，控制台有时候会遇到这样的报错，addEventListener is not a function，说addEventListener不是一个函数，具体原因是因为侦听事件的事件源不对，事件源应该是一个元素，而非其它。请看
document.addeventlistener方法不执行_CompletableFuture 的执行模型
weixin_32866779的博客
12-24 751
许多现代的 Java 多线程程序都广泛使用了 CompletableFuture 抽象作为描述异步任务的方法，Apache Flink 和 Pravega 等项目中都能看到这个 Java 8 才被引进的新的并发工具的身影。由于 CompletableFuture 混用了 Future/Promise 并发模型中的 Future 和 Promise，即它既是 Future 又是 Promise，并且...
小白必看——原生JS解决addEventListener ()以及attachEvent()兼容问题
qq_31232201的博客
08-26 1217
原生JS解决兼容问题 为一个元素绑定多个事件的时候我们可以使用 obj.addEventListener( ) 但是我们需要考虑兼容问题，这种方法在IE8以下不支持 所以我们就需要另一种方法去解决IE中的问题; addEventListener ()的使用方法 obj.addEventListener("绑定的事件类型", 回调函数, 布尔值); /*参数一 * 绑定的事件类...
【JS】动态添加的元素绑定点击事件在移动端不生效
SZnAl的博客
07-13 3550
蜂鸟视图 蜂鸟云 移动端点击事件无法触发
document绑定click事件无效_JavaScript绑定/解绑事件兼容代码
weixin_35012431的博客
01-22 588
建议用电脑看比较舒服一点。为元素绑定事件(DOM)除了用对象.onclick=fn这类的方式（这种方式无法绑定多个事件，如果写了多个事件则会发生覆盖），还有： 1 对象.addEventListener("事件类型",事件处理函数,false)--谷歌、火狐和IE9、10、11支持,IE8不支持 2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支...
关于iframe点击事件无效的解决办法
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
js中addEventListener有什么用
08-03
4. 解决事件冲突：多次为同一元素添加同一类型的事件监听器时，使用addEventListener可以避免事件覆盖的问题。它会将新的事件监听器追加到该类型事件的监听器列表中，而不是替换掉原有的监听器。 总之，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值