事件委托

利用DOM的冒泡机制，通过父元素监听子元素的点击事件
从而实现相应的点击效果，减少页面中点击事件注册
传统写法

<button onclick="addLi()">添加</button>
<ul class="box">
	<li>滚</li>
	<li>滚</li>
	<li>长</li>
	<li>江</li>
	<li>东</li>
	<li>逝</li>
	<li>水</li>
</ul>
<script>
	(function(){
        bindClick();
    })();
    function bindClick () {
        let lis = document.querySelectorAll('li');
        for (let i=0; i< lis.length; i++) {
            lis[i].onclick = logEvent;
        }
    }
    function logEvent(e) {
        console.log('e.target.innerHTML', e.target.innerHTML);
    }
    function addLi() {
        let ul = document.querySelector('ul');
        let element = document.createElement('li');
        element.innerHTML = '杨慎';
        ul.appendChild(element);
    }
</script>

以上，如果要给相应的li绑定事件需要用到循环，有多少li就需要添加多少点击事件，并且点击“添加”新增的li上面无点击事件，除非再次执行一次bindClick
事件委托方式

(function(){
        bindClick();
    })();
    function bindClick () {
        let ul = document.querySelector('ul');
        ul.addEventListener('click', logEvent, true);
    }
    function logEvent(e) {
        if (e.target.tagName.toLowerCase() === 'li') {
            console.log('e.target.innerHTML', e.target.innerHTML);
        }
    }
    function addLi() {
        let ul = document.querySelector('ul');
        let element = document.createElement('li');
        element.innerHTML = '杨慎';
        ul.appendChild(element);
    }

同样可以达到效果，并且新添加的li带有点击事件