js自定义事件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="fdiv">ddd</div>
<script src="jquery-1.7.2.js"></script>
<script>
window.DomEvent = function(selector){
this.dom = document.getElementById(selector);
this.handler = [];
this.nativeHandler = [];
this.nativeEvent = ['mouseover','mousedown','mouseup','click',
'dbclick','mousemove','mouseout','keydown','keyup','keypress',
'submit','reset','change','focus','blur','load','unload',
'resize','scroll','error','abort'
]
}
DomEvent.prototype.bind = function(type, data, fn, eventFlag){
var nativeEventFlag = false;
for(var i=0; i<this.nativeEvent.length; i++){
if(this.nativeEvent[i] === type){
eventFlag = (eventFlag==false)?eventFlag:true;
var fun = function(e){
e.data = data;
fn(e);
}
if(window.addEventListener){
this.dom.addEventListener(type,fun,eventFlag);
this.nativeHandler.push({type:type, fn:fun, eventFlag:eventFlag, bindFn: fn});
}else if(window.attachEvent){
alert(1)
this.dom.attachEvent('on'+type, fun);
this.nativeHandler.push({type:type, fn:fun, bindFn: fn});
}
nativeEventFlag = true;
break;
}
}
if(!nativeEventFlag){
var fun = function(){
fn(data);
}
this.handler.push({type: type, fn:fun, bindFn: fn});
}
}
DomEvent.prototype.unbind = function(type, fn, eventFlag) {
var nativeEventFlag = false;
for (var i = 0; i < this.nativeEvent.length; i++) {
if (this.nativeEvent[i] === type) {
eventFlag = (eventFlag == false) ? eventFlag : true;
if (window.addEventListener) {
var len = this.nativeHandler.length;
for (var j = 0,k=0; j < len; j++,k++) {
if (this.nativeHandler[k].bindFn === fn && this.nativeHandler[k].eventFlag === eventFlag && this.nativeHandler[k].type === type) {
this.dom.removeEventListener(type, this.nativeHandler[k].fn, eventFlag);
this.nativeHandler.splice(k, 1);
k--;
}
}
} else if (window.attachEvent) {
var len = this.nativeHandler.length;
for (var j = 0,k=0; j < len; j++,k++) {
if (this.nativeHandler[k].bindFn === fn && this.nativeHandler[k].type === type) {
this.dom.detachEvent(type, this.nativeHandler[k].fn);
this.nativeHandler.splice(k, 1);
k--;
}
}
}
nativeEventFlag = true;
break;
}
}
if (!nativeEventFlag) {
var len = this.handler.length;
for (var i=0, k=0; i < len; i++,k++) {
if (this.handler[k].type === type && this.handler[k].bindFn.toString() === fn.toString()) {
this.handler.splice(k, 1);
k--;
}
}
}
}
DomEvent.prototype.unbindAll = function(type,eventFlag){
var nativeEventFlag = false;
for(var i=0; i<this.nativeEvent.length; i++){
if(this.nativeEvent[i] === type){
eventFlag = (eventFlag==false)?eventFlag:true;
if(window.addEventListener){
var len = this.nativeHandler.length;
for (var j = 0,k=0; j < len; j++,k++) {
if (this.nativeHandler[k].eventFlag === eventFlag && this.nativeHandler[k].type === type) {
this.dom.removeEventListener(type, this.nativeHandler[k].fn, eventFlag);
this.nativeHandler.splice(k, 1);
k--;
}
}
}else if(window.attachEvent){
var len = this.nativeHandler.length;
for (var j = 0,k=0; j < len; j++,k++) {
if (this.nativeHandler[k].type === type) {
this.dom.detachEvent(type, this.nativeHandler[k].fn);
this.nativeHandler.splice(k, 1);
k--;
}
}
}
nativeEventFlag = true;
break;
}
}
if(!nativeEventFlag){
for(var i=0; i<this.handler.length;){
if(this.handler[i].type===type){
this.handler.splice(i,1);
}
}
}
}
DomEvent.prototype.trigger = function(type){
var nativeEventFlag = false;
for(var i=0; i<this.nativeEvent.length; i++){
if(this.nativeEvent[i] === type){
nativeEventFlag = true;
break;
}
}
if(nativeEventFlag){
console.error("this event type is native event, can't trigger");
}else{
var checkTypeLive = false;
for(var i in this.handler){
if(this.handler[i].type === type){
checkTypeLive = true;
this.handler[i].fn();
}
}
if(!checkTypeLive){
console.error('this event type is not register!');
}
}
}
function a(data){
console.log(data)
}
function b(e){
console.log(e.data)
}
var dom = new DomEvent('fdiv');
dom.bind('click', {name:'haha'}, b);
dom.bind('click', {name:'dd'}, b);
dom.bind('focus', {name:'dd'}, b);
// dom.unbindAll('click', b);
dom.bind('switch', {name: 'gg'}, a);
dom.bind('switch', {name: 'aaa'}, a);
dom.unbindAll('switch')
dom.trigger('switch');
</script>
</body>
</html>