Advanced Search

Return to Snippet

Revision: 55889
at February 27, 2012 11:11 by safe1981
Updated Code 
//The method attaching event listener.
//all method is based on 'on' method.
//여기에 나오는 모든 메소드들은 on 메소드에서 파생된 메소드임
//모든 태그에 이벤트를 다는 것보다, 상위태그에 이벤트를 달고 이벤트가 걸리는 시점에 작업을 하는 것이 보다 효율적임
(function(){
	$('h2').click(function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').bind('click',function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').on('click', function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').live('click', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
	$('body').delegate('h2', 'click', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
	$('body').on('click', 'h2', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
})();

Revision: 55888
at February 27, 2012 11:03 by safe1981
Updated Code 
//아래의 네 개 방식은 모두 동일한 효과를 가짐
//clone(true)를 주면, 동적으로 생성된 h2 태그에도 동일한 이벤트를 달 수 있음
(function(){
	$('h2').click(function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').bind('click',function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').on('click', function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').live('click', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
	$('body').delegate('h2', 'click', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
})();

Revision: 55887
at February 27, 2012 10:58 by safe1981
Initial Code 
(function(){
	$('h2').click(function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').bind('click',function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').on('click', function(){
		console.log("clicked");
		$(this).clone(true).appendTo('body');		
	});

	$('h2').live('click', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
	$('body').delegate('h2', 'click', function(){
		console.log("clicked");
		$(this).clone().appendTo('body');		
	});
})();
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
다양한 형태로 jQuery를 이용하여 DOM 요소에 이벤트를 다는 방법

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
jQuery Event Attachment

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
event

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript