关于window.addEventListener的小坑

阅读本书更多章节>>>>

场景

子窗口向父窗口传值，比如点击按钮弹窗打开iframe ，这时候可以使用，防止跨域。我的问题比较简单，就是监听没有删除，导致多次执行

代码

演示代码，不分父子窗口，直接写一个页面内，仅供参考

父窗口，监听数据

window.addEventListener("message", function(e){console.log(e.data.msg)})

子窗口，发送数据

window.postMessage({msg:"Hello World"}, '*');

这个时候，由于我的监听，是放在按钮事件内，所以每点一次就会addEventListener一次，多次点击，就会多次执行，如果里面也有业务逻辑的话，比如发送请求，就会执行多次，所以是BUG。

解决

方案1：在打印后，清除监听。比较恶心的事情发生了（自己体会），结论是：removeEventListener的回调函数和addEventListener的回调函数，必须是同一个。
说人话：必须把函数单独提取出来，然后让他俩调用同一个，如下：

// 监听window.addEventListener("message", say)// 提取函数function say(e){console.log(e.data.msg)// 移出监听window.removeEventListener('message', say);}

方法二：类似防抖节流的思想，每次点击将函数监听函数进行替换，只执行点击的最后一次，我觉得还是这种方式最简单

window.onmessage = function say(e){console.log(e.data.msg)}

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-07/155288.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！