由postMessage深究到的addEventListener

项目中用到两次postMessage了，今天才深究了一下。原来javaScript基础还是会随着时间的流失而变得模糊。

需求

父页面、子页面，两页面不同域，之间对话用到了postMessage。下面为了方便统称为F、C页。

C页按钮的点击事件向F页发送一个消息小C，F页收到消息小C执行逻辑LC，LC执行完毕，F页向C页发送一个消息小F，C页收到消息小F执行逻辑LF。一句话，就是F、C页间相互通信。

C页js代码：

var btnObj = document.getElementById('buttons');
btnObj.onclick = function(){
     var defaultAdData = {
                 type:'advert', 
                 gameData:{
                     adId: '123'
                 }
         };
     window.parent.postMessage(JSON.stringify(defaultAdData), '*');
	/*我是错误代码：
     var receiveMessage = function(event) {
         var datas = JSON.parse(event.data);
         if (datas.type === "adGivePrize"&&datas.givePrize) {
             alert(‘click’);
         }
     }
     window.addEventListener("message", receiveMessage, false);*/
 }
 /*我是正确代码：
 var receiveMessage = function(event) {
     var datas = JSON.parse(event.data);
     if (datas.type === "adGivePrize"&&datas.givePrize) {
         alert(‘click’);
     }
 }
 window.addEventListener("message", receiveMessage, false);*/

F页js代码：

var receiveMessage = function(event) {
      var datas = JSON.parse(event.data);
      if (datas.type === "advert") {
            var postIframeData = {
                    type:'adGivePrize',
                    givePrize:true
            };
            //iframe发送信息
            window.frames[0].postMessage(JSON.stringify(postIframeData), '*');
      }
}

window.addEventListener("message", receiveMessage, false);

当点击C页中的按钮是会出现弹框提示"click"，要命的是按钮被点击多少次，就会弹框提示多少次。以为事件没有解绑，加了removeEventListener不行，代码挪来挪去，把C页中按钮的点击事件的事件处理程序中的postMessage挪出来就好了。

翻来翻去，哦，addEventListener可以给一个dom添加同一事件的多个事件处理程序，且多个事件处理程序是不会覆盖的。错误代码中，就是在按钮的点击事件处理程序中，执行的window.addEventListener(“message”, receiveMessage, false)。所以弹框提示次数才会随着点击按钮的次数增加。所以从点击事件处理程序中将window.addEventListener(“message”, receiveMessage, false)函数挪到外边，这样就为window添加一个message事件处理程序，自然也就弹框提示一次了。

如果有什么地方有误，欢迎讨论。