今天了解了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