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