[JS] 이벤트 다루기(종류 및 등록)

이벤트란 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점
-> 발생 시 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 js로 지정 가능

이벤트 종류

이벤트 등록하기

이벤트가 발생할 때 어떤 작업을 할지 js 코드로 작성하는 것
-> 이벤트 등록(총 3가지 방법)

인라인 방식으로 이벤트 등록

HTML 태그에 속성으로 이벤트를 등록하는 방법

<button onclick="clickEvent()">클릭</button>
<script>
  function clickEvent(){
    alert("click");
  }
</script>

위 코드에서 button을 클릭하였을 때 웹브라우저에 경고창이 출력

<form>
  <input type="text" onfocus="focusEvent()" onblur="blurEvent()">
</form>
<script>
  function focusEvent(){
    console.log("focus on");
  }
  function blurEvent(){
    console.log("focus out");
  }
</script>

위 코드에서 입력창을 클릭해서 커서를 활성화할시 onfocus 이벤트가 발생
-> 이후 입력창 외부 영역 클릭스 onblur 이벤트가 발생하여 focus out 상태가 됨

focus 관련 이벤트 사용시에는 alert() 메서드 사용 금지
-> 경고창 클릭시 커서를 빠져나갔다 판단해 onblur 이벤트 발생
-> 경고창이 닫히면 커서가 다시 입력창으로 들어가서 onfocus 이벤트
-> 무한 경고창

프로퍼티 리스너 방식으로 이벤트 등록

프로퍼티 리스너란 요소 노드에 직접 속성으로 이벤트를 등록하는 방법

<button>클릭</button>
<script>
	const btnE1 = document.querySelector("button");
    btnE1.onclick = () => {
    	alert("arrow click");
    }
</script>    

이벤트 등록 메서드로 이벤트 등록

addEventListener() 메서드를 통해 이벤트를 등록

가장 권장하는 방법

<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);

앞서 설명한 이벤트 종류에서 on을 빼고 이벤트 타입에 작성해야 함!!

<button>클릭</button>
<script>
	const btnE1 = document.querySelector("button");
    btnE1.addEventListener("click", function(){
    	alert("button Click");
    });
</script>

// 밑과 같은 방식으로도 가능
<script>
	...
    const clickEvent= () =>{
    	alert("button Click");
    }
    btnE1.addEventListener("click", clickEvent);
</script>

함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로, 참조하려는 함수가 addEventListener() 메서드보다 반드시 위에 작성 해야 함!!