事件委托
本节的知识需要DOM事件监听器、事件流、事件触发元素等基础。
事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。
示例1
<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',G,false);
function G(e) {
var ev = e || windows.event;
//e.srcRlement 是IE特有的
//e.target 是dom标准
var target= ev.target || ev.srcElement;
// target.nodeName 获取元素
if(target.nodeName.toLowerCase() ==="a"){
alert(target.innerHTML);
}
}
</script>
</body>
示例2
<body>
<ul id="ul">
<li>油条</li>
<li>肉包</li>
<li>米饺</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;
//e.srcElement 是IE特有的
//e.target 是dom标准
var target = ev.target || ev.srcElement;
// target.nodeName 获取元素。获取的元素是大写的，转换成小写
if (target.nodeName.toLowerCase() === "a") {
alert(target.innerHTML);
}
if (target.nodeName.toLowerCase() === "li") {
alert(target.innerHTML);
}
}
</script>
</body>
