场景
子窗口向父窗口传值，比如点击按钮弹窗打开iframe ，这时候可以使用，防止跨域。我的问题比较简单，就是监听没有删除，导致多次执行
代码
演示代码，不分父子窗口，直接写一个页面内，仅供参考
父窗口，监听数据
window.addEventListener("message", function(e){
console.log(e.data.msg)
})
子窗口，发送数据
window.postMessage({msg:"Hello World"}, '*');
这个时候，由于我的监听，是放在按钮事件内，所以每点一次就会addEventListener一次，多次点击，就会多次执行，如果里面也有业务逻辑的话，比如发送请求，就会执行多次，所以是BUG。
解决
方案1：在打印后，清除监听。比较恶心的事情发生了（自己体会），结论是：removeEventListener的回调函数和addEventListener的回调函数，必须是同一个。
说人话：必须把函数单独提取出来，然后让他俩调用同一个，如下：文章来源：https://www.toymoban.com/news/detail-760483.html
// 监听
window.addEventListener("message", say)
// 提取函数
function say(e){
console.log(e.data.msg)
// 移出监听
window.removeEventListener('message', say);
}
方法二：类似防抖节流的思想，每次点击将函数监听函数进行替换，只执行点击的最后一次，我觉得还是这种方式最简单文章来源地址https://www.toymoban.com/news/detail-760483.html
window.onmessage = function say(e){
console.log(e.data.msg)
}
到了这里，关于关于window.addEventListener的小坑的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
