关于JavaScript中自定义事件绑定对象方法的说明

基于JavaScript弱类型的特点,我们可以通过重构对象方法来实现绑定事件的机制(当调用某个对象方法时总是触发调用我们自定义的方法):

/**
* 定义事件绑定方法
* obj:要绑定事件的对象
* target:要绑定事件的对象方法名
* handler:要绑定的事件
* toTop:是否优先执行事件
*/
function addEvent(obj, target, handler, toTop) {
    // 判断参数是否有效
    if (obj && target && typeof (handler) == "function") {
        // 获取对象obj中名称为target的成员
        var fun = obj[target];
        // 重构对象obj的target成员
        obj[target] = function () {
            // 判断要绑定的方法是否优先执行
            if (toTop) {
                // 调用要绑定的方法
                var result = handler.apply(obj, arguments);
                // 返回false则终止事件冒泡
                if (result !== false) {
                    // 判断对象obj的target成员是否为方法
                    if (typeof (fun) == "function") {
                        // 调用对象obj的原始target方法
                        result = fun.apply(obj, arguments);
                    }
                }
                return result;
            } else {
                // 定义返回结果
                var result = undefined;
                // 判断对象obj的target成员是否为方法
                if (typeof (fun) == "function") {
                    // 调用对象obj的原始target方法
                    result = fun.apply(obj, arguments);
                }
                // 调用要绑定的方法,返回false则终止事件冒泡
                if (handler.apply(obj, arguments) === false) {
                    return false;
                } else {
                    // 返回原始结果
                    return result;
                }
            }
        }
    }
}

// 为window对象的encodeURIComponent方法绑定事件
addEvent(window, "encodeURIComponent", function (url) {
    alert(url);
}, true);
// 调用方法触发事件
encodeURIComponent("index.html");

发表评论