Blend 自定義事件

概述

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

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

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

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

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

一個(gè)實(shí)例：

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");
    });
});

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

添加監(jiān)聽事件

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

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

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

一個(gè)實(shí)例：

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綁定了兩個(gè)事件處理函數(shù)，此處我們使用了Function handle作為on方法的第二個(gè)參數(shù)，這種方式可以方便用戶進(jìn)行事件解綁操作，詳見解綁事件。

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

一個(gè)實(shí)例：

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

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

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

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

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

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

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

一個(gè)實(shí)例：

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上點(diǎn)擊Button觸發(fā)監(jiān)聽事件，既包括自身的事件也包括其他頁面的事件，同時(shí)也提供了一種頁面?zhèn)鬟f數(shù)據(jù)的方法，數(shù)據(jù)格式詳情參見API文檔。

取消監(jiān)聽事件

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

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

一個(gè)實(shí)例：

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第二個(gè)參數(shù)可以為空也可以為handler，只有這種句柄方式可以解除特定綁定，所以優(yōu)先推薦句柄方式。