事件委托
事件委托就是利用事件冒泡原理，把处理任务委托给父元素或祖先元素(通常用父元素)，我们通过目标对象来判断事件源，并执行事件处理。
示例1:
<!DOCTYPE html>
<html>
<head>
<title>事件委托1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul id="ul">
<li><a>对面</a></li>
<li><a>地方</a></li>
<li><a>法国</a></li>
<li><a>微软</a></li>
</ul>
<script>
var elul = document.getElementById('ul');
elul.addEventListener('click', getEvent, false);
function getEvent(e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() === 'a') {
alert(target.innerHTML);
}
}
</script>
</body>
</html>
示例2:
<!DOCTYPE html>
<html>
<head>
<title>事件委托2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul id="ul">
<li><a>美女</a></li>
<li><a>宝宝</a></li>
<li><a>价格</a></li>
<li><a>皇归</a></li>
</ul>
<script>
var elul = document.getElementById('ul');
elul.addEventListener('click', getEvent, false);
function getEvent(e) {
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() === 'a') {
alert(target.innerHTML);
}
if (target.nodeName.toLowerCase() === 'li') {
alert(target.innerHTML);
}
}
</script>
</body>
</html>