CustomEvent 試用紀錄

CustomEvent, EventTarget 試用紀錄

引言

在 html5 使用 CustomEvent 傳遞自訂事件。有時訊息不易直接送與收就有些需求。比如運作平台不一致時，此例為 WebForm 與 React 因不同運作平台所以訊息難以直接送與收。

CustomEvent 的使用模式不只一種，這邊只紀錄成功的模式。

CustomEvnet 與 EevntTaregt 合作

CustomEvent 與 EventTarget 的組合應用模式也不只一種，老實說用的並不順手，找到的範例也都不是全面性的完整程式碼，總是要試了試撞撞牆才能找到正式的使用方法。

CustomEvent: CustomEvent() constructor - Web APIs | MDNMDN Web Docs

EventTarget - Web API | MDNMDN Web Docs

關鍵程式碼紀錄

主程式(WebForm Page)

建構 EventTarget 以接收 CustomEvent。

FooPage.aspx

<html>
[...略...]
<h1>Foo Page 02</h1>

  <%-- React 元件將鑲在此處 --%>
  <asp:Panel ID="MyCounter" runat="server">MyCounter first rendered.</asp:Panel>

  <h6>Event List</h6>
  <ul id="myEventList">
  </ul>

  <script>
    <%-- init --%>
    const myTarget = new EventTarget(); //------ 增加 EventTarget 以接收 CustomEvent。
    myTarget.addEventListener("my-counter-up", function (event) {
      console.log('my-counter-up', { event });

      <%-- To response event --%>
      const myEventList = document.getElementById('myEventList');
      const item = document.createElement('li');
      item.innerText = `type:${event.type}, detail:${event.detail}`;
      myEventList.appendChild(item);
    });

    //------ 把 EventTarget 送到內層子元件，將用來發送 CustomEvent。
    renderMyCounter(<%= $"'{MyCounter.ClientID}'" %>, 17, myTarget);
  </script>
 </html>

內層元件(React Component)

內層元件利用 EventTarget 送出 CustomEvnet。

要注意：

React\src\index.js

"use strict";
import React from 'react' // 第18版
import ReactDOM from 'react-dom/client'
import MyCounter from './MyCounter'

//## 註冊雙向繫結 React 元件：MyCounter
window.renderMyCounter = function (rootElementId, initCount, evtTarget) {
  function handleChange(newCount) {
    // events up
    //------ 利用 EventTarget 之 dispatchEvent 指令把 CustomEvent 送出去外面。
    //------ ※注意:訊息放在物件之 detail 欄位下。
    evtTarget.dispatchEvent(new CustomEvent("my-counter-up", { detail: newCount }));
  }

  // props down
  const rootElement = document.getElementById(rootElementId);
  const root = ReactDOM.createRoot(rootElement);
  root.render(<MyCounter initCount={initCount} onChange={handleChange} />);
}