[TOC] # 6.事件委托(代理、委派) （点击对象 他的父亲就响应事件）  事件冒泡本身的特性,会带来的坏处,也会**带来的好处**,需要我们灵活掌握。程序中也有如此场景: ~~~ <ul> <li>知否知否,应该有弹框在手</li> <li>知否知否，应该有弹框在手</li> <li>知否知否，应该有弹框在手</li> <li>知否知否，应该有弹框在手</li> <li>知否知否,应该有弹框在手</li> </ul> ~~~ 点击**每个li都会弹出对话框**,以前需要给每个li注册事件,是非常辛苦的,而且访问DOM的次数越多,这就会延长整个页面的交互就绪时间。 # 事件委托 事件委托也称为事件代理,在jQuery里面称为事件委派。 ## 事件委托的原理 **不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。** 以上案例：给**ul注册点击事件**,然后利用**事件对象的target**来**找到当前点击的li**,因为**点击li**,**事件会冒泡到ul上**,ul有注册事件,就**会触发事件监听器**。 ## 事件委托的作用 我们只操作了一次DOM ,提高了程序的性能。 ~~~ <ul> <li>知否知否，点我应有弹框在手! </li> <li>知否知否，点我应有弹框在手! </li> <li>知否知否，点我应有弹框在手! </li> <li>知否知否，点我应有弹框在手! </1i> <li>知否知否，点我应有弹框在手! </1i> </ul> <script> //事件委托的核心原理:给父节点添加侦听器， 利用事件冒泡影响每一个子节点 var ul = document.querySelector('u1l' ); ul.addEventListener('click', function(e) { // alert('知否知否， 点我应有弹框在手! '); // e.target 这个可以得到我们点击的对象 e.target.style.backgroundColor = ' pink' ; }) </script> ~~~