이벤트
이벤트 기초 및 활용
브라우저에 발생하는 다양한 이벤트들
이벤트 개요
- 이벤트
- 마우스 클릭, 키보드 입력 등 사용자의 입력 행위나 문서 또는 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지
- 이벤트 리스너
- 발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드
- 이벤트 종류
- HTML5에서 이벤트 종류는 70여개
- 이벤트 리스너 이름은 이벤트 이름 앞에 ‘on’을 붙인다
주요 이벤트 리스터
| 이벤트 리스너 | 이벤트가 발생하는 경우 |
|---|---|
| onkeydown | 사용자가 아무 키나 누르는 순간 |
| onkeyup | 사용자가 누른 키를 놓는 순간 |
| onclick | 사용자가 객체를 클릭할 때 |
| ondblclick | 객체에 더블 클릭할 때 |
| onmousedown | 마우스 버튼이 눌러지는 순간 |
| onmouseover | 마우스 커서가 객체 안으로 들어가는 순간 |
| onmouseup | 눌러진 마우스 버튼을 놓는 순간 |
| onwheel | 마우스 휠을 굴리는 순간 |
| onchange | input select 등의 텍스트나 선택된 내용 등이 변할 때 |
| onsubmit | 사용자가 submit 버튼을 클릭하여 폼을 전송할 때 |
| onload | 문서나 이미지의 로딩이 완료된 직후 |
이벤트 리스너 만들기
- HTML 태그 내에 작성
-
HTML 태그의 이벤트 리스너 속성에 리스너 코드 직접 작성
-
p태그에 마우스 올리면 orange, 내리면 흰색으로 배경색 변경<p **onmouseover**="this.style.backgroundColor='orange'" **onmouseout**="this.style.backgroundColor='white'"> 마우스 올리면 orange 색으로 변경 </p>
-
- DOM 객체의 이벤트 리스너 프로퍼티에 작성
-
다음과 같은
p태그가 있을 때,<p id=“p”>마우스 올리면 orange 색으로 변경</p> -
함수 over()를 다음과 같이 작성하고,
// onmouseover 리스너로 사용할 함수 function over() { ... } -
over() 함수를 객체 p의 onmouseover 리스너로 등록
var p = document.getElementById("p"); // onmouseover 리스너로 over() 함수 등록 p.onmouseover = over; // p.onmouseover = over(); 함수 호출 ❌
-
- DOM 객체의 addEventListener() 메소드 이용
-
addEventListener() 메소드
// onmouseover 리스너로 over() 등록 p.addEventListener("mouseover", over); // on 없이 이벤트 이름만 사용
-
익명 함수로 이벤트 리스너 작성
- 익명 함수(anonymous function)
-
함수 이름 없이 필요한 곳에 함수의 코드를 바로 작성
-
예)
// 익명 함수 p.onmouseover = function() { this.style.backgroundColor = "orange"; }; p.addEventListener("mouseover", function() { this.style.backgroundColor = "orange"; } ); -
코드가 짧거나 한 곳에서만 사용하는 경우, 익명 함수 편리
-
이벤트 객체(event object)
- 발생한 이벤트에 관련된 다양한 정보를 담은 객체
- mousedown 이벤트의 경우, 마우스 좌표와 버튼 번호 등
- keydown 이벤트의 경우, 키 코드 값 등
- 이벤트가 처리되고 나면 객체 소멸
이벤트 객체 전달받기
- 이벤트 리스너 함수의 첫 번째 매개변수에 전달
-
이름을 가진 이벤트 리스너
function eventFunction(e) { // 매개변수 e에 이벤트 객체 전달받음 ... } obj.onclick = eventFunction; // obj 객체의 onclick 리스너로 // 함수 eventFunction 등록 -
익명 함수의 경우
// 매개변수 e에 이벤트 객체 전달받음 obj.onclick = function(e) { ... } -
HTML 태그에 이벤트 리스너 생성
- event라는 이름으로 전달
-
문서의 로딩 완료와 onload
- onload
-
window 객체에 발생
-
웹 페이지의 로딩 완료 시 호출되는 이벤트 리스너
-
작성 방법
1. window.onload= alert('onload'); 2. <body onload = "alert('onload');">
-
라디오버튼과 체크박스
- 라디오버튼 객체
-
<input type = "radio">로 만들어진 라디오 버튼 DOM 객체<form> <input type="radio" name="city" value="seoul">서울 <input type="radio" name="city" value="busan">부산 <input type="radio" name="city" value="chunchen">춘천 </form>
-
- 라디오버튼 객체들 알아내기
-
getElementsByName()으로 name 속성의 값 알아내기
-
name 속성이 같은 태그를 모두 찾아 컬렉션을 리턴
var kcity = document.getElementsByName("city"); // kcity[0], kcity[1], kcity[2] 리턴
-
select 객체와 onchange
- select 객체는
select태그로 표현되는 옵션 아이템
<select id="fruits">
<option value="1">딸기</option>
<option value="2" selected>바나나</option>
<option value="3">사과</option>
</select>- 선택된 옵션 알아내기
var sel = document.getElementById("fruits");
// index는 선택 상태의 옵션 인덱스
var index = sel.selectedIndex;- 옵션 선택
sel.selectedIndex = 2; // 3번째 옵션 “사과” 선택
sel.options[2].selected = true; // 3번째 옵션 “사과” 선택- select와 onchange 리스너
- 선택된 옵션이 변경되면 select 객체의 onchange 리스너 호출
<select id="fruits" onchange="drawImage()">...</select>새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅
