千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

JavaScript中的三大家族

offset家族 （只读属性）

• offsetParent 偏移的父元素
• offsetWidth 当前元素的宽度 （包含填充和边框）
• offsetHeight 当前元素的高度 （包含填充和边框）
• offsetLeft 基于偏移的父元素的左偏移量
• offsetTop 基于偏移的父元素的上偏移量

client家族 （只读属性）

• clientWidth 当前元素的宽度 （包含填充不包含边框）
• clientHeight 当前元素的高度 （包含填充不包含边框）
• clientTop 离上面的边框的距离
• clientLeft 离左边的边距的距离

scroll家族

• scrollTop 滚动栏离上面的距离 (可以设置的)
• scrollLeft 滚动栏离左边的距离 (可以设置的)
• scrollWidth 当前的元素的宽度 （包含填充和滚动栏距离）
• scrollHeight 当前的元素的高度 （包含填充和滚动栏距离）

事件监听器 （eventListener）

事件监听器，使用了观察者模式（observer）。它是添加事件的一种方式。

重点方法

• addEventListener 添加事件监听器
• removeEventListener 移除事件监听器

eventListener和属性指定事件的区别

• eventListener 一个事件可以指定多个处理函数，属性会覆盖
• eventListener 可以设置是否捕获 属性指定不行
• eventListener 添加的事件可以被移除 属性指定只能重新赋值为null进行移除
• eventListener 添加的事件名可以任意书写，由dispatchEvent来触发

拖拽

拖拽的相关事件

• 按下事件（mousedown）
• 移动事件 （mousemove）
• 弹起事件 （mouseup）

全局拖拽

思路

• 给拖拽的元素添加按下事件
• 在按下事件中记录鼠标在元素的位置（offsetX、offsetY）
• 在按下事件内容给全局(document)添加移动事件
• 在全局的移动事件内记录每次移动的位置
• 用移动的位置减去按下的位置得到对应的定位的位置
• 在全局的移动事件内设置元素的定位
• 在按下的事件内容给全局（document）添加弹起事件
• 在弹起事件内释放对应的移动事件和弹起事件