$( function() {... } 란?
자바스크립트의 $(document).ready(function() { ... }); 을 축약한 jQuery이다.
1 2 3 4 5 6 7 | $(document).ready(function() { // 웹 페이지가 로드된 후 실행할 코드 작성 }); -------------------------------------------- $(function() { // 웹 페이지가 로드된 후 실행할 코드 작성 }); | cs |
두 코드 모두 웹 페이지의 DOM 요소가 완전히 로드 되었을 때 실행된다는 것이다.
즉, 웹 페이지의 HTML 구조가 완전히 로드되고 초기화되서 사용자에게 표시되기전까지 기다린다.
1 2 3 4 5 6 7 | $(document).ready(function() { // 웹 페이지가 로드된 후 실행할 코드 작성 // DOM 요소에 접근하거나 이벤트 핸들러를 등록하는 등의 작업 수행 alert(1); }); alert(2); | cs |
그렇다면 이 두개는 무슨 차이가 있을까?
코드를 적용해보면 페이지로 들어왔을 때 2가 먼저 출력이 되고 이후 1이 출력이된다.
alert(2) 이 코드는 스크립트가 로드되면 즉시 실행되기 때문이다.
웹 페이지 로딩과는 관련이없으며, 스크립트가 로드되는 즉시 실행된다.
주로 초기화와 관계없는 간단한 작업이나 테스트 목적으로 사용한다.
따라서, alert(2) 는 페이지가 로드되지 않은 상태에서 실행되고 즉시 경고창을 띄우게 된다.
반면에 $(document).ready(function() { ... });는 페이지가 로드된 후에 실행되므로
페이지의 HTML 구조나 DOM 요소에 접근하는 작업을 수행하기에 적합하다.
각각 표현 법이 다른 이벤트 리스너 (버튼)
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
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 33 | <%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script> function process(){ alert("버튼1"); } $(document).ready(function(){ //객체.이벤트(함수(){}); $("#btn2").click(function(){ alert("버튼2"); }); //객체.on(이벤트,함수(){}); 또는 객체.bind(이벤트,함수(){}); $("#btn3").on('click',function(){ alert("버튼3"); $(this).off(); }); }); </script> </head> <body> <input type="button" id="btn1" value="버튼1" onclick="process()"> <input type="button" id="btn2" value="버튼2"> <input type="button" id="btn3" value="버튼3"> </body> </html> | cs |
세 개 모두 다른 동작을 하는 버튼이 있다.
버튼1
prcoess( ) 함수를 사용해 HTML의 버튼1이 클릭될 때 호출된다.
버튼2 와 버튼3은 버튼1과 다른 형태이다.
$(document).ready(function(){ ... }); jQuery를 사용해서 문서가 로드될 때 실행할 코드를 정의한다.
버튼2
$("#btn2").click(function(){ ... }); "버튼2"에 대한 클릭 이벤트 핸들러를 등록한다. 버튼2를 클릭하면 경고창이 표시된다.
버튼3
$("#btn3").on('click', function(){ ... });: "버튼3"에 대한 클릭 이벤트 핸들러를 등록한다.
버튼3을 클릭하면 경고창이 표시되며, $(this).off();를 호출하여 이벤트 핸들러를 삭제한다.
즉, 버튼3을 한 번 클릭한 후에는 더 이상 클릭 이벤트가 동작하지 않는다.
그렇다면 버튼2와 버튼3에는 어떤 차이가 있을까?
$("#btn2").click(function(){ ... });
이 코드는 "버튼2" 요소에 대한 클릭 이벤트 핸들러를 직접 등록하는 방법이다.
클릭 이벤트가 발생할 때마다 해당 핸들러가 실행된다.
이 방법은 한 번만 이벤트 핸들러를 등록하는 간단한 방법이며, 한 요소에 여러 이벤트 핸들러를 등록할 수 있다.
$("#btn3").on('click', function(){ ... });
이 코드는 "버튼3" 요소에 대한 클릭 이벤트 핸들러를 .on() 메서드를 사용하여 등록하는 방법이다.
.on() 메서드를 사용하면 이벤트 핸들러를 등록한 후에 나중에 .off() 메서드를 사용하여 이벤트 핸들러를 삭제할 수 있다. 이 코드에서는 클릭 이벤트 핸들러 내에서 $(this).off();를 호출해 한 번 클릭 후에는 더 이상 클릭 이벤트가 동작안한다.
차이점
click() 메서드를 사용하는 경우에는 이벤트 핸들러를 등록하면 나중에 삭제할 수 없다. 핸들러가 등록되면 계속 작동한다.
.on('click', ...) 메서드를 사용하는 경우에는 이벤트 핸들러를 나중에 삭제할 수 있다. 이를 통해 특정 상황에서만 이벤트 핸들러를 활성화하고, 필요 없어지면 비활성화시킬 수 있다.
따라서 "버튼2"의 경우 클릭 이벤트 핸들러는 항상 활성화되지만,
"버튼3"의 경우 클릭 이벤트 핸들러를 한 번 실행한 후에는 비활성화된다.
'✨ Front-end > jQuery' 카테고리의 다른 글
| [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 (0) | 2023.09.04 |
|---|---|
| [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) (0) | 2023.09.04 |
| [jQuery] innerHTML, text 바꾸기 (0) | 2023.09.04 |
| [jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade) (0) | 2023.09.04 |
| [jQuery] 아코디언(accordion) UI 써서 활용하기 (1) | 2023.09.04 |
댓글