1. 이벤트?😊
미안하지만 설레는 그런 이벤트 아니다(ㅎ).
자바스크립트에서 이벤트란!
무언가의 상황이 벌어지는 것을 뜻한다.
앞에서도 설명했듯 코드를 아무리 잘 짜도 그 코드가 클릭을 해야만 작동되는 것이라면 클릭하기 전까진 아무것도 벌어지지 않는다는 말이다.
결국 자바스크립트는 이벤트를 발생시킨 후 함수를 호출함으로 실행이 된다.
자바스크립트에서 흔히 쓰이는 이벤트는 아래와 같다.
| 이벤트 | 설명 |
| onchange | 다른 객체로 바뀌었을 때 |
| onclick | 마우스를 클릭했을 때 |
| onmouseover | 마우스가 올려졌을 때 |
| onmouseout | 마우스가 나갔을 때 |
| onkeydown | 키보드가 눌렸을 때 |
| onload | 문서를 불러오는 작업이 끝났을 때 |
물론 이 이벤트를 더 세부적으로 표현할 수도 있지만 가장 굵직하고도 기본적인 이벤트들을 우선적으로 함께 알아보자!
2. 이벤트 알아보기
1) onload
온로드는 문서를 불러오는 작업이 끝났을 때 발생하는 이벤트이다.
그래서 주로 <body>에 붙여서 사용하는 경우가 많다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_event.html</title>
</head>
<body onload="alert('어서와~~~')">
<script>
</script>
</body>
</html>
이 기능은 주로 웹페이지를 처음 열었을 때 등장하는 팝업창에 쓰인다.
2) onclick
onclick은 말 그대로 마우스로 클릭했을 때 발생하는 이벤트이다.
그래서 주로 버튼과 함께 쓰인다.
<input type="button" value="버튼1" onclick="alert('버튼1클릭')">
<input type="button" value="맨땅에코딩" onclick="location.href='https://ddcloud.tistory.com/'">
위처럼 나의 티스토리 블로그로 바로 이동하는 버튼도 만들 수 있다 ^_^
2) onmouse*
onmouse 종류의 이벤트들은 마우스와 관련된 이벤트이다.
내가 필요한 기능에 따라 선택해서 이벤트를 잘 사용하면 된다.
<input type="button" value="마우스" onmouseover="alert('마우스over')"
onmouseout="alert('마우스out')">
나는 마우스 라는 버튼에 마우스를 올렸을 때와, 마우스가 버튼에서 벗어났을 때 각각 알림창이 뜨도록 했다.
3) onkey*
onkey 종류의 이벤트들은 키보드와 관련된 이벤트이다.
키보드와 관련된 이벤트기에 텍스트와 밀접한 연관이 있는 이벤트이다.
down / press / up이 있는데 이 역시 내가 필요한 기능에 따라 선택해서 이벤트를 잘 사용하면 된다.
down과 press는 누르는 동시에 이벤트가 진행이 된다.
여기서 down과 press의 차이점은 down은 누른 순간 발생하는데 press는 누르고 있는 동안에도 계속적으로 이벤트를 발생시킨다.
up은 키보드를 누른 뒤 땔 때 이벤트가 진행이 된다.
테스트 ↓
onkeydown
onkeyup
onkeyPress
4) onchange
onchange는 객체가 바뀔 때 발생하는 이벤트이다.
예를 들어 목록을 만들어서 사용자가 목록 내용을 바꿀 때를 생각해보면 된다.
아래의 코드를 살펴보자.
<select onchange="alert('목록변경')">
<option>서울</option>
<option selected>제주</option>
<option>부산</option>
</select>테스트 :
5) onfocus
이 기능은 객체가 선택되었을 때 발생하는 이벤트이다.
마우스를 그냥 단순히 이동해서 위에 가져다 놓으면 발생하지 않지만 클릭해서 그 개체에 focus가 되면 이벤트가 발생한다.
예를 들어 텍스트 입력상자에 커서가 들어왔을 때를 생각하면 된다.
<input type="text" onfocus="alert('커서들어옴')">
6) onsubmit
onsubmit 기능은 해당 폼이 서버로 전송될 때 발생되는 이벤트이다.
이 이벤트는 <form>에 적용되어야 하며 일정한 문법을 갖고 있다.
왜냐하면 onsubmit은 리턴값을 갖고 있기 때문이다.
리턴값이 true이면 서버로 값을 전송하고, false이면 전송하지 않는다.
이것을 활용하여 자바스크립트를 통해 데이터를 입력한다.
아이디랑 비밀번호도 입력하지 않은 상태로 로그인 버튼을 열심히 클릭해도 아무런 일이 벌어지지 않는다.
서버는 바쁘다.
그래서 서버까지 정보가 넘어가서, 서버에서 아이디와 비밀번호를 입력하지 않았어!! 응 안돼! 돌아가! 하는 것이 아니다.
로그인 버튼이 submit의 역할을 하면서 서버로 넘기기 전에 걸러주는 것이다.
<form name="myform" id="myform" method="get" action="ok.jsp" onsubmit="return true">
기본 속성이 submit을 갖고 있는 요소들은 모두 onsubmit의 이벤트에 반응을 한다.
<button></button>도 그러하고, <input type="image"> 도 그러하다.
'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글
| [JS] #9-1 유효성 검사 - 회원가입틀 만들기 1 (0) | 2022.08.16 |
|---|---|
| [JS] #8 String 함수 (0) | 2022.08.12 |
| [JS] #6-4 함수(Function) : .js파일 만들기 (0) | 2022.08.12 |
| [JS] #6-3 함수(Function) : 변수의 유효 범위(Scope) (0) | 2022.08.11 |
| [JS] #6-2 함수(Function) : 내장 객체(Object) (0) | 2022.08.11 |