DOM真正的事件委托

普通事件委托

ul.addEventListener('click', function(e) {
  if (e.target.tagName.tolowerCase() == 'li') {
    console.log('点击了li')
  }
})

存在问题

如果html是以下结构

<ul>
	<li>
		 <span></span>
 	</li>
	
	<li>
		<span></span>
	</li>
</ul>

如果用户点击到的是span，就并不会执行事件委托，但是实际上需要此需求，为了改进此bug需要对普通事件委托进行一个升级

改版事件委托

思路
如果不能直接判断点击元素是否为li，就判断它的父级是否为li

function eventDelegate(element, eventType, selector, fn) {
    element.addEventListener(eventType, e => {
        let el = e.target;
        // 当点击的元素不为li本身的时候，比如说span，就找父级是否为li
        while (!el.matches(selector)) {
            // 不断向上找父级元素，判断是否有li标签
            if (element === el) {
            	// 直到找到代理元素就不执行委托
                el = null;
                break;
            }
            el = el.parentNode;
        }
        el && fn.call(el, e, el);
    })
    return element;
}
eventDelegate(ul, 'click', 'li', function(e, el) {
    console.log(`点击了${this}标签`)
})