今天了解了js 的事件，以前写代码时并不会在意它的兼容问题，那么今天总结几个关于事件的兼容写法。
1、js中经常用的就是点击事件，它在chrome 、火狐以及IE浏览器下的兼容写法比较新奇，
document.onclik = function(e){
var oEvent = e || event;
注意，不要将var e=e||event; 写成 var e=event||e; ，这在FireFox下会提示错误，FireFox无法处理未声明未赋值的变量event
alert('x:'+oEvent.clientX + 'y:'+oEvent.clientY)
}
上述方式就是解决了兼容问题， alert('x:'+e.clientX + 'y:'+e.clientY) //兼容火狐
alert('x:'+event.clientX + 'y:'+event.clientY) //兼容chrome
2、键盘按下事件，它的兼容写法：
document.onkeydown = function(e){
if(e.keyCode){
alert(e.keyCode)
}else{
alert(e.which)
}
}
3、阻止事件的冒泡，我理解的就是父子级同时都绑定了点击事件，如果执行了其中一个事件，另外一个的事件也会被执行，而且是从内往外执行，也就是子级先执行然后父级也被执行，就造成了不必要的麻烦，所以我们需要做的就是阻止事件的冒泡。首先阻止事件的冒泡，暂时先写两个方式：
w3c 的方法是 e.stopPropagation()，
IE 则是使用 e.cancelBubble = true；
兼容写法：
var e = e || window.event; //这里一定写成window.event,网上是说的是在IE(暂时仅限于8.0以下版本)下是行不通的，IE采用了一种非标准的方式，并不是将事件作为函数参数传入，而是将事件作为window对象的event属性：window.event、window.event.screenX...
if ( e && e.stopPropagation ){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
4、取消默认 事件，兼容写法
e.preventDefault（） // 火狐
e.returnValue = false
var e = e||window.event;
if(e && e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
5、事件的委托，一般来说此类方法会涉及到循环，用了事件委托之后，杜绝循环，执行效率更高，而且新创建的元素也可以执行该事件。
事件的委托的兼容写法：
oUl.onmouseover = function(e){
//为了兼容IE
var oEvent = e||window.event;
var target = oEvent.target|| oEvent.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
}
6、事件的捕获，将其进行封装：
function fun(ele,eve,handler,type){
if(ele.attchEvent){
ele.attachEvent("on"+eve,handler)
}else{
ele.addEventListener(eve,handler,type)
}
}
ele:元素
eve：事件
handler：函数
type：值为false 或 true
网友评论