普通事件代理
<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操作
Processed:
0.010, SQL:
8
