事宜阶段
事宜分为三个阶段： 事宜捕捉 –> 事宜目标 –> 事宜冒泡
事宜捕捉和冒泡
事宜捕捉：事宜发作时（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而不是click ele.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假如多了，就不行了，我们运用事宜托付:
<!-- HTML -->
<table id="out" border="1" style="cursor: pointer;">
<tr>
<td>table01</td>
<td>table02</td>
<td>table03</td>
<td>table04</td>
<td>table05</td>
<td>table06</td>
<td>table07</td>
<td>table08</td>
<td>table09</td>
<td>table10</td>
</tr>
</table>
// 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";
} 