20150729 DOM事件探秘

事件流 描述的是从页面中接受事件的顺序。

IE事件冒泡流 NETSCAPE 事件捕获流

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）

事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

HTML事件的缺点：HTML和JS代码紧密耦合在一起，JS代码和HTML都需要进行修改

DOM0级事件处理程序
较传统的方式：把一个函数赋值给一个事件的处理程序属性
用的比较多的方法 简单、跨浏览器 没有HTML事件处理程序的缺点
eg:btn2.onclick=function(){}
btn2.onclick=null;

DOM2级事件处理程序 两个方法：用于处理指定和删除事件处理程序的操作。

        addEvenetListener()和removeEvenetListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。 处理的事件名去on,调用的函数去（）或者添加新函数，函数数量不限，事件数量不限。
eg:btn3.addEvenetListener("click",showMes,false);
  btn3.removeEvenetListener("click",showMes,false);传的参数相同

IE事件处理程序（IE Opera)
attachEvent()添加事件
detachEvent()删除事件
接受相同的两个参数：要处理的事件名、作为事件处理程序的函数  事件名不去on
不支持第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡

跨浏览器的事件处理程序
使用能力检测，封装一个方法。
eg:var eventUtil={
//添加句柄
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
}else{
element['on'+type]=handler;
}
},
//删除句柄
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListerner(type,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}else{
element['on'+type]=null;
}
}
}
eventUtil.addHandler(btn3,'click',showMes);

事件对象

在触发DOM上的事件时都会产生一个对象。

事件对象event  event.type

1、DOM中的事件对象
type属性，获取事件类型
target属性，获取事件目标
stopPropagation（）方法,阻止事件冒泡
preventDefault()方法，阻止事件的默认行为
bubbles属性 canselable属性

2、IE中的事件对象
type属性，获取事件类型
srcElement属性，获取事件目标 用||判断 event=event||window.event
cancleBubble属性，阻止事件冒泡，设置true阻止，false不阻止
returnValue属性，用于阻止事件的默认行为 默认为true,设置false阻止事件的默认行为。

事件类型
鼠标事件:鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标，不包括页面滚动的距离。
任何需要跟随鼠标拖动而移动的都需要绝对定位。
mousedown按下 mouseup释放 mousemove移动 mouseover鼠标滑过 mouseout鼠标离开
键盘事件
keyDown当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。onkeydown
keyPress当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。onkeypress
keyUp当用户释放键盘上的键时触发。onkeyup
EVENT对象的keyCode属性用于得到键盘对应键的键码值。

document.getElementsByClassName在IE10之前的浏览器不支持，获取Class需封装，代码如下：

function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
   eles=[],
   elements=oParent.getElementsByTagName(*);
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
return eles;

}

变手型：cursor:pointer;
console.log()控制台打印

随机数取整：Math.floor(Math.random()*8);