事件委托從字面意思上理解就是把事件委托給別人做。這樣有什么好處呢？設(shè)想一下，一個ul里有很多l(xiāng)i，現(xiàn)在要給每一個li都添加點擊事件，就需要循環(huán)給li添加事件，這樣性能會很差。這時候就可以使用事件委托解決。先了解下他的原理：利用事件冒泡，把子元素的事件添加到父元素上，觸發(fā)事件執(zhí)行。
需要注意的地方在下面的demo里都注釋出來了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>點我</li>
<p>點我沒用</p>
<li>點我</li>
<p>點我也沒用</p>
<li>點我</li>
</ul>
<script>
var oUl = document.getElementById("list");
oUl.onclick = function(event){
event = event || window.event;
//獲取事件源(需要考慮兼容,前者標(biāo)準(zhǔn)瀏覽器,后者IE)
var target = event.target || event.srcElement;
console.log(target.nodeName);
//這里注意獲取到的nodeName的值全為大寫
if (target.nodeName == "LI") {
alert("hello");
}
};
//使用事件委托寫鼠標(biāo)移入移出事件時不能使用onmouseenter和onmouseleave，
//因為他倆不支持事件冒泡
oUl.onmouseover = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if (target.nodeName == "P") {
target.style.background = "green";
}
};
oUl.onmouseout = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if (target.nodeName == "P") {
target.style.background = "";
}
};
</script>
</body>
</html>
