js-网页特效 —— 淘宝flexible.js源码分析&三大系列总结

五、淘宝flexible.js源码分析

5.1、立即执行函数

不需要调用，立马执行。

调用：

主要作用:创建一个独立的作用域。避免了命名冲突问题。

5.2、下面三种情况都会刷新页面都会触发load事件。

1.a标签的超链接

2.F5或者刷新按钮 (强制刷新)

3.前进后退按钮

但是火狐中，有个特点，有个“往返缓存”, 这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的。

状态;实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

此时可以使用pageshow事件来触发。, 这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页面中, pageshow会在load事件触发后触发;根居事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件,注意这个事件给window添加。

六、三大系列总结

他们主要用法:

1.offset系列 经常用于获得元素位置offsetLeft offsetTop

2.client 经常用于获取元素大小clientWidth clientHeight

3.scroll 经常用于获取滚动距离scrollTop scrolleft

4.注意页面滚动的距离通过window.pageXoffset获得

mouseenter和mouseover的区别

● 当鼠标移动到元素上时就会触发mouseenter事件。

● 类似mouseover ,它们两者之间的差别是。

● mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发。

● 之所以这样,就是因为mouseenter不会冒泡。

● 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡。