首页 » 性感的程序员,水哥专栏 » 【JavaScript 入门】类 jQuery 式的事件绑定(兼容主流浏览器内核)

【JavaScript 入门】类 jQuery 式的事件绑定(兼容主流浏览器内核)

可能很多 JavaScript 初学者在熟悉了它的基本语法之后,往往会先用 jQuery实践网页开发。先做出点实用的东西来,有些直观的感受,再倒回来对 JavaScript 深入浅出

这种方法的学习曲线比较平滑,利于大家愉快地发现、感悟 JavaScript 的简洁与灵活、优雅与强大~

我今天的 Coding 正好遇到了必须用纯 JS 来做的地方,就和大家来分享一下手敲的 JS 事件绑定的兼容性封装 ——

function Event_Bind(_Element, _Type, _CallBack, _unBind) {
    var _CB_ = function (Event) {
        EO = self.event || Event;
        EO.target = EO.srcElement || EO.target;
        if (! _CallBack.call(_Element, EO))
            if (EO.returnValue) {
                EO.returnValue = false;
                EO.cancelBubble = true;
            } else {
                EO.preventDefault();
                EO.stopPropagation();
            };
    };
    if (_Element.attachEvent)
        _Element[ (_unBind ? 'de' : 'at') + 'tachEvent'](
            'on' + ((_Type == 'input') ? 'propertychange' : _Type),
            _CB_
        );
    else
        _Element[
            (_unBind ? 'remove' : 'add') + 'EventListener'
        ](_Type, _CB_, false);
}

示例代码 ——

Var Event_Handle = function (EO) {
    var ET = EO.target;
    console.log(ET);

    if (ET.tagName.toLowerCase() == 'a') {
        open(ET.href, '_blank');
        return false;
    }
};
// 事件绑定
Event_Bind(document.body, 'click', Event_Handle);

// 事件解绑
Event_Bind(document.body, 'click', Event_Handle, true);

【参考文章】http://vaotoo.com/r/15018