现在的位置: 首页 > 综合 > 正文

jQuery:通过事件委派一次绑定多种事件，以减少事件冗余

2011年07月19日 ⁄ 综合 ⁄ 共 1552字 ⁄ 字号 小 中 大 ⁄ 评论关闭

jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

下面的代码是一个事件方法连缀的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

jQuery(function($) {
	$('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
	$('#mytable').bind('mouseover', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			var link = $link[0];
			tipTitle = link.title;
			link.title = '';
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			})
			.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
		};
	}).bind('mouseout', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			$link.attr('title', tipTitle);
			$('#livetip').hide();
		};
	}).bind('mousemove', function(event) {
		var $link = $(event.target).closest('a');
		if ( $link.length) {
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			});
		};
	});
});

其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

jQuery(function($) {

	var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');

	var tipTitle = '';

 

	$('#mytable').bind('mouseover mouseout mousemove', function(event) {

	  var $link = $(event.target).closest('a');

	  if (!$link.length) { return; }

	  var link = $link[0];

 

	  if (event.type == 'mouseover' || event.type == 'mousemove') {

		$liveTip.css({

		  top: event.pageY + 12,

		  left: event.pageX + 12

		});

	  };

 

	  if (event.type == 'mouseover') {

		tipTitle = link.title;

		link.title = '';

		$liveTip.html('<div>' + tipTitle + '</div><div>' 









														
							
			

				返回
			

			

			
			
			
		
		

			
			
		

                

		





















			

		

	
	




	
	


		
						
		

			【上篇】
【下篇】			
			
			
			
		

		
								
		

		

			

				


				

				

				

					
作者: 

				

			

			
				
			
			
			
			

		

		

			
			
		

		
	

	
			
		
抱歉!评论已关闭.

							






	
	

	返回首页

		
	





	Copyright © 2013-2018 学步园  保留所有权利.

	软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）