JavaScriptカスタムイベント

1105 ワード

javascript カスタムイベント

1:基本概念
システム内で発生した動作や発生した出来事は、イベント発生時に何らかの信号をトリガし、動作を自動的にロードする仕組みを提供する.

    var myButton = document.getElementById('button');
    myButton.onclick = function(){
        alert('   button');
    }
    myButton = null;

2:イベント3要素

イベントソース(トリガの要素、つまりあなたは何を操作しますか?)

イベント(イベントのトリガ方式、つまりあなたが何をしたいのかを実現するために必要なインタラクション効果)

処理関数(イベントトリガー後に実行するコード、つまりイベントが行われた後、どのように目標を変更しますか?)

3:事件泡立ち(DOM)

トリガフェーズ

捕獲フェーズ

発泡段階

4:カスタムイベントの作成

    var event = new Event('myEvent');
    /*
    var event = document.creatEvent('Event');
    event.initEvent('myEvent',true,true);
    */
    myButton.addEventListener('myEvent',function(e){
        debugger;
    },false);
    myButton.dispatchEvent(event);

5:カスタムデータの追加

    var event = new CustomEvent('myEvent',{ 'detail':{
        time: new Date().toLocalDateString();
    } });
    myButton.addEventListener('myEvent',function (e){
        debugger;
    },false);
    myButton.dispatchEvent(event);

javascript正規表現(7)(小事例)