- 이벤트 | 마우스 클릭, 키보드 입력 등 사용자의 입력 행위나 문서 또는 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지
- 이벤트 리스너 | 발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드
- 이벤트 종류 | HTML5에서 이벤트 종류는 70여개. 이벤트 리스너 이름은 이벤트 이름 앞에 ‘on’을 붙인다.
이벤트 리스너 종류는 아래 정리 글 참고
01. 이벤트 리스너 만들기
- HTML 태그 내에 이벤트 리스너 작성
- DOM 객체의 이벤트 리스너 프로퍼티에 작성
- DOM 객체의 addEventListener() 메서드 이용
HTML 태그 내에 이벤트 리스너 작성
<p onmouseover="this.style.backgroundColor='orange'"
onmouseout="this.style.backgroundColor='blue'">
여기는 p 태그
</p>
DOM 객체의 이벤트 리스너 프로퍼티에 작성
<!-- html의 body에 페이지가 로딩되면 실행되는 init() 함수 적용 -->
<body onload="init()">
<p id="p">마우스 올리면 orange 색으로 변경</p>
<script src="../js/1.js"></script>
</body>// js 파일
function init() {
const p = document.querySelector("#p");
p.onmouseover = over; // 함수의 이름만 불러주어야 한다.
p.onmouseout = out;
}
function over() {
p.style.backgroundColor = "orange";
}
function out() {
p.style.backgroundColor = "blue";
}
DOM 객체의 addEventListener() 메서드 이용
// 위 코드에서 init의 p. 부분만 수정
function init() {
const p = document.querySelector("#p");
p.addEventListener("mouseover", over); // 이벤트 리스너로 사용한다면 on 삭제
p.addEventListener("mouseout", out); // 두 번째 매개변수에는 사용할 함수 선언
}
익명 함수로 이벤트 리스너 작성
익명 함수(anonymous function) | 함수 이름 없이 필요한 곳에 함수의 코드를 바로 작성
코드가 짧거나 한 곳에서만 사용하는 경우, 익명 함수가 편리하다.
p.onmouseover = function() { this.style.backgroundColor = "orange"; };
p.addEventListener("mouseover", function() { this.style.backgroundColor = "orange"; });
02. 이벤트 객체(event object)
발생한 이벤트에 관련된 다양한 정보를 담은 객체로 mousedown 이벤트의 경우 마우스 좌표와 버튼 번호 등, keydown 이벤트의 경우 키 코드 값 등 (검색창에서 검색 버튼을 누르지 않고 키패드 Enter를 눌렀을 때 자동으로 검색 버튼을 누른 것처럼 처리)
이벤트가 처리되고 나면 객체는 소멸한다.
이벤트 객체 전달받기
function eventFunction(e) { // e에는 event 정보를 담은 객체가 들어온다
e.preventDefault(); // 함수의 기본적인 동작 수행을 막는 것
}
※ html에서 이벤트 객체를 전달할 때는 event라는 지정된 이름으로 전달해야 한다. (함수 안 e는 매개변수이기 때문에 상관없음)
<button onclick="eventFunction(event)">클릭하세요</button>
03. 실습
- onclick 리스너로 계산기 만들기
<body>
<h3>onclick 계산기 만들기</h3>
<hr />
<p>계산하고자 하는 수식을 입력하고 계산 버튼을 누르세요</p>
<form>
<label>식 <input type="text" id="exp" value="" /><br /></label>
<label>값 <input type="text" id="result" /></label>
<label><input type="button" value="계산" /></label>
</form>
</body>function calc() {
const exp = document.querySelector("#exp");
const result = document.querySelector("#result");
result.value = eval(exp.value);
}
const button = document.querySelector('input[type="button"]');
button.addEventListener("click", calc);
- 문서의 로딩 완료와 onload
<body onload="alert('이 사이트는 2021년 5월부터 www.js.co.kr로 옮겨집니다.')">
<h3>HTML 문서의 로딩 완료, onload</h3>
<hr>
이 페이지는 onload 리스너의 사용 예를 보여줍니다.
이 페이지가 출력되고 난 바로 직후 onload 리스너를 통해 경고창을 출력합니다.
</body>
- 라디오 버튼과 체크박스
<body>
<form>
<input type="radio" name="city" value="seoul" />서울
<input type="radio" name="city" value="busan" />부산
<input type="radio" name="city" value="chunchen" />춘천
<input type="button" value="find checked" />
</form>
</body>const button = document.querySelector(`input[type="button"]`);
function findChecked() {
let find = null;
let radio = document.getElementsByName("city");
// for문 대신 forEach 사용
radio.forEach((name) => {
if (name.checked == true) find = name;
});
if (find != null) {
alert(`${find.value} 이/가 선택되었읍`);
} else {
alert(`선택된 것이 없음`);
}
}
button.addEventListener("click", findChecked);
querySelectorAll의 경우 결괏값이 배열로 나오기 때문에 각각의 체크박스에 이벤트 지정을 하려면 나온 배열의 인덱스로 따로 변수 지정을 해주어야 한다.
<body>
<h3>물품을 선택하면 금액이 자동 계산됩니다.</h3>
<hr />
<label>
<input
type="checkbox"
name="hat"
value="10000"
onclick="calc(this)"
/>모자 1만원</label
>
<label
><input
type="checkbox"
name="shose"
value="30000"
onclick="calc(this)"
/>구두 3만원</label
>
<label>
<input
type="checkbox"
name="bag"
value="80000"
onclick="calc(this)"
/>명품가방 8만원</label
><br />
지불하실 금액 <input type="text" id="result" value="0" />
<script src="../js/2.js"></script>
</body>let sum = 0;
function calc(checkedBox) {
if (checkedBox.checked) {
sum += parseInt(checkedBox.value);
} else {
sum -= parseInt(checkedBox.value);
}
document.querySelector("#result").value = sum;
}
select객체와 onchange
select는 click이 아니라 change 이벤트를 걸어주어야 한다.
<body>
<select id="fruits">
// option의 value로 이미지 주소를 지정
<option value="../../img/strawberry.png">딸기</option>
<option value="../../img/banana.png">바나나</option>
<option value="../../img/apple.png">사과</option>
</select>
<img id="fruit-image" src="" alt="" />
</body>function drawImage() {
let img = document.querySelector("#fruit-image");
// 이미지 주소를 선택된 option의 index를 찾고, 그 option의 value 값을 가져와 지정한다.
// option의 value 값에 이미지 주소 경로가 지정되어 있어야 실행된다.
img.src = select.options[select.selectedIndex].value;
}
let select = document.querySelector("#fruits");
select.addEventListener("change", drawImage);
'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅'
'새싹 프론트엔드' 카테고리의 다른 글
| [새싹 프론트엔드] 11/14 (JSON 데이터 통신) (0) | 2022.11.14 |
|---|---|
| [새싹 프론트엔드] 11/14 (플러그인) (0) | 2022.11.14 |
| [새싹 프론트엔드] 11/10 (ES6 문법) (0) | 2022.11.10 |
| [새싹 프론트엔드] 11/9 (클래스) (0) | 2022.11.09 |
| [새싹 프론트엔드] 11/8 (HTML DOM과 Document) (0) | 2022.11.08 |