# 【Elixir】サーバーから特定要素のイベントを実行する
> Elixir Phoenix でサーバーから特定の要素のイベントを実行する方法のメモ
- Canonical: https://c-a-p-engineer.github.io/elixir-liveview-js-exec/
- Published: 2023-09-11T10:00:00.000Z
- Modified: 2023-09-11T10:00:00.000Z
- Categories: Elixir
- Tags: Elixir, Phoenix
# 【Elixir】Phoenix 独自に定義したイベントを実行する方法
Elixir Phoenix でサーバーから特定の要素のイベントを実行する方法のメモ。
`push_event` と組み合わせて特定の要素に設定されたイベントを実行します。
Phoenix.LiveView.html#push_event/3
たとえばダイアログを出して入力後にダイアログを閉じたいとかの時に使用できます。
## 確認環境
* Elixir 1.14.2
* Phoenix 1.6.3
## テンプレート
まずは簡単にテンプレート側を書いてみます。
```html
```
## イベントハンドラー
liveview側を書きます。
イベントハンドラーの実行部分だけになります。
```elixir
@impl true
def handle_event("event", _params, socket) do
{
:noreply,
socket
|> put_flash(:info, "閉じる！")
|> push_event("js-exec", %{
# イベントを実行する対象（クエリセレクタ）
to: "#hidden",
# イベントを実行する要素名
attr: "phx-click"
})
}
end
```
## JavaScriptにイベントを追加
`app.js` に以下のイベントリスナーを追加。
```js:assets/js/app.js
// 特定のイベントを実行する
window.addEventListener("phx:js-exec", ({detail}) => {
// クエリセレクター
document.querySelectorAll(detail.to).forEach(el => {
// 要素のイベントを実行
liveSocket.execJS(el, el.getAttribute(detail.attr))
})
})
```
## 参考
* Handling server-pushed events
* Triggering JS from the server in LiveView: showing a spinner