事件委托

什么是事件委托？

“事件委托”（又叫事件代理）即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

三个阶段

1：捕获阶段。这个阶段不会触发任何事件。
2：目标阶段。在目标节点上触发。
3：冒泡阶段。从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

事件委托的优点。

1：减少了注册事件，节约内存。

<ol id="btn">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ···
        <li>4</li>
</ol>

如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。利用jquery提供的on方法可以很轻松的实现。

<script>
        $('#btn').on('click', 'li', function() {
            console.log(this)
        })
</script>

2：动态绑定事件。