前端JS-Day21

client系列：获得可视区域的相关信息

clientWidth和offsetWidth区别：clientWidth只包含内容和padding，offsetWidth包含内容和内外边框。

 

 

立即执行函数：无需调用，直接执行。且独立创建了一个作用域。

(function() {})()；  (function(){}())；  两种写法
像素比：即devicePixelRatio值。
pageshow事件：重新加载页面触发的事件。
pageshow和load区别：往返缓存的存在

 

scroll系列：获取动态变化的元素属性

 

scrollWidth相较于offset和client仅返回自身宽度。

scrollTop属性：

 

 

 window.pageXOffset和window.pageYOffset为整个页面被卷曲的距离。

 

 

 三大系列总结：

offset系列：用于获取元素位置，offsetLeft和offsetTop。

client系列：用于获取元素大小，clientWidth和clientHeight。

scroll系列：用于获取滚动距离，scrollTop和scrollLeft。

页面滚动距离获取：window.pageXOffset和window.pageYOffset。

 

mouseover和mouseenter区别：mouseover经过自身和子元素都会触发事件，mouseenter仅经过自身会触发事件。所以mouseenter不会触发冒泡。

 

 

JS动画：目标对象是绝对定位

 

对动画函数进行封装后，不同对象对函数进行调用会造成不同对象使用相同定时器造成浪费，故采用分别设置定时器方法。

利用js动态语言的特点，给对象设置属性的特点，给对象设置定时器；

 

 // 封装函数,obj目标对象,target目标位置,sec定时时长,len单位时间位移距离
        function animations(obj, target, sec, len) {
            clearInterval(obj.timer); 
            // 防止函数多次进行,保证对象仅有一个定时器.
            obj.timer = setInterval(()=> {
                // 利用给对象设置属性的方式,给对象设置定时器.
                if(div.offsetLeft >= target) {
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + len + 'px';
            }, sec);
        }

 

缓动动画：令元素运动速度有所变化，常见例如令元素慢慢停下。