[jQuery] 제이쿼리 .on('click') vs .click() 차이점

제이쿼리. on('click') vs. click() 차이점

$(".btn_alert").on("click", function(){
  alert("test");
  return;
});

. on('click')과. click()의 차이는. on('click')이 메모리를 덜먹고 동적으로 생성되는 요소들이 잘 작동되는 점이 다릅니다.

일단 테스트를 위해 소스를 작성해 보겠습니다.

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<html> 
    <button id="btn_add">Add new</button> 
    <div id="wrap"> 
       <button class="btn_alert">alert!</button>
    </div> 
</html>

<script>
	$(document).ready(function(){			
		$("#btn_add").click(function() { 
			var html = "<button class='btn_alert'>alert!</button>"; 
			$("button.btn:last").parent().append(html); 
		});
		
		$(".btn_alert").on("click", function(){
			alert("test");
			return;
		});
	});
</script>

▼ 아래의 클릭 이벤트를 실행하게 된다면 버튼이 추가로 생성될 겁니다. alert! 버튼이 추가로 생성되는 게 보이실 겁니다.

클릭 사용 시 :

1. 많은 요소들은 많은 개별 핸들러를 필요로 해서 메모리 사용량이 증가됨.
2. 돌적으로 추가된 요소들은 기존의 핸들러들이 안 먹힘. 예를 들어. 위의 html에서 새롭게 추가된 alert! 버튼은 rebind 해주지 않는 이상 동작 안 함.

$("#btn_add").click(function() { 
   var html = "<button class='btn_alert'>alert!</button>"; 
   $("button.btn:last").parent().append(html); 
});

▼ 온클릭 이벤트 실행 시 test라는 alert 메시지가 발생합니다.

만약. on("click", handler)로 추가하면 .off("click", handler) 로 보통 없앨 수 있습니다.

참조할 함수가 있다면 확실히 작동됩니다.

$(".btn_alert").on("click", function(){
   alert("test");
   return;
});

저작자표시 비영리 변경금지

'프로그래밍 > 제이쿼리(jQuery)' 카테고리의 다른 글

[jQuery] 체크박스 선택된 값 가져오기 plus input hidden val 값 추가로 가져오기(feat.형제태그 값(val) 찾기) (0)	2023.04.16
[jQuery]제이쿼리 자주쓰는 함수 모음2 (0)	2021.09.30
[jQuery]제이쿼리 자주쓰는 함수모음1 (4)	2021.09.28
Uncaught ReferenceError: $ is not defined (0)	2021.07.08