事宜阶段
事宜分为三个阶段： 事宜捕捉 > 事宜目标 > 事宜冒泡
事宜捕捉和冒泡
事宜捕捉：事宜发作时（onclick,onmouseover……）起首发作在document上，然后顺次传递给body、……末了抵达目标节点（即事宜目标）。
事宜冒泡：事宜抵达事宜目标以后不会完毕，会逐层向上冒泡，直至document对象，跟事宜捕捉相反
事宜
onlick >事宜冒泡，重写onlick会掩盖之前属性，没有兼容性问题
el.Onclik= null; //解绑单击事宜，将onlick属性设为null即可
addEventListener(event.type, handle, boolean); IE8及以下不支撑，属于DOM2级的要领，可增加多个要领不被掩盖
//事宜范例没有on，false 示意在事宜第三阶段（冒泡）触发，true示意在事宜第一阶段（捕捉）触发。 假如handle是同一个要领，只实行一次。ele.addEventListener('click', function(){ }, false); //解绑事宜，参数和绑定一样ele.removeEventListener(event.type, handle, boolean);
attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可增加多个事宜处置惩罚顺序，只支撑冒泡阶段
//假如handle是同一个要领，绑定频频实行频频，这点和addEventListener差异,事宜范例要加on,比方onclick而不是clickele.attachEvent('onclick', function(){ }); //解绑事宜，参数和绑定一样ele.detachEvent("onclick", function(){ });
默许事宜行动：href=链接，submit表单提交等
return false; 阻挠独享属性（经由过程on这类体式格局）绑定的事宜的默许事宜
ele.Onclick= function() { …… //你的代码 return false; //经由过程返回false值阻挠默许事宜行动};
event.preventDefault( ); 阻挠经由过程 addEventListener( ) 增加的事宜的默许事宜
element.addEventListener("click", function(e){ var event = e || window.event; …… event.preventDefault( ); //阻挠默许事宜},false);
event.returnValue = false; 阻挠经由过程 attachEvent( ) 增加的事宜的默许事宜
element.attachEvent("onclick", function(e){ var event = e || window.event; …… event.returnValue = false; //阻挠默许事宜});
事宜封装
接下来我们把事宜绑定以及事宜解绑封装成为一个函数，兼容浏览器
// 事宜绑定function addEvent(element, eType, handle, bol) { if(element.addEventListener){ //假如支撑addEventListener element.addEventListener(eType, handle, bol); }else if(element.attachEvent){ //假如支撑attachEvent element.attachEvent("on"+eType, handle); }else{ //不然运用兼容的onclick绑定 element["on"+eType] = handle; }}
// 事宜解绑function removeEvent(element, eType, handle, bol) { if(element.addEventListener){ element.removeEventListener(eType, handle, bol); }else if(element.attachEvent){ element.detachEvent("on"+eType, handle); }else{ element["on"+eType] = null; }}
事宜冒泡、事宜捕捉阻挠
event.stopPropagation( ); // 阻挠事宜的进一步流传，包含（冒泡，捕捉），无参数event.cancelBubble = true; // true 为阻挠冒泡
事宜托付（事宜代办）
事宜托付：应用事宜冒泡的特征，将里层的事宜托付给外层事宜，依据event对象的属性举行事宜托付，改良机能。
运用事宜托付可以防止对特定的每一个节点增加事宜监听器；事宜监听器是被增加到它们的父元素上。事宜监听器会剖析从子元素冒泡上来的事宜，找到是哪个子元素的事宜。
来个例子吧，假如要零丁点击table内里的td，一般做法是for轮回给每一个td绑定事宜，td少的话机能什么差异，td假如多了，就不行了，我们运用事宜托付:
table01 table02 table03 table04 table05 table06 table07 table08 table09 table10 // JS var out = document.getElementById("out"); if(out.addEventListener){ out.addEventListener("click",function(e){ var e = e||window.event; //IE没有e.target，有e.srcElement var target = e.target||e.srcElement; //推断事宜目标是不是是td，是的话target即为目标节点td if(target.tagName.toLowerCase()=="td"){ changeStyle(target); console.log(target.innerHTML); } },false); }else{ out.attachEvent("onclick",function(e){ var e = e||window.event; //IE没有e.target，有e.srcElement var target = e.target||e.srcElement; //推断事宜目标是不是是td，是的话target即为目标节点td if(target.tagName.toLowerCase()=="td"){ changeStyle(target); console.log(target.innerHTML); } }); };}; function changeStyle(ele){ ele.innerHTML = "已点击" ele.style.background="#900"; ele.style.color = "#fff"; }