什么是事宜
事宜流——形貌的是从页面中吸收事宜的递次。
事宜冒泡：由详细的元素吸收逐级通报到最不详细的那一个节点。
事宜捕捉:由不太详细的节点应当更早吸收到事宜，而最详细的节点末了吸收到事宜
运用事宜处置惩罚顺序
html事宜处置惩罚顺序。瑕玷：html代码和js代码严密耦合。
DOM0级事宜处置惩罚顺序。
DOM2级事宜处置惩罚顺序。
DOM2级事宜处置惩罚顺序定义了两个要领：用于处置惩罚指定和删除事宜处置惩罚顺序。
addEventListener（）和removeEventListener（）吸收三个参数：要处置惩罚的事宜名，作为事宜处置惩罚顺序的函数和布尔值
//btn3.addEventListener('click',message,false);
IE事宜处置惩罚顺序
attachEvent（）增加事宜， detachEvent（）删除事宜
吸收雷同的两个参数：事宜处置惩罚顺序的称号和时刻处置惩罚顺序的函数。不到场布尔值的原因是IE8只支撑事宜冒泡
跨浏览器处理
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.removeEventListener(type,handler,false);
}
else if(element.detachEvent){
element.detachEvent('on'+type,handler);
}
else{
element['on'+type] = handler;
}
}
//猎取事宜对象
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getTarget:function(event){
if(event.target){
return event.target;
}
else{
return event.srcElement;
}
},
//阻挠事宜冒泡
getStopPropagetion:function(event){
if(event.stopPropagation){
return event.stopPropagation();
}
else{
return event.cancelBubble=true;
}
},
//阻挠事宜默许行动
getPreventDefault:function(event){
if(event.preventDefault){
return event.preventDefault();
}
else{
return event.returnValue=false;
}
}
}
eventUtil.addHandler(btn3,'click', message);
eventUtil.removeHandler(btn3,'click', message); 事宜对象
在触发DOM上的事宜都邑发作一个对象。
事宜对象event
DOM中的事宜对象。
（1）type属性，猎取事宜范例。event.type （2）target属性，猎取事宜目的。 （3）stopPropagation（）要领，用于阻挠事宜冒泡。 （4）preventDefault（）要领，阻挠事宜的默许行动。2.IE中的事宜对象
（1）type属性，猎取事宜对象 （2）srcElement属性，猎取事宜对象 （3）cancelBubble=true要领，用于阻挠事宜冒泡 （4）returnValue=false ，阻挠事宜的默许行动。
事宜范例
鼠标事宜
MouseEvent对象
属性 //鼠标事宜发作时，鼠标的位置
-clientX,clientY //和页面的间隔
-screntX,screntY //和屏幕的间隔
-ctrlKey,shiftKey,altKey,metaKey //当事宜触发是，键盘是按下的，则为true
-button(0,1,2) 触发递次 
//一个窗口拖动的例子
//封装一个猎取元素的要领，防备涌现IE不兼容等题目
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;
}
window.onload = drag;
//在题目区按下
function drag(){
var oTitile = getByClass("login_logo_webqq","loginPanel")[0];
//挪动
oTitile.onmousedown = fnDown;
//封闭窗口
var oClose = document.getElementById("ui_boxyClose");
oClose.onclick = function(){
document.getElementById("loginPanel").style.display="none";
}
}
//在页面中挪动
//开释鼠标时住手挪动
function fnDown(){
var oDrag = document.getElementById("loginPanel");
document.onmousemove = function(event){
event = event || window.event;//浏览器兼容
oDrag.style.left = event.clientX + "px";
oDrag.style.top = event.clientY + "px";
}
//开释鼠标
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup - null;
}
}键盘事宜
事宜代办
事宜代办在JS天下中一个异常有效也很风趣的功用。当我们须要对许多元素增加事宜的时刻，能够经由过程将事宜增加到它们的父节点而将事宜托付给父节点来触发处置惩罚函数。这重要得益于浏览器的事宜冒泡机制
例子
//html
<ul id="list">
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
<li id="item4">item4</li>
</ul>
//js
window.onload=function(){
var ulNode=document.getElementById("list");
ulNode.addEventListener('click',function(e){
if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*推断目的事宜是不是为li*/
alert(e.target.innerHTML);
}
},false);
}
为父节点增加一个click事宜，当子节点被点击的时刻，click事宜会从子节点最先向上冒泡。父节点捕捉到事宜以后，经由过程推断e.target.nodeName来推断是不是为我们须要处置惩罚的节点。而且经由过程e.target拿到了被点击的Li节点。从而能够猎取到响应的信息，并作处置惩罚
