询问关于javascript事件监听失效的问题

Posted 2023-04-24

最近在学javascript，被他的事件迷惑了，事情是这样的：
当我监听一个元素的事件（使用addEventListener），之后如果我修改文档的内容（使用innerhtml，或者removeChild修改），就会出现事件监听无效的情况，即该事件不再有反应。
经过我自己的试验，也发现修改文档内容会导致元素事件失效的情况。但是今天在修改代码的时候，发现使用innerHTML修改后事件不会失效了。这可奇怪死我了。google之，无果，于是想跟各位请教一下：
js的事件是否会像我上面描述的那样运作？即文档改变后，之前的事件就会无效。如果是，是一定这样呢？还是特定的某种情况会？

innerHTML是ie独创的一个JavaScript方法，并不属于ecmascript也就是w3c对JavaScript设定的标准，w3c使用诸如createElement等方法创建修改元素，但是对大量元素进行修改的时候比较繁琐，没有innerHTML方便，这也是innerHTML非标准但是却如此流行的原因，但是既然innerHTML非标准他就会和其他非标准应用一样存在一些问题，你说的问题我也经常遇到，大概情况是：比如当使用innerHTML修改一长串图片列表时原使用for为上次装载的图片列表的监听完全失效，但是当使用innerHTML修改单张图片的时候则事件依然有效，可以尝试使用标准的setattribute等语句进行逐一修改但是工作量比较大，我一般使用innerHTML，然后在修改完成后再次为这些新添加的元素执行一次监听事件附加即可。
另外，如果你说的addEventListener 如果是JavaScript内置函数的话ie不支持需要使用attachevent，而使用匿名函数则可以解决一切兼容问题：
$(id).onclick=function()；....虽然这个方法古老但是兼容性非常好 参考技术A 如果你的监听对象在innerHTML中自然会失效,在它之外则不可能被影响本回答被提问者采纳 参考技术B 还是具体一点吧..给点代码...

关于vue中滚动监听失效问题

在vue项目中,

 

监听window滚动失效;并且document.body.scrollTop一直是0的情况!

查找了许多资料;并没有找到合理的解决方案;

最中发现,在index.html设置了html,body的宽高设置成了100%;

这样会造成window.onscroll监听不到正确的滚出高度(恒为0);

不和你们多bb:解决方案:

将html,body的height设置为auto;即可解决!!