利用懒性模式实现事件绑定,顺便实现阻止事件冒泡

利用懒性模式实现事件绑定， 可以减少每次都去判断环境是否为IE等， 提高性能。

function on(dom, type, fn) {
        var d = document;
	if(d.addEventListener) {
		on = function(dom, type, fn) {
			dom.addEventListener(type, fn, false);
		}
	} else if(d.attachEvent) {
		on = function(dom, type, fn) {
			dom.attachEvent('on' + type, fn);
		}
	} else {
		on = function(dom, type, fn) {
			dom['on' + type] = fn;
		}
	}
	return on(dom, type, fn); //懒性模式
}    

　　

我们还可以设置一个事件点击次数状态tm， 如果tm为true， 则事件只允许单次点击， 否则则可以多次触发。

在此之前我需要了解一下事件解绑:
首先通过 dom 的 onclick 类似属性设置的事件,对于类似绑定的事件都可以用dom.onclick = null;来解绑事件。
其次通过 addEventListener绑定的事件可以使用 removeEventListener来解绑，这里要注意removeEventListener
接受的参数和addEventListener是一样的,ps:

<div id = "click"> CLICK </div>

var click = document.getElementById('click');
click.addEventListener('click', test);
function test(event) {
	console.log(1);
}
click.removeEventListener('click', test, true);

这里发现事件并没有取消绑定， 就是因为原来参数和绑定时候传入的不一致，我们改成false之后发现事件取消了。
最后一种,就是detachEvent解绑attachEvent事件。

接下来就可以利用传入的tm参数做事情了。

function eventOn(dom, type, fn, tm) {
        var d = document;
	if(d.addEventListener) {
		on = function(dom, type, fn, tm) {
			var newfn = fn;
			if(tm) {
				newfn = function() {
					dom.removeEventListener(type, newfn, false);
					fn();
				}
			}
			dom.addEventListener(type, newfn, false);
		}
	} else if(d.attachEvent) {
		on = function(dom, type, fn, tm) {
			var newfn = fn;
			if(tm) {
				newfn = function() {
					dom.detachEvent('on' + type, newfn);
					fn();
				}
			}
			dom.attachEvent('on' + type, newfn);
		}
	} else {
		on = function(dom, type, fn, tm) {
			var newfn = fn;
			if(tm) {
				newfn = function() {
					dom['on' + type] = null;
					fn();
				}
			}
			dom['on' + type] = newfn;
		}
	}

	return on(dom, type, fn, tm); //懒性模式
}

//测试
eventOn(document.getElementById("room"), 'click', function() {
	alert('1');
}, true); //一次绑定

eventOn(document.getElementById("room"), 'click', function() {
	alert('1');
}); //多次绑定

甚至我们还可以为事件增加事件点击后阻止事件传播。

//阻止事件传播我们可以用

if(typeof e.preventDefault === "function") {
	e.preventDefault();
	e.stopPropagation();
} else {
	e.returnValue = false;
	e.cancelBubble = true;
}

所以结果为：

function eventOn(dom, type, fn, tm) {
        var d = document;
	function pd() {
		var e = this;
		if(typeof e.preventDefault === "function") {
			e.preventDefault();
			e.stopPropagation();
		} else {
			e.returnValue = false;
			e.cancelBubble = true;
		}
	}
	if(d.addEventListener) {
		on = function(dom, type, fn, tm) {
			var newfn = fn;
			if(tm) {
				newfn = function(e) {
					dom.removeEventListener(type, newfn, false);
					fn();
					pd.call(e);
				}
			} else {
				newfn = function(e) {
					fn();
					pd.call(e);
				}
			}
			dom.addEventListener(type, newfn, false);
		}
	} else if(d.attachEvent) {
		on = function(dom, type, fn, tm) {
			var newfn = fn;
			if(tm) {
				newfn = function(e) {
					dom.detachEvent('on' + type, newfn);
					fn();
					pd.call(e);
				}
			} else {
				newfn = function(e) {
					fn();
					pd.call(e);
				}
			}
			dom.attachEvent('on' + type, newfn);
		}
	} else {
		on = function(dom, type, fn, tm) {
			var newfn = fn;
			if(tm) {
				newfn = function(e) {
					dom['on' + type] = null;
					fn();
					pd.call(e);
				}
			} else {
				newfn = function(e) {
					fn();
					pd.call(e);
				}
			}
			dom['on' + type] = newfn;
		}
	}
	return on(dom, type, fn, tm); //懒性模式
}

//测试
eventOn(document.getElementById("room"), 'click', function() {
	alert('1');
}, true); //一次绑定

eventOn(document.getElementById("room"), 'click', function() {
	alert('1');
}); //多次绑定

这样就实现了事件绑定和阻止事件冒泡。