一.事件委托#
事件委托就是利用事件冒泡的原理，把事件添加到父元素或祖先元素上，触发执行效果
<input type="button" value="click me" id="btn6">
<script>
var btn6 = document.getElementById("btn6");
document.onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if(target == btn6){
alert(btn5.value);
}
}
</script>
事件委托优点
1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
document.addEventListener("click",function(event){
var target = event.target;
if(target == item1){
alert("hello item1");
}else if(target == item2){
alert("hello item2");
}else if(target == item3){
alert("hello item3");
}
})
</script>
2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var list = document.getElementById("list");
document.addEventListener("click",function(event){
var target = event.target;
if(target.nodeName == "LI"){
alert(target.innerHTML);
}
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode); list.appendChild(node);
</script>
当点击item4时，item4有事件响应。说明事件委托可以为新添加的
DOM元素动态的添加事件。
二.事件冒泡#
阻止事件冒泡
function stopBubble(e){ //如果传入事件对象且支持W3C的stopPropagation的用法
if(e && e.stopPropagation){ //即为非IE浏览器
e.stopPropagation();
}else{
//IE方式取消事件冒泡 //非标砖w3c有些谷歌，firfox也支持该属性
window.event.cancelBubble=true;
}
阻止事件默认行为
（1）事件绑定模式下的 return false
（2）事件监听模式下的 event.preventDefault() 和 event.returnValue = false；
（3）return false既可以阻止事件冒泡，又可以阻止事件默认行为
