Js自学记录二

事件对象（event）

事件对象：用来获取事件的详细信息。例如：鼠标位置，键盘按键。
兼容性：event主要兼容IE。
兼容性处理：
function (ev){
var oEvent = ev || event;
}
以下事件对象都用oEvent

获取鼠标位置：
oEvent.clientX 获取鼠标横坐标
oEvent.clientY 获取鼠标纵坐标
注意：通过以上方法获取的鼠标坐标均为浏览器可视区坐标。

document的本质

执行document.childNodes[1].tagName代码可以发现，document的子节点为HTML。
结论：document可以看做一个虚拟节点，并且这个虚拟节点是和的父节点。

事件冒泡和事件默认行为

事件冒泡：当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。
事件默认行为：网页元素，都有自己的默认行为，例如，单击超链接会跳转。

阻止事件冒泡：oEvent.cancelBubble = true;
阻止事件默认行为：return false；

鼠标事件

onmouseover 鼠标移入时触发
onmouseout 鼠标移除时触发
onmousemove 鼠标移动时触发
onmousedown 鼠标按键按下时触发
onmouseup 鼠标按键抬起时触发
oncontextmenu 当鼠标右键点击启动菜单的时候触发

oEvent.clientX 获取鼠标横坐标（可视区）
oEvent.clientY 获取鼠标纵坐标（可视区）
注意：oEvent见最上方，由于oEvent.clientX和oEvent.clientY获取的是鼠标在可视区的坐标，因此在使用鼠标事件的时候一定要加上scrollTop，否则当浏览器侧面滚动条滚动的时候会出现bug。
scrollTop获取方法：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

获取鼠标在页面的绝对位置函数封装

function getPos(ev){
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	var scrollLeft = document.documentElement.scrollTop || document.body.scrollLeft;
	return {x:ev.clientX + scrollLeft,y:ev.clientY + scrollTop};
}

键盘事件

onkeydown：键盘按键按下时触发
onkeyup：键盘案件抬起时触发

keyCode： 获取键盘按键Unicode值
使用方式：oEvent.keyCode

ctrlKey：指示当事件发生时,Ctrl 键是否被按下并保持住
使用方式：oEvent.ctrlKey

shiftKey: 指示当事件发生时，Shift键是否被按下并保持住
使用方式：oEvent.shiftKey

altKey：指示当事件发生时，Alt键是否被按下并保持住
使用方式：oEvent.altKey

事件绑定

IE方式：
attachEvent(事件名称，函数)，绑定事件处理函数
detachEvent(事件名称，函数)，解除绑定
DOM方式：
addEventListener(事件名称，函数，捕获)，绑定事件处理函数
removeEventListener(事件名称，函数，捕获)，解除绑定

在直接给元素添加事件的方式中，会出现这样的问题，当为一个元素添加两个事件的时候，后添加的事件会覆盖前面已经添加好的事件。而使用事件绑定会解决这个问题。

注意：IE方式中的事件名称要带有’on’(onclick,onload等)，DOM方式中的事件名称不带’on’(click,load等)。

事件捕获

setCapture() 整个浏览器的时间都聚焦到设置事件捕获的元素对象绑定的事件上。
使用方法：obj.setCapture() 整个浏览器的时间都聚焦到obj元素绑定的事件上。

releaseCapture() 释放捕获
使用方法：obj.releaseCapture() 解除对obj对象事件的捕获