js中的事件委托
- - JavaScript - Web前端 - ITeye博客1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色.
obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); }或者写成 obj.attachEvent("onclick", function(){alert("测试");});
obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); }同样也可写在一起obj.addEventListener("click", function(){alert("测试");}, false);
考虑兼容性: if (window.attachEvent)//兼容IE { //IE 的事件代码 } else { //其它浏览器的事件代码 }
上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数:
版本一:
function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture);//DOM2.0 return true; } else if (elm.attachEvent) { var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+ return r; } else { elm['on' + evType] = fn;//DOM 0 } }
var addEvent=(function(){ if(document.addEventListener){ return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el[i],type,fn); } }else{ el.addEventListener(type,fn,false); } }; }else{ return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el[i],type,fn); } }else{ el.attachEvent(‘on‘+type,function(){ return fn.call(el,window.event); }); } }; } })();
方法三、事件 = 函数
例:obj.onclick = Foo;
1 |
obj.onclick=method1; |
2 |
obj.onclick=method2; |
3 |
obj.onclick=method3; |
如果这样写,那么只有 最后绑定的事件,这里是method3会被执行,此时应该用方法二的方法进行事件的绑定
区别IE6、IE7、IE8之间的方法:
var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if (isIE){ if (isIE6){ alert(”ie6″); }else if (isIE8){ alert(”ie8″); }else if (isIE7){ alert(”ie7″); } }