关于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)
}