Blend 自定義事件

概述

用戶開發(fā)應用中會大量使用事件功能。除了瀏覽器內(nèi)置的事件之外，BlendUI提供給用戶觸發(fā)和綁定自定義事件的能力。通過自定義事件，用戶可以輕松控制頁面數(shù)據(jù)傳遞、頁面切換。

監(jiān)聽頁面初始化事件

BlendUI中提供了一個監(jiān)聽頁面初始化方法，用戶可以在頁面初始化時觸發(fā)函數(shù)，進行頁面數(shù)據(jù)綁定、綁定監(jiān)聽事件等操作，大大方便了用戶處理消息。使用方法如下：

Blend.ui.layerInit("頁面id",function(dom){
    //dom操作，需要指定context為當前的dom
    $("#xx",dom).append("xx");
});

首頁index.html頁面默認頁面id為“0”，其余所創(chuàng)建的頁面id均由用戶自行定義不受限制。用戶如果要進行頁面dom操作時，需要指示其context。

一個實例：

document.addEventListener("blendready", function () {
    Blend.ui.layerInit("0", function (dom) {
        console.log("index.html init");
    });

    Blend.ui.layerInit("contentId",function(dom){
        console.log("content.html init");
    });
});

以上代碼定義了兩個頁面index.html和content.html的初始化函數(shù)。初始化函數(shù)中可以添加頁面的事件響應，詳見下小節(jié)。

添加監(jiān)聽事件

BlendUI提供了監(jiān)聽事件添加功能，用戶可以自行定義事件類型，可以在一個事件類型上關聯(lián)眾多操作。使用方法如下：

Blend.ui.on("eventType",function(event){
     //handler
});

eventType可以為用戶自定義的事件，也可以為系統(tǒng)自帶的事件類型，系統(tǒng)事件類型詳見：API文檔-自定義事件。

一個實例：

var handler = function(event){
    //event中detail字段保存有頁面id
    console.log(event['detail']);
};

Blend.ui.layerInit("頁面id",function(dom){
    Blend.ui.on("eventType",function(event){
        //event中data字段保存有fire方法傳遞的數(shù)據(jù)
        console.log(event['data']);
    });
    Blend.ui.on("eventType",handler});
});

以上代碼表示，我們?yōu)?code style="margin-right: 0px; margin-left: 0px; border: 1px solid rgb(221, 221, 221); padding-right: 0px; padding-left: 0px; background-color: rgb(248, 248, 248);">eventType綁定了兩個事件處理函數(shù)，此處我們使用了Function handle作為on方法的第二個參數(shù)，這種方式可以方便用戶進行事件解綁操作，詳見解綁事件。

當用戶需要添加的監(jiān)聽事件只需執(zhí)行一次，則可以使用once("eventType",callback)方法，使用方法同on("eventType",callback)。

一個實例：

var handler = function(event){
    //event中detail字段保存有頁面id
    console.log(event['detail']);
};

Blend.ui.layerInit("頁面id",function(dom){
    Blend.ui.once("eventType",handler);

    //觸發(fā)一次操作后，該自定義事件將會自動注銷不可再觸發(fā)
    Blend.ui.fire("eventType","頁面id");
});

觸發(fā)監(jiān)聽事件

綁定了事件之后，需要用戶控制進行觸發(fā)操作，這個觸發(fā)操作既可以觸發(fā)當前頁面的監(jiān)聽事件也可以觸發(fā)其他頁面的監(jiān)聽事件，通過這種方式，用戶也可以實現(xiàn)頁面間數(shù)據(jù)傳遞。使用方法如下：

Blend.ui.fire ("eventType","頁面id","數(shù)據(jù)");

第一個參數(shù)為用戶自定義事件名稱，第二參數(shù)標識要觸發(fā)哪個頁面的事件，第三個參數(shù)為要傳遞的數(shù)據(jù)，既可以是Object也可以是String

一個實例：

Blend.ui.layerInit("頁面1",function(dom){
    Blend.ui.on("eventA",function(event){
        //event中data字段保存有fire方法傳遞的數(shù)據(jù) "other"
        console.log(event['data']);
    });
});

Blend.ui.layerInit("頁面2",function(dom){
    Blend.ui.on("eventB",function(event){
        //event中data字段保存有fire方法傳遞的數(shù)據(jù) "myself"
        console.log(event['data']);
    });

    $("#button_1",dom).on("click",function(e){
        e.preventDefault();
        Blend.ui.fire("eventB","頁面2","myself");
    });

    $("#button_2",dom).on("click",function(e){
        e.preventDefault();
        Blend.ui.fire("eventA","頁面1","other");
    });
});

以上代碼展示了通過在頁面2上點擊Button觸發(fā)監(jiān)聽事件，既包括自身的事件也包括其他頁面的事件，同時也提供了一種頁面?zhèn)鬟f數(shù)據(jù)的方法，數(shù)據(jù)格式詳情參見API文檔。

取消監(jiān)聽事件

在用戶綁定了事件之后，如果用戶想要取消綁定的事件可以使用BlendUI中的off方法，使用方法如下：

Blend.ui.off("eventType",[handler]);

一個實例：

var handler = function(event){
    console.log(event['data']);
};
Blend.ui.layerInit("layerId", function(dom){
    Blend.ui.on("eventType", function(event){
        console.log(event['detail']);
    });

    Blend.ui.on("eventType", handler});

    $("#button_1",dom).on("click",function(e){
        e.preventDefault();
        //取消與eventType綁定的所有操作
        Blend.ui.off("eventType");
    });

    $("#button_2",dom).on("click",function(e){
        e.preventDefault();
        //取消與eventType綁定的handler操作
        Blend.ui.off("eventType",handler);
    });
});

off第二個參數(shù)可以為空也可以為handler，只有這種句柄方式可以解除特定綁定，所以優(yōu)先推薦句柄方式。