DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中自定義事件用法分析
JavaScript中自定義事件用法分析
編輯:關於JavaScript     

本文實例講述了JavaScript中自定義事件用法。分享給大家供大家參考。具體分析如下:

在web前端開發中,很多人可能不會用到js的自定義事件,但如果是做一個相對來說比較大的項目,尤其是多人協同開發的時候,自定義事件就顯得很重要了。那麼,什麼是js中的自定義事件呢?我們先來看一個例子:
前端開發員A封裝了一個函數:
復制代碼 代碼如下:function move(){
    alert(a);  //以此來代表N行代碼
}
過段時間,前端開發員B要在A的基礎上豐富這個函數,於是,他會這樣寫:
復制代碼 代碼如下:function move(){
    alert(a);  //以此來代表N行代碼
    alert(b);  //以此來代表N行代碼
}
是不是發現了問題,B要注意和A的變量、函數等等的命名和沖突問題,又過段時間,前端開發員C也要豐富這個函數,於是:
復制代碼 代碼如下:function move(){
    alert(a);  //以此來代表N行代碼
    alert(b);  //以此來代表N行代碼
    alert(c);  //以此來代表N行代碼
}
這時候會很令人抓狂了,C寫起代碼來我敢肯定不會很輕松。解決這個問題的方法就是通過自定義事件,我們知道一個元素身上可以添加相同的事件而不會各自影響,如:
復制代碼 代碼如下:window.addEventListener('click',function(){
    alert(1);
} ,false);
window.addEventListener('click',function(){
    alert(2);
} ,false);
點擊頁面的時候,1和2都會彈出,那麼我們就可以用這種方法來定義我們的函數:
復制代碼 代碼如下:window.addEventListener('move',function(){
    alert(3);
} ,false);
window.addEventListener('move',function(){
    alert(4);
} ,false);
這樣,我們執行move();的時候就會彈出3和4,這裡的move就是自定義事件,它其實就是一個函數

下面看看如何給事件處理程序傳遞參數:
復制代碼 代碼如下://將有參數的函數封裝為無參數的函數
function createFunction(obj, strFunc) {
    var args = [];       //定義args 用於存儲傳遞給事件處理程序的參數
    if (!obj) obj = window; //如果是全局函數則obj=window;
    //得到傳遞給事件處理程序的參數
    for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
    //用無參數函數封裝事件處理程序的調用
    return function() {
        obj[strFunc].apply(obj, args); //將參數傳遞給指定的事件處理程序
    }
}
function class1() {
}
class1.prototype = {
    show: function() {
        this.onShow();
    },
    onShow: function() { }
}
function objOnShow(userName) {
    alert("hello," + userName);
}
function test() {
    var obj = new class1();
    var userName = "test";
    obj.onShow = createFunction(null, "objOnShow", userName);
    obj.show();
}

"因為事件機制僅傳遞一個函數的名稱,不帶有任何參數的信息,所以無法傳遞參數進去",這是後話了,“要解決這個問題,可以從相反的思路去考慮,不考慮怎麼把參數傳進去,而是考慮如何構建一個無需參數的事件處理程序,該程序是根據有參數的事件處理程序創建的,是一個外層的封裝。”,這裡的“該程序”就是createFunction函數,它巧妙地利用apply函數將帶參數的函數封裝為無參數函數。最後我們看看如何實現自定義事件的多綁定:
復制代碼 代碼如下:// 使自定義事件支持多綁定
//將有參數的函數封裝為無參數的函數
function createFunction(obj, strFunc) {
    var args = [];       //定義args 用於存儲傳遞給事件處理程序的參數
    if (!obj) obj = window; //如果是全局函數則obj=window;
    //得到傳遞給事件處理程序的參數
    for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
    //用無參數函數封裝事件處理程序的調用
    return function() {
        obj[strFunc].apply(obj, args); //將參數傳遞給指定的事件處理程序
    }
}
function class1() {
}
class1.prototype = {
    show: function() {
        if (this.onShow) {
            for (var i = 0; i < this.onShow.length; i++) {
                this.onShow[i]();
            }
        }
    },
    attachOnShow: function(_eHandler) {
        if (!this.onShow) { this.onShow = []; }
        this.onShow.push(_eHandler);
    }
}
function objOnShow(userName) {
    alert("hello," + userName);
}
function objOnShow2(testName) {
    alert("show:" + testName);
}
function test() {
    var obj = new class1();
    var userName = "your name";
    obj.attachOnShow(createFunction(null, "objOnShow", userName));
    obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
    obj.show();
}
我們看到,attachOnShow方法實現的基本思想是對數組的push操作,其實我們還可以在事件執行完成之後,移除事件處理函數,下面單獨實現:
復制代碼 代碼如下://將有參數的函數封裝為無參數的函數
function createFunction(obj, strFunc) {
    var args = [];       //定義args 用於存儲傳遞給事件處理程序的參數
    if (!obj) obj = window; //如果是全局函數則obj=window;
    //得到傳遞給事件處理程序的參數
    for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
    //用無參數函數封裝事件處理程序的調用
    return function() {
        obj[strFunc].apply(obj, args); //將參數傳遞給指定的事件處理程序
    }
}
function class1() {
}
class1.prototype = {
    show: function() {
        if (this.onShow) {
            for (var i = 0; i < this.onShow.length; i++) {
                this.onShow[i]();
            }
        }
    },
    attachOnShow: function(_eHandler) { // 附加事件
        if (!this.onShow) { this.onShow = []; }
        this.onShow.push(_eHandler);
    },
    detachOnShow: function(_eHandler) { // 移除事件
        if (!this.onShow) { this.onShow = []; }
        this.onShow.pop(_eHandler);
    }
}

function objOnShow(userName) {
    alert("hello," + userName);
}
function objOnShow2(testName) {
    alert("show:" + testName);
}
function test() {
    var obj = new class1();
    var userName = "your name";
    obj.attachOnShow(createFunction(null, "objOnShow", userName));
    obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
    obj.show();
    obj.detachOnShow(createFunction(null, "objOnShow", userName));
    obj.show(); // 移除一個,顯示剩余的一個
    obj.detachOnShow(createFunction(null, "objOnShow2", "test message"));
    obj.show(); // 兩個都移除,一個也不顯示
}

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved