JQuery事件委托

1.何为事件委托？

 利用事件冒泡，指定一个事件处理程序来处理某一类型的所有事件。通俗点说，就是目标事件不进行处理，而把处理任务委托给其父辈元素，即将多个子元素的监听事件委托给父辈元素处理，当操作任何一个子元素时，事件会冒泡到父辈元素，但父辈元素不会直接处理事件，而是根据event.target得到事件发生的子元素，通过子元素调用事件回调函数。

2.事件委托的优点

减少内存的占用，由于每一个事件的处理函数，都是对其对象操作，当处理的对象越多，内存的占用空间就越大，从而导致性能越差。但通过事件委托可以减少事件监听的数量，从而避免这一问题。

3.有关事件委托的方法

（1）设置事件委托

delegate(selector,[type],[data],fn)

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

selector:选择器字符串，用于过滤器触发事件的元素。

type:可选。附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。传递到函数的额外数据。

fn:当事件发生时运行的函数。

(2)移除事件委托

 undelegate([selector,[type],fn])

删除由 delegate() 方法添加的一个或多个事件处理程序。

selector:需要删除事件处理程序的选择器。

type:可选。需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。

fn:要删除的具体事件处理函数。

4.实例

需求：

• first


• second


• third


• forth

       （1）给ul元素中添加新的li元素。

         (2)点击li元素设置背景颜色

        A. 未使用事件委托编码实现:

        

• first


• second


• third


• forth

添加新的li

产生问题：新添加的子元素未能设置背景颜色。

B.使用事件委托编码实现：

   

• first


• second


• third


• forth

添加新的li

问题得以解决。

C.移除事件委托

• first


• second


• third


• forth

添加新的li
删除ul上的事件委托监听器