[Javascript] 이벤트 객체

이벤트 객체란?

이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다.

let menus = document.querySelector("button"); //모든 버튼을 가져온다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; 

function handleClick() {
  // 어떤 버튼을 클릭했는지에 따라 타겟이 달라지므로 메뉴도 달라진다!
  // event.target은 어떤 요소가 이벤트를 발생시켰는지 알려준다.
  let currentMenu = event.target.textContent; 
  console.log(currentMenu + "를 클릭하셨습니다.");
}

🤔 event에 뭐가 들어있는데?
위에 있는 handleClick를 아래와 같이 변경하고 콘솔창으로 확인하자

function handleClick(event) {
  console.log(event); 
}

이벤트 리스너(event listener)란?

이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며 이벤트 핸들러라고도 부른다.
이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다.

이벤트 리스너 등록

객체나 요소에 프로퍼티로 등록하는 방법

// 자바스크립트 코드에서 프로퍼티로 등록
// 단점은 이벤트 타입별로 오직 하나의 이벤트 리스너만을 등록할 수 있다는 점이다.
window.onload = function() {
	// 이 함수는 HTML 문서가 로드될 때 실행됨.
	let text = document.getElementById("text");
	text.innerHTML = "HTML 문서가 로드되었습니다.";
}

// HTML 태그에 속성으로 등록
// HTML 코드에 자바스크립트 코드가 추가됨으로써 가독성이 안 좋아지며 유지보수도 힘들다.
<p onclick="alert('문자열을 클릭했어요!')">이 문자열을 클릭해 보세요!</p>

객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법

// addEventListener()
// 거의 모든 브라우저에서 지원하는 이벤트 리스너 등록을 위한 메소드
// 하나의 객체에 여러 개의 이벤트 리스너를 등록할 수 있다.
대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

let showBtn = document.getElementById("btn"); 
showBtn.addEventListener("click", showText);  

function showText() {
    document.getElementById("text").innerHTML = "짜잔~!! 텍스트가 나타났어요!!";
}

이벤트 리스너 삭제

function clickBtn() {
	btn.removeEventListener("mouseover", mouseoverBtn);
##     btn.removeEventListener("mouseout", mouseoutBtn);
    document.getElementById("text").innerHTML = "이벤트 리스너가 삭제되었어요!";

}

유효성 검사 과제

// querySelector를 이용해 id가 username인 요소를 불러온다.
let username = document.querySelector("#username");

// 파라미터 값이 4보다 크거나 같은지 확인하는 함수
function isMoreThan4Length(value) {
  return value >= 4;
}

// username에서 키보드를 눌렀다 뗐을 때 발생한다.
username.onkeyup = function(){
  let successMessage  = document.querySelector(".success-message");
  let failureMessage = document.querySelector(".failure-message");

  if(isMoreThan4Length(username.value.length)){
     // 아이디가 네글자 이상일 경우 성공 메세지를 띄워주고 실패 메세지를 숨겨준다.
     successMessage.classList.remove("hide");
     failureMessage.classList.add("hide");
  }else{
    // 아이디가 네글자 미만일 경우 성공 메세지를 숨기고 실패 메세지를 띄워준다.
    successMessage.classList.add("hide");
    failureMessage.classList.remove("hide");
  }
};

참고

이벤트 리스너 등록

페어님과 함께 아이디, 비밀번호를 가져와서 간단하게 유효성 검사를 하는 과제를 했다. 과제를 진행하던 중에 브라우저 상에서는 잘 나오는데 터미널에서 테스트를 하면 자꾸 틀려서 혼란이 왔었다. 페어님과 의견을 나누면서 이것 저것 시도해봤는데 원인을 몰라서 아고라 스테이츠에도 질문하고 구글링도 열심히 했다. 나중에 원인을 찾았는데 테스트를 통과하려면 isMatch 함수에서 비밀번호가 같은지만 체크해서 리턴해주고 그걸 이벤트 핸들러에서 조건문 안에 써야했다. 우리는 isMatch 함수 자체를 boolean 값을 반환하는 이벤트 핸들러로 만들어서 사용했기 때문에 형식이 달라서 테스트를 통과하지 못했던 것이었다. 알고나니 조금 허망하긴 했지만 덕분에 아고라 스테이츠도 이용해보고 서로 의견을 나누면서 정답을 찾아가는 과정이 즐거웠다😉