兼容性问题

在获取元素css样式的时候

1. 标准浏览器(标准浏览器包括：谷歌，火狐，ie9以上)下使用 getComputedStyle(obj元素).属性
2. 在ie8以下不支持上面的方法会报错，ie内核支持： obj元素.currentStyle.属性

currentStyle这个方法火狐和谷歌不支持  

 

节点操作，获取子节点

1、获取子节点的方法： obj.childNodes

标准浏览器： childNodes 获取到的的内容包括空白节点和元素节点

非标准浏览器下： 只包含元素节点

2、获取第一个子元素    obj.firstChild

标准浏览器下：obj.firstChild  这个方法获取到包括空白节点  和   元素节点

非标准浏览器下：obj.firstChild只包含元素节点

标准浏览器下的另一个方法：obj.firstElementChild 获取的只有元素节点

3、获取其他兄弟的兼容性函数封装  

事件对象

事件对象： 当触发事件的时候会产生一个事件对象event ,这个事件对象中包含与这个事件有关的所有信息

1. ie和谷歌，在全局window下面，可以直接打印event相关的信息,输出是未定义（在没有事件发生的时候）, 有事件发生的时候会打印出关于这个事件的所有信息
2. 火狐只支持以事件处理函数的第一个参数的形式,而ie6,7,8不支持以事件函数的第一个参数的形式，但不会报错

 

事件源

事件对象里面有一个属性叫事件源，事件源就是那个对象触发的这个事件

比如点击的是div盒子，那么这个盒子就是这个点击事件的事件源

标准浏览器下：target

ie浏览器下: sreElement

谷歌支持上面的两种

事件的绑定和解绑

1. w3c认为有事件捕获和事件冒泡，但ie认为没有事件捕获
2. 事件的绑定

标准浏览器下支持：obj.addEventListener(事件名称，事件函数，false);//第三个参数表示是否捕获，false:不捕获

ie浏览器下支持：obj.attachEvent("on"+事件名，事件函数);

 

 

事件的解绑

标准浏览器： obj.removeEventListenter(事件名,事件函数，false);

ie下：obj.detachEvent("on"+事件名,事件函数);

 

注意：1.如果用绑定函数绑定的事件，必须使用解绑函数进行解绑

2.如果用绑定函数绑定了多个事件，解绑的时候只能解绑最后绑定的一个事件

滚动事件

1、滚动事件：onscroll

在标准浏览器下：window.onscroll或document.onscroll

ie6,7,8,认为document没有onscroll事件，使用尽量window

2、垂直方向滚动条滚动过的距离顶部的距离 ：scrollTop

火狐下获取页面scrollTop的距离：document.documentEelement.scrollTop （谷歌不支持）

谷歌和ie：document.body.scrollTop

1. 取消默认行为

1.  return false;  这个如果当函数有返回值的时候就不能再用了
2. 标准浏览器下的方法：e.preventDefault();
3. ie内核下：e.returnValue = false;
4. ie如果在取消图片的默认行为的时候需要搭配 obj.setCapture()一起使用  (让图片设置全局捕获, 将鼠标的焦点放在图片上)

图片的事件完成之后，要释放图片的全局捕获：obj.releaseCapture()