JS DOM (3)与事件

一.获取元素的css

1.elem.style.样式名

这个只能获取到行内样式

2.document.defaultView.getComputedStyle(elem,null).height;

这个可以获取计算好的样式

二.获取元素的宽与高

1.myp.clientHeight / clientWidth

获取myp的内容宽高+padding值

2.myp.offsetHeight / offsetWidth

获取myp的内容宽高+padding值+边框

3.myp.scrollHeight / scrollWidth

获取myp的内容宽高+padding值+滚动距离

 

三. 获取元素与父元素距离

1.offsetLeft,offsetTop

与相对父元素的水平 / 垂直偏移值

四.元素的滚动距离

1.elem.scrollTop / scrollLeft

元素的垂直 / 水平滚动距离

2.document.documentElement.scrollTop / scrollLeft

获取页面的垂直 / 水平滚动距离

五.元素与可视窗口的编辑

elem.getBoundingClientRect()

Bounding 边界   Client 客户端    Rect 矩形

六.事件的绑定与解绑

1.绑定

（1）btn.onclick =function () {}

（2）btn.addEventListener("click",fun名)

2.解绑

（1）btn.onclick =null

（2）btn.removeEventListener("click",fun名)

注意：匿名函数不能解绑

七.事件对象

1.event.target

事件的源对象

2.event.offsetX / offsetY  

相对于事件源位置的偏移

3.event.pageX / pageY

相对于页面位置的偏移

八.事件的传递

冒泡:最具体元素最先捕捉到事件,传递给最不具体的元素（document） 

捕获:最不具体的元素先捕获到事件,传递给最具体的元素

默认都是冒泡,使用捕获:

elem.addEventlistener(事件类型,响应函数,是否为捕获)
elem.addEventListener("click",doit,true)

event.stopPropagation（ ） 阻止事件传递
event.preventDefault （ ）阻止默认事件

九.键盘事件

keypress：

keydown和keyup中间一段时间触发的事件

keyup：

键盘放开立即触发该事件

keydown：

键盘按下立即触发该事件

键盘事件参数：

event.keyCode键对应数字编码
event.key键盘的名称
event.which等于keyCode

键盘代码:13就是enter键盘

十.鼠标事件

mouseover鼠标移入
mouseout鼠标移出
mousedown鼠标按下
mouseup鼠标弹起
mousemove鼠标移动
click单击
dblclick双击

 

十一.表单事件 

change 值发生变化
input 正在输入
focus 获取焦点
blur 失去焦点 

十二.页面事件 

load 加载
resize 窗口变化
scroll 滚动 

十三.事件代理  

把事件注册到其共有的父元素上，通过事件的冒泡机制

event.target 实现目标（本来注册给每个元素，注册到其共有的父元素上）

案列：实现简单的留言板

html，css代码：

 js代码：