jQuery-事件委托(基本概述+实例)

1.基本概述

(1)事件委托(代理/委派) ->将多个子元素(li)的事件监听委托给父辈元素(ul)处理 ->监听回调是加在了父辈元素上 ->当操作任何一个子元素(li)时，事件会冒泡到父辈元素(ul) ->父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素(li),通过这个子元素调用事件回调函数

(2)事件委托的双方 ->委托方: 业主li ->被委托方: 中介ul

(3)使用事件委托的好处 ->添加新的子元素，自动有事件响应处理 ->减少事件监听的数量

(4)jQuery事件委托API ->设置事件委托:$(parentSelector).delegate(childrenSelector,eventName,callback)

->移出事件委托:$(parentSelector).undelegate(eventName)

2.代码实例

  
    
    
    My JSP 'practice_02.jsp' starting page
    
	
	
	    
	
	
	
	
	
 	
  
  
  	
  	
  		111
  		222
  		333
  		444
  	
  	222
  	
  	添加一个li
  	
	
		//1.点击li，背景就会变成红色
		$('ul>li').click(function() {
			//第一种写法
			this.style.background = 'red';
			//第二种写法          $(this).css('background','red');
		});
		
		//2.点击btn，就会添加一个li
		$('#btn').click(function() {
			$('ul').append('
222
');
		});
		//事件委托
		$('ul').delegate('li','click',function() {
			this.style.background = 'red';
		});
		
		
	
  

3.效果图