📝 이벤트
동작, 행위
- 브라우저에서의 동작, 행위
: click, keydown, keyup, mouseover, drag, submit, change, ...
- 이벤트 리스너(Event Listener)
이벤트가 발생하는 것을 대기하고 있다가 이벤트가 발생하는 것이 감지되면 연결된 기능(함수)를 수행하는 것
ex) onclick, onkeyup, onchange, onsubmit, ... (on이벤트명)
onclick="함수명()"- 이벤트 핸들러(Event Handler)
이벤트 리스너에 연결된 기능으로 이벤트 발생 시 수행하고자 하는 내용을 작성해 둔 함수(function)
💡 인라인 이벤트 모델
요소 내부에 이벤트를 작성하는 방법
📌 작성법
on이벤트명 = 함수명()✏️ 코드로 알아보기
- html
<button onclick="test1(this)">인라인 이벤트 모델 확인</button>- js
// 인라인 이벤트 모델 확인하기
function test1(button){
button.style.backgroundColor = "pink";
button.style.color = "white";
}✏️ 출력 화면
-> 버튼을 누르면 버튼 색상이 바뀌는 모습을 볼 수 있다.
💡 고전 이벤트 모델
요소가 가지고 있는 이벤트 속성(이벤트 리스너)에 이벤트 핸들러를 연결하는 방법
-> 인라인 모델처럼 HTML 요소에 JS 코드가 포함되는 것이 아닌 script에만 이벤트 관련 코드를 작성할 수 있다.
📌 JS 코드를 body 태그 마지막에 작성하는 이유
-
고전/표준 이벤트 모델 방식의 코드 수행을 위해
(HTML 요소 먼저 랜더링 -> JS 코드 해석) -
head에 용량이 큰 JS를 추가하면 페이지 로딩 시간(흰 화면)이 길어지게 된다.
-> body 마지막으로 옮기면 일단 화면부터 랜더링 후 JS 코드를 나중에 해석한다.
✏️ 코드로 알아보기
- html
<button id="test2-1">고전 이벤트 모델 확인</button>
<button id="test2-2">고전 이벤트 모델 제거</button>
<button id="test2-3">고전 이벤트 모델 단점</button>- js
// 고전 이벤트 모델 확인하기
// *** 주의사항 ***
// 고전/표준 이벤트 모델은 랜더링된 HTML 요소에
// 이벤트 관련된 동작을 부여하는 코드
// -> 랜더링 되지 않은 요소에 이벤트 관련 동작을 추가할 수 없다!!
// (문제 원인 : HTML 코드 해석 순서 (위 -> 아래))
// --> 해결 방법 : HTML 요소가 먼저 랜더링된 후에 JS 코드 수행
// console.log(document.getElementById("test2-1"));
document.getElementById("test2-1").onclick = function(){
// 익명 함수(이벤트 핸들러에 많이 사용함)
alert("고전 이벤트 모델로 출력된 대화 상자");
}
// 이벤트 제거
document.getElementById("test2-2").onclick = function(){
// test2-1 이벤트 제거
document.getElementById("test2-1").onclick = null;
alert("test2-1 이벤트를 제거하였습니다.");
}
// 고전 이벤트 모델 단점
// -> 한 요소에 동일한 이벤트 리스너(onclick)에 대한
// 다수의 이벤트 핸들러(배경색 변경, 폰트 변경)를 작성할 수 없다.
// (마지막으로 해석된 이벤트 핸들러만 적용)
document.getElementById("test2-3").onclick = function(event){
// 버튼 색 바꾸기
// 방법 1) 요소를 문서에서 찾아서 선택
// document.getElementById("test2-3").style.backgroundColor = "pink"
// 방법 2) 매개변수 e 또는 event 활용하기
// -> 이벤트 핸들러에 e 또는 event를 작성하는 경우
// 해당 이벤트와 관련된 모든 정보가 담긴 이벤트 객체가 반환된다.
// console.log(event);
// event.target : 이벤트가 발생한 요소
// event.target.style.backgroundColor = "pink";
// 방법 3) this 활용 -> 이벤트가 발생한 요소 (event.target과 동일)
// console.log(this);
this.style.backgroundColor = "green";
}
// document.getElementById("test2-3").onclick = function(){
// document.getElementById("test2-3").style.fontSize = "30px";
// }출력 화면
- '고전 이벤트 모델 확인' 버튼을 눌렀을 때
-> 대화 상자가 출력된다.
- '고전 이벤트 모델 제거' 버튼을 눌렀을 때
-> 대화 상자와 함께 이벤트가 삭제되어, 이후 '고전 이벤트 모델 확인' 버튼을 눌러도 이벤트가 발생하지 않는다.
- '고전 이벤트 모델 단점' 버튼을 눌렀을 때
-> 버튼을 눌렀을 때 버튼 배경 색이 변경된다.
💡 표준 이벤트 모델
W3C (HTML, CSS, JS 웹표준 재정 단체)에서 공식적으로 지정한 이벤트 모델(이벤트 동작 지정 방법)
-> 한 요소에 여러 이벤트 핸들러를 설정할 수 있다. (고전 이벤트 모델 단점 보완)
✏️ 코드로 알아보기
- html
<div id="test3">클릭하면 크기가 늘어나요~</div>- js
// 표준 이벤트 모델
document.getElementById("test3").addEventListener("click", function(){
// this : 이벤트가 발생한 요소
console.log(this.clientWidth); // 현재 요소의 너비(테두리 제외) - 테두리 포함은 offsetWidth임
// this.style.width = "300px"; // 현재 요소 너비 변경
this.style.width = this.clientWidth + 20 + "px";
})
// test3에 이미 click 이벤트에 대한 동작이 존재하는데
// 중복해서 적용
document.getElementById("test3").addEventListener("click", function(){
this.style.height = this.clientHeight + 20 + "px";
})✏️ 출력 화면
-> 버튼을 누를 때마다 가로, 세로 각 20px씩 커지는 모습이다.
📌 이벤트 복습 문제
색상을 영어로 입력한 후 변경 버튼을 클릭하면 #div1의 배경색이 변경되도록 하시오.
✏️ 코드로 알아보기
- html
<div id="div1"></div>
<input type="text" id="input1">
<button id="changeBtn1">변경</button>- js
// 복습 문제
// document.getElementById("changeBtn1").addEventListener("click", function(){
// // document.getElementById("div1").style.backgroundColor = document.getElementById("input1").value;
// const div1 = document.getElementById("div1");
// const input1 = document.getElementById("input1");
// // input에 작성된 값 얻어오기
// const bgColor = input1.value;
// // div1 배경색 변경
// div1.style.backgroundColor = bgColor;
// })
// input1에 값이 변경되었을 때 입력된 값으로 배경색 변경
document.getElementById("input1").addEventListener("change", function(){
// change 이벤트
// - text 관련 input 태그는
// 입력된 값이 변할 때는 change라고 하지 않고
// 입력이 완료된 후 포커스를 잃거나, 엔터를 입력하는 경우
// 입력된 값이 이전과 다를 경우 change 이벤트가 발생한 것으로 인식한다.
// console.log("change 이벤트 발생!");
// const input1 = document.getElementById("input1");
// document.getElementById("div1").style.backgroundColor = input1.value;
// input1.value = "";
const div1 = document.getElementById("div1");
// input1에 작성된 값 얻어오기
const bgColor = this.value;
// div1 배경색 변경
div1.style.backgroundColor = bgColor;
this.value = "";
})✏️ 출력 화면
-> 색상을 입력하고 '엔터'를 치거나 커서를 입력창 바깥에 놓을 때 입력한 색상으로 변경된다.
📝 태그 기본 이벤트 제거
💡 HTML요소 기본 이벤트 제거
📌 작성법
e.preventDefault(); // HTML 요소가 가지고 있는 기본 이벤트를 막음(제거)
- prevent : 막다, 방지하다, 예방하다
- Default : 기본 / 기본값
✏️ 코드로 알아보기
- html
<a href="https://www.naver.com" id="moveNaver">네이버로 이동</a>- js
// a태그 기본 이벤트 제거
document.getElementById("moveNaver").addEventListener("click", function(e){
// 매개변수 e 또는 event = 이벤트 발생 객체
// (이벤트와 관련된 정보가 담겨 있는 객체)
e.preventDefault(); // HTML 요소가 가지고 있는 기본 이벤트를 막음(제거)
// prevent : 막다, 방지하다, 예방하다
// Default : 기본 / 기본값
})✏️ 출력 화면
-> 링크를 눌러도 네이버로 이동하지 않는다.
💡 form태그 기본 이벤트 제거
📌 방법 1. submit 버튼을 사용 안 하는 방법
form요소.submit() : form 요소 제출 함수
✏️ 코드로 알아보기
- html
<form action="01_JS개요.html" name="testForm1">
"제출" 이라고 입력 되었을 때만 버튼이 submit으로 동작<br>
입력 : <input type="text" name="in1" id="in1">
<button type="button" id="testBtn1">제출하기</button>
</form>- js
// form태그 기본 이벤트 제거
// 방법 1. submit 버튼을 사용 안 하는 방법
document.getElementById("testBtn1").addEventListener("click", function(){
// #in1에 입력 값 얻어오기
const in1 = document.getElementById("in1").value;
// #in1에 작성된 값이 "제출"일 경우 testForm1을 submit
if(in1 == "제출"){
// ** form태그의 name속성이 있을 경우 직접 선택 가능
// document.form태그의 name속성 값
// ** form요소.submit() : form요소 제출 함수
document.testForm1.submit();
}
})✏️ 출력 화면
-> "제출"이라고 입력했을 때만 제출이 된다.
📌 방법 2. onsubmit을 이용해서 form태그 제출되는 것을 막는 방법
- onsubmit : form 태그가 제출이 되었을 때
-> 제출하기 버튼이 클릭되었을 때를 의미
onsubmit="return false"
-> submit을 막는 방법✏️ 코드로 알아보기
- html
<form action="01_JS개요.html" onsubmit="return checkIn2()" >
"제출" 이라고 입력 되었을 때만 버튼이 submit으로 동작<br>
입력 : <input type="text" name="in2" id="in2">
<button type="submit">제출하기</button>
</form>- js
// 방법 2. onsubmit을 이용해서 form태그 제출되는 것을 막는 방법
function checkIn2(){
// #in2에 "제출"이 입력된 경우만 submit(return true);
const in2 = document.getElementById("in2").value;
if(in2 == "제출"){
return true;
} else{
// 아닌 경우
return false;
}
}✏️ 출력 화면
-> 역시 "제출"이라고 입력했을 때만 제출이 된다.
풀스택 개발자 기록집 📁