利用懒性模式实现事件绑定， 可以减少每次都去判断环境是否为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:CLICKvar 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');}); //多次绑定 这样就实现了事件绑定和阻止事件冒泡。