キャンセルの流れを確認

    
      <script type="text/javascript">
        // ------------------------------------------------------------
        // テキストエリア
        // ------------------------------------------------------------
        // エレメントを作成する
        var element = document.createElement("textarea");
        // BODY のノードリストに登録する
        document.body.appendChild(element);
        // スタイルを設定
        element.style.cssText = "width:400px; height:300px;";
        // イベントリスナーに対応している
        if(element.addEventListener){
            // カスタムイベントのリッスンを開始する
            element.addEventListener("myTextAreaChanging",function (e){
                console.log("リスナーが受け取ったデータ:" + e.detail.text);
                // キャンセルに対応しているか
                if(e.cancelable){
                    // デフォルトの動作をキャンセル
                    e.preventDefault();
                }
            });
        }
        // ------------------------------------------------------------
        // 変更の直前通知を目的としたカスタムイベント
        // ------------------------------------------------------------
        // マウスイベントオブジェクトを作成
        var custom_event = document.createEvent("CustomEvent");
        // マウスイベントオブジェクトを初期化
        custom_event.initCustomEvent("myTextAreaChanging",false,true,{text:"表示テスト"});
        // ------------------------------------------------------------
        // テキストエリアの EventTarget から送出
        // ------------------------------------------------------------
        var result = element.dispatchEvent(custom_event);
        if(result){
            element.value = custom_event.detail.text;
        }else{
            console.log("リスナーがキャンセルした:" + custom_event.defaultPrevented);
        } 
      </script>