# Event Listeners

### 소개

위젯에서 App으로 데이터를 보낼때 동작 하는 함수들 입니다.

<table><thead><tr><th width="220">이름</th><th>설명</th></tr></thead><tbody><tr><td>onMessage</td><td>위젯에서 App으로 보낸 메시지를 수신 할 때 동작하는 함수입니다.</td></tr></tbody></table>

## 📚 API 설명 및 예제

### onMessage

{% hint style="info" %}
widget.onMessage.Add(function(player, data: any){});
{% endhint %}

위젯에서 App으로 메시지를 보내면 callback 함수가 동작합니다.

**파라미터**

<table><thead><tr><th width="133.33333333333331">이름</th><th width="138">타입</th><th>설명</th></tr></thead><tbody><tr><td>player</td><td>Player</td><td>player는 위젯을 소유한 플레이어를 가르킴<br>player 파라미터의 이름은 임의로 변경 가능</td></tr><tr><td>data</td><td>Object</td><td>data는 위젯에서 App으로 보낸 메시지를 가르킴<br>data 파라미터의 이름은 임의로 변경 가능</td></tr></tbody></table>

**예제**

x 버튼을 눌러서 위젯창 닫는 기능 만들어보기

{% file src="<https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FUL2vv5iA97S5SHfp0X3n%2Fsample_EventListener.zip?alt=media&token=30f19331-0bac-4c1a-ac87-4535a9ffd196>" %}

![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FN1hpU3vCvDnzfHS9sjY0%2FUntitled.png?alt=media\&token=e9377306-0a60-45e5-884a-d352a936647e)

```jsx
// 플레이어가 입장할 때 동작하는 함수
App.onJoinPlayer.Add(function (player) {
	player.tag = {
		widget: null,
	};

	player.tag.widget = player.showWidget("sample.html.html", "top", 600, 500);
	player.tag.widget.onMessage.Add(function (player, msg) {
		// 위젯에서 App으로 'type: close'라는 메시지를 보내면 위젯을 파괴함
		if (msg.type == "close") {
			player.showCenterLabel("위젯이 닫혔습니다.");
			player.tag.widget.destroy();
			player.tag.widget = null;
		}
	});
});
```

**sample.html**: 버튼과 스크립트 부분

```jsx
<i onclick="closeWidget()" class="fa-solid fa-xmark"></i>
<script type="text/javascript">
	// x 버튼을 누르면 호출되는 함수
	function closeWidget() {
		// App으로 메시지를 보냄.
		window.parent.postMessage(
			{
				type: "close",
			},
			"*"
		);
	}
</script>
```

### 부록

[위젯에서 사용가능한 문법](https://docs-kr.zep.us/creator/reference/scriptaction)