Javascript Dialog 自訂輸入視窗 (五) 回傳資料事件及處理

本章的範例基本上為補完前面的程式碼,接下來要先了解自訂事件以及呼叫的方式

1. 建立自訂事件及監聽
2. 套用原本程式碼

一、建立自訂事件及監聽

以下為建立自訂事件及驅動的程式碼, detail 是保留字

const dialog_ok_event = "dialog_ok_event";

const Custom_Event = new CustomEvent(dialog_ok_event,{detail:資料(字串)});                    

document.dispatchEvent(Custom_Event);

監聽接收事件

            document.addEventListener(

                dialog_ok_event,

                function(e){

                    alert("Dialog input:" + e.detail);

                },

                false

            )

二、套用原本程式碼

了解自訂事件後,接下來整合到原來的程式內

先將建立的事件丟到確認按鈕內,這樣就可以將產生的資料丟到事件內

                            // console.log("input:" + strInputData);

                            alert("input:" + strInputData);

                            //驅動按鈕回傳事件

                            // ClickOK_Event.detail = strInputData;

                            const ClickOK_Event = new CustomEvent(dialog_ok_event,{detail:strInputData});                    

                            document.dispatchEvent(ClickOK_Event);

                            //關閉視窗

                            let mydialog = document.getElementById("mydialog");

                            mydialog.innerHTML = "";

接下來再建立監聽事件來處理回傳的資料即可,程式碼如下

            //輸入視窗確認後回傳接收

            document.addEventListener(

                dialog_ok_event,

                function(e){

                    //自行處理 e.detail

                    alert("Dialog input:" + e.detail);

                },

                false

            )

以上內容可以配合 GridView 來製作同一頁面完成輸入的工作,

不過在程式的維護上,個人還是建議使用跳轉到獨立頁面處理輸入會更容易及方便,因為每個表單的輸入環境基本上都不同,直接修改跳轉後的輸入頁面就不會去動到原本的程式碼.純粹個人建議參考參考~