| 老IE浏览器 | 新版本IE和非IE浏览器 | |
|---|---|---|
| 事件绑定 | node.attrachEvent('onclick',fn) | node.addEventListener('click',fn,false) |
| 解除事件绑定 | node.detachEvent('onclick',fn) | node.removeEventListener('click',fn,false) |
| 阻止事件冒泡 | e.cancelBubble=true | e.stopPropagation() |
| 阻止默认事件 | e.returnValue=true | e.preventDefault() |
| 点击对象 | e.srcElement.innerText | e.target.innerText |
| this指的是什么？ | window | node |
node.addEventListener('click',fn,false) 里面的false表示监听只在冒泡阶段执行，默认为false,zz设置为true是捕获阶段执行
事件兼容这么麻烦~
怎么办呢？ 使用原生js只有封装！！！
事件绑定（统一this指向node）：
function addEvent(node,type,handler){
if(!node) return false;
if(node.addEventListener){
node.addEventListener(type,handler,false);
return true;
}
if(node.attrachEvent){
node['e'+type+handler]=handler;
node[type+handler]=function(){
node['e'+type+handler]=handler(window.event);
}
node.attrachEvent("on"+type,node[type+handler]);
return true;
}
return false;
}
解除事件绑定
在使用上一个事件绑定封装函数的基础上使用下面这个解除事件绑定封装函数
function removeEvent(node,type,handler){
if(!node) return false;
if(node.removeEventListener){
node.removeEventListener(type,handler,false);
return true;
}
if(node.detachEvent){
node.detachEvent("on"+type,node[type+handler]);
node[type+handler]=null;
return true;
}
return false;
}
function getEvent(e){
return e||window.event;
}
阻止事件冒泡
function stopPropagation(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
}
阻止默认事件
function preventDefault(){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=true;
}
}
点击的目标对象：
function target(){
return e.target||e.srcElement;
}