JavaScript 常用事件

一.Dom 常用的元素距离 元素的宽和高 clientWidth / Height：内容+padding+border -减去滚动条 之宽/高offsetWidth / Height：内容+padding+border 之宽/高scrollWidth / Height ：没有滚动条同 内容+padding-工具条+滚动的距离 元素与父元素距离 offsetLeft：与相对父元素的左偏移值offsetTop：与相对父元素的垂直偏移值offsetParent：相对父元素（元素的父辈元素有position非static值） 元素与父元素距离 elem.scrollTop：元素内容垂直滚动的距离elem.scrollLeft：元素内容水平滚动的距离 document.documentElement.scrollTop：页面的滚动距离 元素与可视化窗口的编辑 elem.getBoundingClientRect()Bounding： 边界Clien：客户端Rect：矩形 二.事件 事件基础

事件三要素：事件源，事件类型，事件处理程序。

事件的绑定：

btn.οnclick=function（）{}

btn.addEventListener(type,funName)

事件的解绑

btn.οnclick=null

btn.removeEventListener(type,funName)

注：匿名函数不能解绑

事件的传递 冒泡：最具体元素最先捕捉到事件，传递给最不具体的元素。捕获：最不具体的元素先捕获到事件，传递给最具体的元素。语法结构：elem.addEventListener(事件类型，响应时间，是否为捕获）阻止事件传递  event.stopPropagation()阻止默认事件  event.preventDefault() 事件对象  event.target ：源对象event.offsetX/Y ： 相对于事件源X / Y轴）偏移文字event.pageX/Y  ： X / Y轴相对于页面的位置 键盘事件 keypress ：按下d起keyup ：键盘d起keydown： 键盘按下  键盘事件参数 event.keyCode：键对应数字编码event.key：键盘的名称event.which等于keyCode  鼠标事件 mouseover： 鼠标移入mouseout ：鼠标移出mousedown ：鼠标按下mouseup ：鼠标d起mouseup ：鼠标d起click ：单击dblclick ：双击  鼠标事件对象参数 event.offsetLeft：相对于事件源对象水平距离event.offsetTop：相对于事件源对象垂直距离  表单事件 focus：获取焦点blur：失去焦点