○ 이벤트(event)
- 웹사이트 방문자가 하는 행위 (참고 : 자바스크립트 이벤트 )
- 마우스, 키보드 조작 등
- 특정 요소에서 발생하는 이벤트를 처리하기 위해 함수를 작성하여 연결해야 함
○ jQuery에서 이벤트 처리
- 형식)
① $(선택자).이벤트(function(){ 실행할 제이쿼리 코드 });
② $(선택자).on(이벤트, function(){ 실행할 제이쿼리 코드 });
<body>
<form id="memfrm" name="memfrm" action="ok.jsp">
아이디 : <input type="text" name="uid" id="uid" value="marshall">
<hr>
<button id="btn_idcheck">ID중복확인</button>
<button id="btn_join">회원가입</button>
<button id="btn_reset">다시쓰기</button>
</form>
<script>
//id="btn_idcheck"에 클릭이벤트와 함수 연결하기
$("#btn_idcheck").click(function(){});
$("#btn_idcheck").on(click, function(){});
</script>
</body>
- id="btn_idcheck" 클릭했을 때 팝업창 띄우기
$("#btn_idcheck").click(function(){
window.open("blank.html", "popwin", "width=350, height=300")
});
- id="btn_join" 클릭했을 때, 아이디 유효성 체크 후 폼(id="memfrm") 전송하기
$("#btn_join").click(function(){
var 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(); //<form id="memfrm"></form>를 서버로 전송
});//click end
- id="btn_reset" 클릭했을 때, 폼 리셋하기(내용지우기)
$("#btn_reset").click(function(){
$("#memfrm").reset(); //<form id="memfrm"></form>을 원래대로
});
○ jQuery 이벤트 종류
① 마우스 이벤트
- click : 요소를 마우스로 클릭할 때
- dbclick : 요소를 마우스로 더블클릭할 때
- mouseenter : 요소에 마우스 커서를 올렸을 때
- mouseleave : 요소에 마우스 커서를 올렸다가 벗어났을 때
- hover : mouseenter + mouseleave (아래 코드 참고)
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
});
</script>
</head>
<body>
<p>Hover the mouse pointer over this paragraph.</p>
</body>
② 키보드 이벤트
- keypress : 요소에서 키보드를 누를 때 (꾹 누르고 있으면 계속 이벤트 발생)
- keydown : 요소에서 키보드를 눌렀을 때
- keyup : 요소에서 키보드를 눌렀다가 뗄 때
③ 폼 이벤트
- submit : 해당 폼을 서버에 전송할 때
- change: 해당 요소의 내용이 변경될 때
- focus: 해당 요소에 커서가 들어갔을 때
- blur: 해당 요소에 커서가 들어갔다가 나올 때
- select: 해당 요소의 내용을 선택했을 때 (블럭지정)
④ 문서 이벤트
- load: 해당 문서가 처음에 로딩될 때
- resize: 해당 문서의 창 크기가 변할 때
- scroll: 해당 문서에서 스크롤을 움직일 때
- unload: 해당 문서에서 나갈 때
- ready: 해당 문서가 맨 처음 읽힐 때
- 그 외 jQuery에서 가능한 이벤트 참고 : W3Schools
'Frontend > jQuery' 카테고리의 다른 글
| 06. jQuery, this & index (0) | 2022.06.07 |
|---|---|
| 05. jQuery, each반복문 (0) | 2022.06.07 |
| 04. jQuery, css() 함수 / prop()와 attr() 함수 (0) | 2022.06.03 |
| 03. jQuery, text()와 html() 함수 / jQuery Method Chaining (0) | 2022.06.03 |
| 01. jQuery 시작 (오픈소스 사용방법, 기본 문법) (0) | 2022.06.03 |
댓글