普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。
![18905690-5227fad0c27b7467.png](https://i-blog.csdnimg.cn/blog_migrate/9ef7260302e8407351544172f46cd08d.png)
内容都是自己总结的,不免会出现错误或者bug,欢迎更正和补充,本篇内容也会不断更新
1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
我们都知道js通过style不可以获取行外样式,当我们需要获取行外样式时:
我们一般通过这两个方法获取行外样式:
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
function getStyle(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
2关于为一个元素绑定两个相同事件:attachEvent/attachEventLister 出现的兼容问题
事件绑定:(不兼容需要两个结合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false); //这个事件名没有on
多事件绑定封装成一个兼容函数:
function addEvent(ele,type,cb){
if(ele.addEventListener){
ele.addEventListener(type,cb)
}else if(ele.attachEvent){
ele.attachEvent("on"+type,cb)
}else{
ele["on"+type] = cb;
}
}
3监听事件的删除 removeEventListener/detachEvent
function removeEvent(ele,type,cb){
if(ele.removeEventListener){
ele.removeEventListener(type,cb)
}else if(ele.detachEvent){
ele.detachEvent("on"+type,cb)
}else{
ele["on"+type] = null;
}
}
4关于使用 event对象,出现的兼容性问题
ob.onclick=function(eve) {
//事件对象的兼容写法
var e=eve || window.event;
5取消默认事件
w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;**·
preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。
function stopDefault(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false;
}
}
6取消冒泡事件
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true**·
stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
7事件源的兼容写法
在事件中,当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件,当点击a发生onclick事件时,事件源就是a标签,当点击input发送onclic事件是,事件源就是input。
如何获取事件源?
IE下:window.event.srcElement
标准下:event.target
由此可见,我们是通过事件对象获取到的事件源
ob.onclick=function(eve) {
//事件源的兼容写法
var e=eve || window.event;
var t=e.target || e.srcElement;
8键盘事件的兼容写法
IE下:event.which
标准下:event.keyCode
ob.onclick=function(eve) {
//键盘事件的兼容
var e=eve || window.event;
var keyC=eve.keyCode || eve.which;
9 下面列数一些常见的keyCode值
event.keyCode 返回当前按键的ASCII码
空格 32
回车 13
左 37
上 38
右 39
下 40
ctrlKey 判断ctrl是否被按下,按下返回true
shiftKey 判断shift是否被按下,按下返回true
altKey 判断alt是否被按下,按下返回true