# 页面交互事件
适配器与Roma Exchange框架有多次交互，主要通过PostMessage和AddEventListener接口实现数据通信。对于适配器页面来说，有多次发送消息事件和接收消息事件，其中每次发送数据之后，ROMA Exchange都会根据监听到的事件名触发对应的动作。
以Astro轻应用适配器的资产对象选择页为例，五次发送消息事件和一次接收消息事件分别介绍如下：
1. 触发数据传输事件 发布者在资产发布页单击资产对象时，适配器资产对象选择页需要获取ROMA Exchange框架传来的"资产来源标识（sourceId）"、"资产来源参数（sourceAttributes）"。
   其中，"资产来源标识"用来调接口获取资产对象数据；"资产来源参数"包含了从草稿中获取的数据，用于数据回显；"地址信息"包含了适配器鉴权页的跳转地址，用于未授权情况下的页面跳转。
   因此，适配器需执行触发动作给ROMA Exchange，ROMA Exchange监听到该事件时，就会触发数据传递动作。
   
代码示例：
1. created () {
2. let eventObj = {
3. eventName: 'PARENT_EVENT'
4. params: {
5. message: 'loading'
6. }
7. };
8. parent.postMessage(JSON.stringify(eventObj),'\*');
9. },
   1. 传递页面高度数据 资产对象选择页渲染前，会传递一个页面高度和宽度的数据给ROMA Exchange框架，用以调整弹窗的高度和宽度。
      
    
代码示例：
1. mounted () {
2. let div = document.getElementById("\*\*\*AdaptorConfigWidget");
3. let eventObj = {
4. eventName: 'PAGELOAD_EVENT',
5. params: {
6. height: div.offsetHeight,
7. width: div.offsetWidth
8. }
9. };
10. parent.postMessage(JSON.stringify(eventObj),'\*');
11. },
    1. 确定事件后传递数据 选择资产对象之后单击确认按钮，适配器会给ROMA Exchange框架传递选择的资产对象数据
       代码示例：
       confirmFun () {
       
     
12. let eventObj = {
13. eventName: 'CONFIRM_EVENT',
14. params: {
15. sourceAttributes:{
16. items: this.items,
17. sourceId: this.sourceId,
18. assetData\*\*\*: this.assetData\*\*\*
19. }
    1. }
     
20. };
21. parent.postMessage(JSON.stringify(eventObj),'\*');
22. },
    1. 取消事件后传递信息 单击取消按钮后，适配器会给ROMA Exchange上架框架传递信息，以提示框架进行弹窗关闭操作。
       代码示例：
       cancelFun () {
       
     
23. let eventObj = {
24. eventName: 'CONCEL_EVENT',
25. params: {
26. message: 'Cancel!'
    1. }
     
27. };
28. parent.postMessage(JSON.stringify(eventObj),'\*');
29. },
    1. 传递提示信息 当有警示信息或者异常情况时，适配器会传递提示信息给外层框架，以在外层展示提示信息。
       代码示例;
       messageFun () {
       
     
30. let eventObj = {
31. eventName: 'MESSAGE_EVENT',
32. params: {
33. message: 'Warning!'
    1. }
     
34. };
35. parent.postMessage(JSON.stringify(eventObj),'\*');
36. },
    1. 接收数据 在触发事件传输事件之后，ROMA Exchange会传递资产来源的相关数据给适配器。
       代码示例;
       created() {
       const DICT = {
       DATA_EVENT: dataFun,
       }
       function dataFun (e) {
       this.sourceId = e.sourceId
       }
       window.addEventListener("message", function (e) {
       var event = JSON.parse(e.data)
       DICT\[event.eventName\](event.params)
       })
       
     
37. }, 因此，适配器中资产对象选择页需要约定以下几个事件：
    
| **页面事件类型** |    **事件名称**    | **事件解释** |
|---|---|---|
| Item消息发送事件 | PARENT_EVENT   | 触发数据传输   |
| Item消息发送事件 | PAGELOAD_EVENT | 发送高度     |
| Item消息发送事件 | CONFIRM_EVENT  | 确定       |
| Item消息发送事件 | CANCEL_EVENT   | 取消       |
| Item消息发送事件 | MESSAGE_EVENT  | 提示消息     |
| Item消息接收事件 | DATA_EVENT     | 接收数据     |
   
其他页面可以根据需求选择事件，但是事件名称应与上表中的一致。