이벤트 기초 및 활용
이벤트 개요
• 이벤트
마우스 클릭, 키보드 입력 등 사용자의 입력 행위나 문서 또 는 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지
• 이벤트 리스너
발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드
• 이벤트 종류
HTML5에서 이벤트 종류는 70여개
이벤트 리스너 이름은 이벤트 이름 앞에 ‘on’을 붙인다.
주요 이벤트 리스너
| 이벤트 리스너 | 이벤트가 발생하는 경우 |
| onkeydown | 사용자가 아무 키나 누르는 순간 |
| onkeyup | 사용자가 누른 키를 놓는 순간 |
| onclick | 사용자가 객체를 클릭할 때 |
| ondblclick | 객체에 더블 클릭할 때 |
| onmousedown | 마우스 버튼이 눌러지는 순간 |
| onmouseover | 마우스 커서가 객체 안으로 들어가는 순간 |
| onmouseup | 눌러진 마우스 버튼을 놓는 순간 |
| onwheel | 마우스 휠을 굴리는 순간 |
| onchange | <input><select>등의 텍스트나 선택된 내용 등이 변할 때 |
| onsubmit | 사용자가 submit 버튼을 클릭하여 폼을 전송할 때 |
| onload | 문서나 이미지의 로딩이 완료된 직 후 |
이벤트 리스너 만들기
1. HTML 태그 내에 작성
2. DOM 객체의 이벤트 리스너 프로퍼티에 작성
3. DOM 객체의 addEventListener() 메소드 이용
1. HTML 태그 내에 이벤트 리스너 작성
- HTML 태그의 이벤트 리스너 속성에 리스너 코드 직접 작성
실습) <p>태그에 마우스 올리면 orange, 내리면 흰색으로 배경색 변경
2. DOM 객체의 이벤트 리스너 프로퍼티에 작성
※ 함수의 이름만 넣어야함 소괄호 입력X
실습) DOM 객체의 이벤트 리스너 프로퍼티에 작성
<body onload="init()"> //body에 onload를 해줌
<h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3>
<hr />
<p id="p">마우스 올리면 orange 색으로 변경</p>
</body>
<script>
function init() {
//문서가 완전히 로드되었을 때 호출
p = document.getElementById("p");
p.onmouseover = over; //over()를 onmouseover 리스너로 등록
p.onmouseout = out;
//out()를 onmouseout 리스너로 등록
}
function over() {
p.style.backgroundColor = "orange";
}
function out() {
p.style.backgroundColor = "white";
}
3. DOM 객체의 addEventListener() 메소드 활용
addEventListener() 메소드
_.addEventListener (이벤트 이름, 실제 실행할 함수이름) - 매개변수 2개 사용
<body onload="init()"> //body에 onload를 해줌
<h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3>
<hr />
<p id="p">마우스 올리면 orange 색으로 변경</p>
<script>
// DOM 객체의 addEventListener() 메소드 활용
var p;
function init() {
//문서가 완전히 로드되었을 때 호출
p = document.getElementById("p");
p.addEventListener("mouseover", over); //over()를 onmouseover 리스너로 등록
p.addEventListener("mouseout", out); //over()를 onmouseover 리스너로 등록
}
function over() {
p.style.backgroundColor = "orange";
}
function out() {
p.style.backgroundColor = "white";
}
</script>
</body>
★ 익명 함수로 이벤트 리스너 작성
익명 함수(anonymous function)
- 함수에 이름을 붙이지 않고 필요한 곳에 함수의 코드를 바로 작성 (코드가 짧거나 한 곳에서만 사용하는 경우)
예)
• 코드가 짧거나 한 곳에서만 사용하는 경우, 익명 함수 편리
실습) 익명 함수로 이벤트 리스너 작성
<script>
// 익명함수 - 코드가 짧거나 한곳에서만 사용할 경우 딱 여기서만 사용 가능
// 이름이 없기 때문에 p.onmouseover만 사용 가능
var p;
function init() {
//문서가 완전히 로드되었을 때 호출
p = document.getElementById("p");
p.onmouseover = function () {
//익명함수
this.style.backgroundColor = "orange";
};
p.addEventListener("mouseout", function () {
this.style.backgroundColor = "white";
});
}
</script>
이벤트 객체(event object)
발생한 이벤트에 관련된 다양한 정보를 담은 객체
• mousedown 이벤트의 경우, 마우스 좌표와 버튼 번호 등
• keydown 이벤트의 경우, 키 코드 값 등
* 이벤트가 처리되고 나면 객체 소멸
이벤트 객체 전달받기
이벤트 리스너 함수의 첫 번째 매개변수에 전달
* 함수이름 내 맘대로 정할 수 있음
실습) 익명 함수로 이벤트 리스너 작성
<body>
<p id="p">마우스를 올려보세요</p>
<button onclick="eventFunction(event)">클릭하세요</button>
<script>
//첫 번째 매개변수
// => event 정보를 담은 객체
// => 필요하면 작성, 내부적으로 이름을 풀어헤쳐서 작업을 하고 싶을 때 필요없으면 안 써도됨 매개 변수니까 이름 원하는대로
// 일반적으로 소문자 e라고 저장함
function eventFunction(e) {
// e는 현재 발생한 이벤트의 정보를 담은 객체가 저장되어 있음
console.log(e);
alert(e.type); // 이벤트 종류 출력
}
document.getElementById("p").onmouseover = eventFunction;
</script>
</body>
실습) onclick 리스너로 계산기 만들기
<body>
<h1> onclick, 계산기 만들기</h1>
<hr>
<p>계산하고자 하는 수식을 입력하고 계산 버튼 ㄱ</p>
<form>
식<input type="text" id="exp" value=""><br>
값<input type="text" id="result">
<input type ="button" value="계산" onclick="calculate()">
</form>
<script>
function calculate(){
var exp = document.getElementById("exp")
var result = document.getElementById("result");
result.value = eval(exp.value);
}
</script>
</body>
결과)
문서의 로딩 완료와 onload
onload
• window 객체에 발생
• 웹 페이지의 로딩 완료 시 호출되는 이벤트 리스너
작성 방법
2번을 일반적으로 사용
실습) onload
<body
onload="alert('이 사이트는 2022년 12월 부터 www.js.co.kr로 옮겨집니다.')"
>
<h1>HTML 문서의 로딩 완료, onload</h1>
<hr />
이 페이지는 omload 리스너의 사용 예를 보여줍니다. 이 페이지가 출력되고 난
바로 직후 onload 리스너를 통해 경고창을 출력합니다.
</body>
결과)
라디오버튼과 체크박스
라디오버튼 객체
<input type="radio">로 만들어진 라디오 버튼 DOM 객체
라디오 버튼 객체들 알아내기
• getElementsByName()으로 name 속성의 값 알아내기
• name 속성이 같은 태그를 모두 찾아 컬렉션을 리턴 (name을 일치시켜줘야 함)
<body>
<h3>버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h3>
<hr />
<form>
<input type="radio" name="city" value="seoul" checked /> 서울
<input type="radio" name="city" value="busan" checked /> 부산
<input type="radio" name="city" value="chunchen" checked /> 춘천
<input type="button" value="find checked" onclick="findChecked()" />
</form>
<script>
function findChecked() {
var found = null;
var kcity = document.getElementsByName("city");
kcity.forEach((item) => {
if (item.checked == true) found = item;
});
}
</script>
</body>
결과)
실습) 선택된 체크박스 알아내기
<body>
<h3>물품을 선택하면 금액이 자동 계산됩니다.</h3>
<hr />
<form>
<input
type="checkbox"
name="hap"
value="10000"
onclick="calc(this)"
/>모자 1만원
<input
type="checkbox"
name="shose"
value="30000"
onclick="calc(this)"
/>구두 3만원
<input
type="checkbox"
name="bag"
value="80000"
onclick="calc(this)"
/>명품가방 8만원
<br />
지불하실 금액 <input type="text" id="result" value="0" />
</form>
<script>
var sum = 0;
function calc(cBox) {
//굳이 cBox.checked==true라고 할 필요 없음
if (cBox.checked) sum += parseInt(cBox.value);
else sum -= parseInt(cBox.value);
document.getElementById("result").value = sum;
}
</script>
</body>
select 객체와 onchange
select 객체는 <select>태그로 만들어진 콤보박스
• option 객체는 태그로 표현되는 옵션 아이템
• 선택된 옵션 알아내기
select 객체와 onchange
• 옵션 선택
_.selectedIndex
• select와 onchange 리스너
선택된 옵션이 변경되면 select 객체의 onchange 리스너 호출
실습) select 객체
<body>
<h3>select 객체에서 선택한 과일 출력</h3>
<hr />
<p>과일을 선택하면 이미지가 출력됩니다.</p>
<form>
<select id="fruits" onchange="drawImage()">
<option value="images/strawberry.png">딸기</option>
<option value="images/banana.png" selected>바나나</option>
<option value="images/apple.png">사과</option>
</select>
<img id="fruitimage" src="images/banana.png" alt="" />
</form>
</body>
결과)
'Javascript' 카테고리의 다른 글
| [새싹 프론트엔드] 5주차 - 2 (0) | 2022.11.15 |
|---|---|
| [새싹 프론트엔드] 5주차 - 1 (0) | 2022.11.14 |
| [새싹 프론트엔드] 4주차 - 4 (0) | 2022.11.10 |
| [새싹 프론트엔드] 4주차 - 3 (0) | 2022.11.09 |
| [새싹 프론트엔드] 4주차 - 2 (0) | 2022.11.09 |
