day33 js笔记 事件（下）2021.09.28

事件对象下的事件类型：  e.type          - 返回事件 比如:click contextmenu

事件对象下的鼠标信息：e.button    （- 0 鼠标的左键  - 1 鼠标的滚轮   - 2 鼠标的右键）

事件对象下的键盘码：e.keyCode     （回车键 13   - 空格 32  - 上下左右 37 38 39 40- 数字和字母是对应的ASCII）

 获取设置元素的位置及大小方法：

- offsetTop/offsetLeft 元素距离浏览器顶部和左侧的间距(margin和定位影响)

- offsetWidth/offsetHeight 元素宽高(包含content+padding+border) margin不包含

- clientWidth/clientHeight 元素宽高(包含content+padding) 不包含border和margin

获取鼠标坐标点：

- offsetX/offsetY 鼠标在元素盒子里面的位置(不受任何属性影响)

- clientX/clientY 鼠标相对于浏览器的坐标位置(页面有滚动条的时候不受影响,可视区域坐标)

- pageX/pageY 鼠标相对于浏览器的坐标位置(页面有滚动条的时候受影响,加上滚动条的间距)

 限制元素在一个范围内拖动：

- 获取当前浏览器的宽高大小 document.documentElement.clientHeight/clientWidth

获取元素盒子的宽高

- clientHeight/clientWidth 不包含边框的

- offsetWidth/offsetHeight 包含边框的

 阻止默认事件：

- 在事件方法函数中的最后添加 return false

- e.preventDefault() 事件对象的方法

- 兼容写法: e.returnValue = false

 事件委托：e.target         （将自己的事情委托给父级去处理）

 鼠标移出移入事件：

- onmouseover/onmouseout 触发冒泡

- onmouseenter/onmouseleave 不会触发冒泡