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

Posted article-record

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了offset client scroll pageXOffset属性,mouseover与mouseenter事件区别相关的知识,希望对你有一定的参考价值。

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 页面被卷去的左边

mouseovermouseenter 事件的区别

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

以上是关于offset client scroll pageXOffset属性,mouseover与mouseenter事件区别的主要内容,如果未能解决你的问题,请参考以下文章

元素的client offset scroll三个系列

offset client scroll 三大系列

JSjs进阶--之JS三大家族:offset家族 Scroll家族 client家族

offset系列client系列scroll系列

offset,client,scroll的学习记录

offset,scroll,client三大系列