【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);