![js以类似jquery的模式绑定事件]( "js以类似jquery的模式绑定事件")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="a"></button>
</body>
</html>
<script>
var $ = function (el) {
return new _$(el);
};
var _$ = function (el) {
this.el = (el && el.nodeType == ) ? el : document;
};
_$.prototype = {
constructor: _$,
addEvent: function (type, fn, capture) {
var el = this.el;
if (window.addEventListener) {
el.addEventListener(type, fn, capture);
var ev = document.createEvent("HTMLEvents");
ev.initEvent(type, capture || false, false);
// 在元素上存储创建的事件，方便自定义触发
if (!el["ev" + type]) {
el["ev" + type] = ev;
}
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
if (isNaN(el["cu" + type])) {
// 自定义属性，触发事件用
el["cu" + type] = ;
}
var fnEv = function (event) {
if (event.propertyName == "cu" + type) {
fn.call(el);
}
};
el.attachEvent("onpropertychange", fnEv);
// 在元素上存储绑定的propertychange事件，方便删除
if (!el["ev" + type]) {
el["ev" + type] = [fnEv];
} else {
el["ev" + type].push(fnEv);
}
}
return this;
},
fireEvent: function (type) {
var el = this.el;
if (typeof type === "string") {
if (document.dispatchEvent) {
if (el["ev" + type]) {
el.dispatchEvent(el["ev" + type]);
}
} else if (document.attachEvent) {
// 改变对应自定义属性，触发自定义事件
el["cu" + type]++;
}
}
return this;
},
removeEvent: function (type, fn, capture) {
var el = this.el;
if (window.removeEventListener) {
el.removeEventListener(type, fn, capture || false);
} else if (document.attachEvent) {
el.detachEvent("on" + type, fn);
var arrEv = el["ev" + type];
if (arrEv instanceof Array) {
for (var i = ; i < arrEv.length; i += ) {
// 删除该方法名下所有绑定的propertychange事件
el.detachEvent("onpropertychange", arrEv[i]);
}
}
}
return this;
}
};
var dom = document.querySelector(".a");
var test = $(dom).addEvent("alert", function () {
alert("弹弹弹，弹走鱼尾纹~~");
}, false);
test.fireEvent("alert");
</script>
