[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-02 | JavaScript addEventListener

1.  addEventListener란?
DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 

* 사용방법: 요소.addEventListener(이벤트, 명령)
   선택 요소에 지정한 이벤트가 발생하면, 약속된 명령어를 실행

2. addEventListener 이벤트의 종류

1) Click 클릭
2) Mouse 계열
  - Mouseover: 요소에 커서를 올렸을 때
  - Mouseout: 마우스가 요소를 벗어날 떄
  - Mousedown: 마우스 버튼을 누르고 있는 상태
  - Mouseup: 마우스 버튼을 떼는 순간
3) Focus: 포커스가 갔을 떄
4) Blur: 포커스가 벗어나는 순간
5) Key 계열
  - Keypress: 키를 누르는 순간 + 누르고 있는 동안 계속 발생
  - Keydown: 키를 누르는 순간에 발생
  - Keyup: 키를 눌렀다가 떼는 순간
6) Load: 웹페이지에 필요한 파일이 다운로드 되었을 때
7) Resize: 창크기 변경될 때
8) Scroll: 스크롤 발생할 때
9) Unload: 링크를 타고 이동하거나 브라우저를 닫을 때
10) Change: 폼 필드의 상태가 변경되었을 때

 

 

3. 사용 예제

1) 'click' 하면 rgb값 배경 변경 등

let btn = document.querySelector("button");

btn.addEventListener("click", function () {

let r = Math.round(Math.random() * 255);

let g = Math.round(Math.random() * 255);

let b = Math.round(Math.random() * 255);

console.log(r, g, b);

console.log(document.querySelector("body"));

document.querySelector(

"body"

).style.backgroundColor = `rgb(${r},${g},${b})`;

document.querySelector("h2").innerText = `rgb(${r}, ${g}, ${b})`;

});

2) 'submit '된 값을 기록하기

const form = document.querySelector("form");

form.addEventListener("submit", function (e) {

e.preventDefault();

const userid = document.querySelector('input[name="userid"]');

const comment = document.querySelector('input[name="comment"]');

const commentlist = document.querySelector(".comment-list");

const userid_value = userid.value.trim();

const comment_value = comment.value.trim();

if (userid_value !== "") {

const news = document.createElement("li"); //<li></li>

news.append(`${userid_value} - ${comment_value}`); //<li>todo</li>

commentlist.append(news);

}

userid.value = ""; //입력값 초기화

comment.value = "";

});

3) 'onclick' 이용

- HTML

<button type="button" onclick="cal();">계산</button>

<button type="button" onclick="reset();">초기화</button><br /><br />

- JS

function cal() {

let value1 = Number(document.querySelector("#value1").value);

let value2 = Number(document.querySelector("#value2").value);

let opt = document.querySelector("#operator").value;

console.log(opt);

const opt_obj = {

"+": (value1, value2) => {

return value1 + value2; //리턴값 안써줬었음

},

"-": (value1, value2) => {

return value1 - value2;

},

"*": (value1, value2) => {

return value1 * value2;

},

"/": (value1, value2) => {

return value1 / value2;

},

};

console.log(opt_obj[opt](value1, value2));

document.querySelector("#result").value = opt_obj[opt](value1, value2);

}

// [초기화] 버튼 클릭시 reset() 함수가 실행되도록 인라인 방식으로 미리 설정해 두었습니다.

function reset(a, b, op) {

document.querySelector("#value1").value = "";

document.querySelector("#value2").value = "";

document.querySelector("#operator").value = "";

}