DOM 事件兼容性总结

• 事件对象

// 事件对象的兼容写法
oDiv.onclick = function(e){
    var ev =e||window.event;
    // e  非IE 写法
    // window.event IE写法
}

• 获取事件目标

//当使用事件委托时，需要获取当前触发事件的元素
oDiv.onclick = function(e){
    var t = e.target || e.srcElement;
    // e.target 非IE写法
    // e.srcElement IE写法
}

• 取消事件默认行为

// 取消事件默认行为
if (ev.preventDefault) { 
		ev.preventDefault();// 非IE写法 
} else { 
		ev.returnValue = false;// IE写法 
}

// DOM 0级事件可以直接在程序后面加return false;

• 阻止事件冒泡

// 阻止时间冒泡
if (ev.stopPropagation) { 
		ev.stopPropagation();// 非IE写法 
} else { 
		ev.cancelBubble = true;// IE写法 
}

• 绑定事件（三种）

//DOM 0级绑定事件
oDiv.onclick = function(){
	// 事件类型加'on'
    this.style.backgroundColor = 'red';
}

//DOM 2级绑定事件
oDiv.addEventListener('click',function(){
	// 事件类型不加'on',有三个参数，默认false即冒泡，false可以不写,true为捕获
       this.style.backgroundColor = 'red';
       this.style.color = 'yellow';
},false)

// IE绑定事件
oDiv.attachEvent('onclick',function(){
	// 两个参数，事件类型加'on',IE不支持事件捕获
       this.style.backgroundColor = 'red';
       this.style.color = 'yellow';
})
    

• 事件解绑

if (elet.removeEventListener) {	
	ele.removeEventListener(type, handler, false);//DOM 2级写法
} else if (ele.datachEvent) { 
	ele.detachEvent('on' + type, handler); //IE写法
} else { 
	ele['on' + type] = null; //DOM 0级解绑
}

• 获取非行间样式(非行内样式）

//获取非行间样式(行间样式也能获取)
function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr]; // IE写法
    }else{
        return window.getComputedStyle(ele,null)[attr];// 非IE写法
    }
}

• 获取页面滚动距离

// 获取页面滚动距离
window.onscroll = function(){
      var oTop = document.body.scrollTop  
      || document.documentElement.scrollTop;
}