1、ev = ev || event;
2、offsetParent
offsetParent的作用:
offsetLeft 和 offsetTop 是参照于offsetParent的内边距边界的;
Dom里所有的元素都是有offsetLeft 和 offsetTop的
parentNode和offsetParent的区别:
parentNode:直接父级
offsetParent:类似于css的包含块
通常情况下,我们在做项目之前,我们会清除系统滚动条,让body==html
html,body{heigth:100%;overflow:hidden;}
在这之后,offsetParent存在浏览器兼容性问题,具体如下:
本身定位为fixed
==> offsetParent:null(不是火狐)
==> offsetParent:body(火狐)
本身定位不为fixed(包括position:static;即没有定位)
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
注意点:
ie7以下,如果当前元素的某个父级触发了haslayout,
那么offsetParent就会被指向到这个触发了layout特性的父节点上
3、事件绑定(DOM2)
addEventListener()在低版本的ie会报错,低版本的ie我们用attachEvent();
addEventListener(事件名,事件函数,是否捕获)
1.可以设置捕获(true:捕获;false:冒泡;默认:false;)
2.事件名称没有on
3.事件执行的顺序是正序
4.this触发该事件的对象
5.一个元素上可以绑定多个同类事件,它们都会被执行
6.取消冒泡的手段:event.stopPropagation();
7.事件解绑:removeEventListener("事件名称", "事件回调", "捕获/冒泡")
attachEvent(事件名称,事件函数)
1.没有捕获(非标准的ie:ie6到10; 标准的ie底下有 )
2.事件名称有on
3.事件函数执行的顺序:标准ie:正序 非标准ie:倒序
4.this指向window
5.一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个
6.取消冒泡的手段:event.cancelBubble = true;;
7.事件解绑:detachEvent(事件名称,事件函数);
同步this
function bind(obj, evname, fn) {
if (obj.addEventListener) {//除ie低版本外都可以进入
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
}
bind(document, 'click', fn1);
滚轮事件兼容
滚轮事件主要是要兼容火狐浏览器的;
主要有以下几个方面的问题:
1、事件绑定的方式
非火狐浏览器可以中DOM0事件绑定
element.onmousewheel=function(){};
火狐浏览器
element.addEventListener("DOMMouseScroll",function(){});
2、滚轮事件的方向
非火狐浏览器
ev.wheelDelta;可以获取滚轮滚动的值;
向上滚:正值;
向下滚:负值;
火狐浏览器
ev.detail;可以获取滚轮滚动的值;
向上滚:负值;
向下滚:正值;
3、禁止滚轮的默认事件;
当有滚动条出现的时候,鼠标滚轮会默认触发滚动条;
非火狐浏览器
因为是DOM0事件:return:false;
火狐浏览器
因为是DOM2事件:ev.preventDefalt()