1. 제이쿼리에서 이벤트 발생시키기
1) 버튼 만들기
제이쿼리에서 이벤트를 발생시켜보자.
우선 회원가입에 대한 기본적인 버튼들을 만들어보려한다.
jQuery 이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_jquery이벤트.html</title>
<!-- jQuery import -->
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<h3>jQuery 이벤트</h3>
<form id="memfrm" name="memfrm" action="ok.jsp">
아이디 : <input type="text" id="uid" name="uid" value="ITWILL">
<hr>
<!-- <button> 요소는 기본 속성이 type="submit" 이다. -->
<button id="btn_idcheck">ID중복확인</button>
<button id="btn_join">회원가입</button>
<button id="btn_reset">다시쓰기</button>
</form>
</body>
</html>
2) 값에 접근하기
이제 아이디가 갖고 있는 값에 접근해보려하는데, 두 가지 방식을 사용하려한다.
① JavaScript 문법으로 접근하기
먼저는 jQuery를 사용하지 않고 JavaScript의 문법으로 접근을 해보려한다.
alert(document.getElementById("uid").value);
② jQuery 문법으로 접근하기
다음은 jQuery의 문법으로 접근을 해보자.
기본 문법 : $(선택자).action();jQuery는 우선적으로 $ 를 쓴 뒤 그 뒤에 선택자가 사용이 된다.
아이디라면 #, 클래스라면 . 의 선택자 말이다.
선택자를 쓴 뒤에는 어떤 액션을 취할 것인지를 이어서 적어준다.
alert($("#uid").val());
2. 이벤트
1) 클릭 이벤트
문법도 확인했겠다, 이제 본격적으로 jQuery를 활용하여 이벤트를 발생시켜보자.
W3School의 내용을 참조하면서 보아도 좋다.
https://www.w3schools.com/jquery/jquery_events.asp
jQuery Event Methods
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
버튼에 대한 가장 흔한 이벤트라 함은 click이 되겠다.
클릭 이벤트를 한번 사용해보자.
$("선택자").click(function함수명(){});위의 뜻은 "선택자"가 가리키는 버튼이 클릭되었을 때 function 함수를 발생시켜라, 라는 뜻이다.
$("선택자").on(click, function(){});같은 뜻으로 위와 같이 on이라는 함수를 사용할 수도 있지만 더 직관적인 첫번째 문법을 사용하려 한다.
2) 클릭 이벤트를 사용하여 팝업창 띄우기
이제 이벤트를 사용해보자.
먼저 ID중복확인을 누르면 팝업창을 띄우는 것을 해보려 한다.
$("#btn_idcheck").click(function(){
// id=btn_idcheck 클릭했을 때 팝업창 띄우기
window.open("blank.html", "popwin", "width=350,height=300");
}); // click end
다음은 회원가입 버튼을 누르면 회원가입을 서버로 신청하게 하는 이벤트를 발생시키려 한다.
이 때 아이디가 8~12글자가 아니라면 서버로 전송하지 않게 하려 한다.
$("#btn_join").click(function(){
let uid=$("#uid").val();
uid=uid.trim();
if(!(uid.length>=8 && uid.length<=12)){
alert("아이디 8~12글자 이내 입력해주세요~");
$("#uid").focus();
return false; // <button> 요소의 기본 속성이 submit이므로
// return false를 주면 서버로 전송되지 않음
} // if end
$("#memfrm").submit();
}); // click end
마지막으론 다시쓰기 버튼을 누르면 작성된 내용을 초기화 되게 하는 이벤트를 발생시켜보자.
$("#btn_reset").click(function(){
$("memfrm").reset();
return false;
}); // click end
사실 이 모든 것들은 자바스크립트 문법으로도 얼마든지 가능하다.
다만 지금은 jQuery 문법을 사용해보는 것에 의의를 두는 것이다.
아래의 결과물을 확인해보자.
(버튼을 눌러도 넘어갈 곳이 없기 때문에 오류가 뜰 것이다)
jQuery 이벤트
'⁂ jQuery > : 기본 익히기' 카테고리의 다른 글
| [jQuery] #6 This로 index 확인하기 (0) | 2022.09.26 |
|---|---|
| [jQuery] #5 each 반복문 (0) | 2022.09.26 |
| [jQuery] #4 속성 관련 메소드 (0) | 2022.09.26 |
| [jQuery] #3 jQuery에서 자주 사용하는 함수 - text(), html(), css() + chaining (0) | 2022.09.26 |
| [jQuery] #1 jQuery 시작 (0) | 2022.09.26 |