javascript - カスタム イベントをディスパッチし、IE の別の場所 (バブリング) でリッスンする

Question

これを JavaScript で動作させることができないようです。普通の古い JavaScript と JQuery を使用してみましたが、何も機能しないようです。

これが私の状況です。このポップアップ「パネル」があり、その中にボタンがあります。ボタンにはクリック用のイベントリスナーがあり、そのハンドラーがパネルがリッスンするカスタムイベントを発生させたいです。これは、パネルでボタン クリックのすべてのロジックを処理する必要があるためです。

私がやっていることは次のとおりです: パネルを起動する前に、「クラス」のコンストラクターを呼び出します。

function PopUpStageAsssignmentTaker(content) {
            PopUpStage.call(this);
            this.allPagesAdded = false;
            this.questionsCreated = [];// will be an array of pages that will be submitted
            this.listLabel = null;
            addAssignmentTakerParts.call(this);
            this.popUpDiv.addEventListener("assignmentTakingSubmitEvent", handleAssignmentSubmit, true);

            function handleAssignmentSubmit(event) {
                alert("YESSS!");
            }
        }

これはかなりのことを行いますが、PopUpStage への呼び出しで Panel を表す div を作成し、それを this.popUpDiv に保存することだけは知っておいてください。そこで、作成中のカスタム イベントをリッスンするイベント リスナーを this.popUpDiv に追加します。

後で、パネルにコンテンツを作成するコードがあり、次のようなものがあります。

SubmitQuestionTakingPage.prototype.makeContent = function(question) {
                var questionWrapper = getQuestionWrapper();

                var submitDiv = document.createElement("section");
                submitDiv.innerHTML = "Pressing Submit will cause this Assignment to be submitted and you will be unable to make any changes after that. If this " +
                        "Assignment is automatically graded you will receive a Grade upon clicking submit. If this Assignment is not automatically submitted you must wait" +
                        " for the creator of this Assignment to assign you a Grade. To continue, please press Submit.";
                submitDiv.setAttribute("class", "separatedSmaller");
                questionWrapper.appendChild(submitDiv);

                var submitButton = document.createElement("input");
                submitButton.setAttribute("type", "submit");
                submitButton.setAttribute("class", "fancyButton");
                submitButton.addEventListener("click", handleSubmitButtonClick);
                questionWrapper.appendChild(submitButton);


                return questionWrapper;
            };

            function handleSubmitButtonClick(event) {
                 var event = document.createEvent("Event");
                  event.initEvent("assignmentTakingSubmitEvent", true, true);
                  window.dispatchEvent(event);

// $(this).trigger("assignmentTakingSubmitEvent"); }

そこで、いくつかのコンテンツを作成し、その中にクリックのリスナーを持つボタンを作成します。クリック ハンドラーで、イベントを発生させる方法を確認できます。

問題: これはバージョン 9 以降の IE では機能しないと読んでいます。すべてのブラウザで動作するようにするにはどうすればよいですか? 方法はありますか？