普通事件代理和jQuery事件代理比较

普通事件代理

	<div class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </div>
    
    var box = document.querySelector('.box')

    function delegate (target, selector, type, cb) {
        target.addEventListener(type, (e) => {
            let tag = e.target.nodeName.toLowerCase()
            if (tag === selector) {
                cb(e, e.target)
            }
        })
    }

    delegate(box, 'li', 'click', (e, target) => {
        console.log(target.innerText)
    })

• 普通事件代理，是通过外层标签代理内层同一属性的标签的事件
• 原理：利用冒泡的原理，在外层标签冒泡阶段捕获分析e.target也就是事件触发源的标签属性来分类处理
• 好处：可以减少dom操作次数，因为如果在每一个标签都添加事件的话势必要循环，然后在每一个上都添加

jquery 事件代理

	<div class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </div>
    
    
	$('.box').delegate('li', 'click', function () {
    	$(this).toggleClass('red')
    })

• jquery 是任何标签都可以代理另一个标签的事件
• 原理：给一个外层标签代理内部标签，内部同类标签每一个都会加上一个事件
• 好处：简单
• 缺点：并没有简化dom操作