offset client scroll pageXOffset属性，mouseover与mouseenter事件区别

Posted 2021-03-02 article-record

offset 概述

使用 offset 系列属性可以动态得到该元素的位置（偏移），大小等

offset系列属性	说明（只读属性）
ele.offsetTop	返回元素带有定位的父元素上方的偏移，父元素没有定位以body为准
ele.offsetLeft	返回元素带有定位的父元素左边的偏移，父元素没有定位以body为准
ele.offsetWidth	返回自身包括padding，边框，内容去的宽度
ele.offsetHeight	返回自身包括padding，边框，内容去的高度
ele.offsetParent	返回该元素带有定位的父元素，如果没有父级返回body

元素可视区 client 系列

使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等；

client系列属性	说明
ele.clientTop	返回元素上边框大小
ele.clientLeft	返回元素做边框大小
ele.clientWidth	返回元素自身包含padding，内容宽度，不含边框
ele.clientHeight	返回元素自身包含padding，内容高度，不含边框

元素 scroll 系列属性

使用scroll系列的属性可以动态获取该元素的大小，滚动距离等

// onscroll 事件，滚动条滚动触发
div.addEventListener(‘scroll‘, function () {});
div.onscroll = function () {}

scroll系列属性	说明（元素）
ele.scrollTop	返回被卷去的上侧距离
ele.scrollLeft	返回被卷去的左侧距离
ele.scrollWidth	返回自身实际的内容（例：文字溢出后）宽度，包含padding，不含边框
ele.scrollHeight	返回自身实际的内容（例：文字溢出后）高度，包含padding，不含边框

页面被卷去的距离	说明（整个页面）
window.pageYOffset	页面被卷去的头部
window.pageXOffset	页面被卷去的左边

mouseover 和 mouseenter 事件的区别

• 当鼠标移动到元素上时都会触发事件
• mouseover 经过自身盒子会触发，经过子盒子也会触发，mouseenter 只会经过自身和子会触发
• mouseenter 不会存在事件冒泡；mouseover 有冒泡的概念；
• 跟mouseenter搭配，鼠标离开时 mouseleave 同样不会冒泡