事件代理如何使用？代码怎么写？

事件代理如何使用？代码怎么写？事件代理就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素。在 Javascript中的事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序管理某一类型的所有事件。

学习目标：能够知道事件代理的使用方式

1. 什么是事件代理？

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件冒泡代码:

<script>    $(function(){        var $div1 = $('#div1');        var $div2 = $('#div2');        $div1.click(function(){            alert($(this).html());        });         $div2.click(function(){            alert($(this).html());        });     });</script> <div id="div1" style="width:200px; height:200px; background: red;">    <div id="div2" style="width:100px; height:100px;background: yellow;">        哈哈    </div></div>

说明:当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。

2. 事件代理如何使用？

一般绑定事件的写法:

$(function(){    $ali = $('#list li');    $ali.click(function() {        $(this).css({background:'red'});    });})<ul id="list">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul>

事件代理的写法：

$(function(){    $list = $('#list');    // 父元素ul 来代理 子元素li的点击事件    $list.delegate('li','click',function() {        // $(this)表示当前点击的子元素对象        $(this).css({background:'red'});    });})<ul id="list">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul>

delegate方法参数说明:delegate(childSelector,event,function)

childSelector: 子元素的选择器

event: 事件名称，比如: 'click'

unction: 当事件触发执行的函数

3. 事件代理小结

事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。场景当多个相同的子元素绑定同一个事件可以使用事件代理。事件代理使用是使用delegate方法来完成