事件委托從字面意思上理解就是把事件委托給別人做鲫骗。這樣有什么好處呢犬耻？設(shè)想一下，一個(gè)ul里有很多l(xiāng)i挎峦，現(xiàn)在要給每一個(gè)li都添加點(diǎn)擊事件香追，就需要循環(huán)給li添加事件，這樣性能會(huì)很差坦胶。這時(shí)候就可以使用事件委托解決。先了解下他的原理：利用事件冒泡，把子元素的事件添加到父元素上顿苇，觸發(fā)事件執(zhí)行峭咒。
需要注意的地方在下面的demo里都注釋出來(lái)了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>點(diǎn)我</li>
<p>點(diǎn)我沒用</p>
<li>點(diǎn)我</li>
<p>點(diǎn)我也沒用</p>
<li>點(diǎn)我</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)移入移出事件時(shí)不能使用onmouseenter和onmouseleave纪岁，
//因?yàn)樗麄z不支持事件冒泡
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>
