js事件委托原理

js事件委托原理：把事件委托到父元素上，利用冒泡原理，当子元素点击时，由于冒泡原理，事件会冒泡到父元素上，父元素上面的事件就会触发执行。

1.子元素事件的效果相同

<ul id="ul">
<li>11111111</li>
<li>22222222</li>
<li>33333333</li>
<li>44444444</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul');
oUl.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li') {
alert(target.innerHTML);
}
}
}
</script>

2.子元素事件的效果不同

<div id="box">
<input type="button" id="add" value="添加">
<input type="button" id="remove" value="删除">
<input type="button" id="change" value="修改">
<input type="button" id="check" value="查验">
</div>
<script type="text/javascript">
var oBox = document.getElementById('box');
oBox.onclick =function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'input'){
switch(target.id){
case 'add':
alert('添加');
break;
case 'remove':
alert('删除');
break;
case 'change':
alert('修改');
break;
case 'check':
alert('查验');
break;
}
}
}
}
</script>

3.以上说的是现有DOM节点下的操作，那么新增的节点会有事件么？

<input type="button" name="" id="btn" value="添加">
<ul id="ul">
<li>11111111</li>
<li>22222222</li>
<li>33333333</li>
<li>44444444</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul');
var oLi = oUl.getElementsByTagName('li');
var num =4;
//事件委托，添加的子元素也有事件
oUl.onmouseover = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
};
oUl.onmouseout = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = "#fff";
}
};
//添加新节点
oBtn.onclick = function () {
num ++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
}

}

参考：https://www.cnblogs.com/liugang-vip/p/5616484.html