09 事件对象e client offset scroll 滚轮|键盘事件

1 事件对象:

事件执行的时候，会产生一系列的信息，这些信息会被浏览器收集起来冰封装为对象传递到事件函数中

IE中事件对象存储在window上，获取：window.evnet

常用的属性：

offsetX、offsetY：这两个属性标记的是鼠标位于元素内部的位置（padding），会受到子元素的影响

clientX clientY：这两个属性标记的是鼠标位于视口中的位置（x, y等价）

pageX pageY：这两个属性标记的是鼠标位于页面中的距离（layerX layerY等价）

screenX screenY：这两个属性标记了鼠标位于屏幕中的位置

2 事件总结

IE中：

dom0级 不能将事假对象传递进来
        attachEvent事件：可以将事件对象传递到事件函数中

高级浏览器

dom0级事件：可以将事件对象传递进来

dom2级事件：可以将事件对象传递到事件函数中

 

	事件对象	阻止冒泡	阻止默认行为	触发此事件的元素	其监听器触发事件的节点(监听事件者)	事件的类型	返回事件生成的日期和时间
高级	e	e.stopPropagation();	e.preventDefault()	e.target	e.currentTarget	type	timeStamp
IE	window.evnet	e.cancelBubble = true;	e.returnValue = false;	e.srcElement	this	type	没有

 

 

 

 

3 DOM属性 

scrollWidth	clientWidth	offsetWidth	clientLeft	scrollLeft	offsetLeft	offsetParent
实际内容的宽度	content + padding	content + padding + border	边框的厚度		距离自己定位父元素的左边的距离	定位父元素
对象的实际内容的宽度，不包边线宽度,会随对象中内容超过可视区后而变大。	对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。	对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。		返回或设置匹配元素的滚动条的水平位置	高级浏览器中，从子元素的边框外到定位父元素的边框内 在IE中，从子元素的边框外到定位父元素的边框外 （多算了一条父元素的边框）

 

 

 

 

 

4 jQuery中的快捷尺寸

width()，height():  获取content尺寸

innerWidth()，innerHeight()  获取content + padding尺寸

outerWidth()，outerHeight()  获取content + padding + border尺寸

outerWidth(true)，outerHeight(true)  获取content + padding + border + margin尺寸

5 jQuery中的定位值

$(dom).position()  获取对象, 包含元素的定位left值，还有定位top值(相对于父元素的偏移)

$(dom).offset(): 获取对象,对象中包含了元素到页面之间的top值和left值

6 页面卷曲值 

当页面的高度超过了视口的高度会出现滚动条，页面的卷动值指的是上面看不到的部分（被卷起来了）

document.body.scrollTop    在旧版本chrome中

document.documentElement.scrollTop   新版的chrome、火狐、IE, 

document.documentElement.clientWidth  获取视口的宽度：

document.documentElement.clientHeight  获取视口的高度：

7 卷曲事件  onscroll(高频事件)

触发方式：滚动鼠标滚轮， 按下键盘上的空格键 ， 按下键盘上的上下箭头， 键盘上的PgUp、PgDn

8 滚轮事件(高频事件)

事件名称：

onmousewheel

DOMMouseScroll （火狐）

事件对象

e.wheelDelta  向上为正，120的倍数

e.detail   向下为正，3的倍数  （火狐）

9 键盘事件

onkeydown：键盘按下

onkeyup：键盘弹起

onkeypress：字符输入

使用键盘事件

1 可以对document对象使用键盘事件

2 可以对输入框使用键盘事件

3 设置了tabindex属性的元素，可以使用键盘事件，tabindex用来设置按下tab键时，元素获取焦点的顺序。

key表示字符, keyCode属性获取键码，enter 13  space 32  箭头：左 37 上 38 右 39 下40

[转]关于pageYOffset、scrollTop和scrollY

在获取页面滚动的高度时候，往往有不同的获取方式，而且不同的属性浏览器支持稍有差别：

pageYOffset：属于window对象，IE9+ 、firefox、chrome，opera均支持该方式获取页面滚动高度值，并且会忽略Doctype定义规则。

window.pageYOffset;

 

scrollY: 属于window对象，firefox、chrome，opera支持，IE不支持，忽略Doctype规则。

window.scrollY;

 

页面如果未定义doctype文档头，所有的浏览器都支持document.body.scrollTop属性获取滚动高度。

document.body.scrollTop;

 

如果页面定义了doctype文档头，那么html元素上的scrollTop属相在IE、firefox，Opera(presto内核)下都可以获取都可以获取滚动高度值，而在chrome和safari下其值也为0.

document.documentElement.scrollTop; //Chrome,Safari下为0

 

因此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop

var scroll_top = window.pageYOffset || document.documentElement.scrollTop;