JS | 브라우저 이벤트

BOZZANG·2022년 5월 10일
0

JavaScript

목록 보기
13/14

🎇 브라우저 이벤트

이벤트 event 는 무언가 일어났다는 신호이다.
모든 DOM 노드는 이런 신호를 만들어 낸다.

아래는 자주 사용되는 DOM 이벤트이다.

💥 마우스 이벤트

▪ click : 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 (탭) 발생

▪ contextmenu : 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생

▪ mouseover, mouseout : 마우스 커서를 요소 위로 움직였을 때, 
					    마우스 커서가 요소 밖으로 움직였을 때 발생
                        
▪ mousedown, mouseup : 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때,
					   마우스 버튼을 뗄 때 발생
                       
▪ mousemove : 마우스를 움직일 때 발생     

💥 폼 요소 이벤트

▪ submit : 사용자가 <form> 을 제출할 때 발생

▪ focus : 사용자가 <input> 과 같은 요소에 포커스 할 때 발생

💥 키보드 이벤트

▪ keydown, keyup : 사용자가 키보드 버튼을 누르거다 뗼 때 발생

💥 문서 이벤트

▪ DOMContectLoaded : HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때 발생 

💥 CSS 이벤트

▪ transitionend : CSS 애니메이션이 종료되었을 때 발생 

🎇 EventHandler

이벤트에 반응하기 위에서 이벤트가 발생했을 떄 실행되는 함수인 핸들러 handler 를 할당해야 한다. 핸들러는 사용자의 행동에 어떻게 반응할지를 JS 코드로 표현한 것이다.

핸들러는 여러 가지 방법으로 할당할 수 있다.

🔗 HTML 속성에 할당하기

HTML에 on<event> 속성에 핸들러를 할당할 수 있다.
아래의 onclick 속성에 click 핸들러를 할당하는 것과 같이 말이다.

<input onclick="alert('클릭')" type="button" >
<!-- 버튼을 클릭하면 onclick 안의 코드가 실행된다. -->

속성값 전체가 큰따옴표로 둘러싸여 있기 때문에 속성값 안에는 작은 따옴표로 둘러쌓야야 한다. 속성값 내부에도 또 큰따옴표를 쓰면 코드가 작동하지 않는다.

코드가 길다면, 함수를 만들어서 호출하는 방법으로 하도록 하자!

<input onclick="anotherFunction()" type="button" >

🔗 DOM 프로퍼티를 사용해 할당하기

DOM 프로퍼티 on<event> 을 사용하여 핸들러를 할당할 수 있다.
elem.onclick 을 사용한 예시

<input id=elem type="button" >
<script>
  elem.onclick = function() {
  	alert('버튼입니다.');
  };
</script>

onclick 프로퍼티는 단 하나 밖에 없기 때문에, 복수의 핸들러를 할당할 수 없다.
핸들러를 하나 더 추가하면, 기존 핸들러는 덮어씌워진다.
핸들러를 제거하고 싶다면 elem.onclick = null 과 같이 null을 할당해주자.


❗ 자주 하는 괄호 실수

이벤트를 다룰 때, 함수를 직접 핸들러에 할당할 때 자주하는 실수가 있다.

button.onclick = func; // 올바른 방법
button.onclick = func(); //틀린 방법

아래와 같이 괄호를 붙이는 것은 함수를 호출하겠다는 것을 말한다.
이렇게 괄호륿 붙이면 함수 호출의 결괏값이 할당되는데 만약에 함수가 아무것도 반환하지 않는다면 onclick 속성에는 undefined 가 할당되므로 이벤트가 의도대로 작동하지 않는다.

그런데 HTML 속성값에는 괄호가 있어야 한다.

브라우저는 속성값을 읽고, 속성값을 함수 본문으로 하는 핸들러 함수를 만들기 때문에 이러한 차이가 발생한다.

<input id="elem" type="button" onclick="func()" >
elem.onclick = function() {
  func(); // 속성값 
};

이렇게 브라우저는 onclick 프로퍼티에 새로운 함수를 할당한다.


이렇게 본 HTML 속성과 DOM 프로퍼티를 이용한 이벤트 핸들러 할당 방식에는 근본적인 문제가 있다. 바로 하나의 이벤트에 복수의 핸들러를 할당할 수 없다는 것!

그리하여 나온 것이 바로 addEventListenerremoveEventListener 라는 메서드이다.

🔗 addEventListener

addEventListener 은 핸들러를 여러 개 할당할 수 있다.

element.addEventListener(event, handler, [options]);

event : 이벤트 이름 (예 : "click")

handler : 핸들러 함수

options : 아래 프로퍼티를 갖는 객체

once : true 이면 이벤트가 트리거 될 때리스터가자동으로 삭제된다. 

capture : 어느 단계에서 이벤트를 다뤄야 하는지를 알려준다. 

passive : true 이면 리스너에서 지정한 함수가 preventDefault() 를 호출하지 않는다. 

addEventListener 를 여러 번 호출하면 아래와 같이 핸들러를 여러 개 붙일 수 있다.

<input id="elem" type="button" />
<script>
  function hand1() {
    alert('안녕');
   };
  
  function hand2() {
    alert('또 안녕');
   };
  
  elem.onclick = () => alert('안녕하세요'); 
  elem.addEventListener("click", hand1); <!-- 안녕 -->
  elem.addEventListener("click", hand2); <!-- 또 안녕 --> 
</script>

🔗 removeEventListener

removeEventListener 을 사용하여 핸들러를 삭제한다.

element.removeEventListener(event, handler, [options]);

removeEventListener 사용 시 주의할 점
▪ 삭제는 동일한 함수만 할 수 있다.
▪ 변수에 핸들러 함수를 저장해 놓지 않으면 핸들러를 지울 수 없다는 것을 유의하자!
그렇지 않으면 addEventListener 로 할당한 핸들러를 불러올 수 없다.

핸들러는 DOM 프로퍼티와 addEventListenr 를 사용하는 방법 두 가지를 사용해 할당할 수 있는데, 대게는 두 방법 중 하나만 선택하여 할당한다.

하지만 어떤 이벤트는 addEventListner 를 써야만 동작한다.
이것이 조금 더 범용적이고, 이것을 써야만 동작하는 이벤트들은 예외적인 경우라고 생각하면 된다.


🎇 이벤트 객체

이벤트를 제대로 다루기 위해 어떤 일이 일어났는지 상세히 알아야 한다.

click 이벤트가 발생했다면 마우스 포인터가 어디에 있는지
keydown 이벤트가 발생했다면 어떤 키가 눌렸는지 등등에 대해서 말이다.

이벤트가 발생하면 브라우저는 이벤트 객체 event object 를 만든다.
여기에 이벤트에 관한 상세한 정보를 넣은 다음, 핸들러에 인수로 전달한다.

<input type="button" id="elem" value="클릭해주세요" >

<script>
  elem.onclick = function(event) {
  alert(event.type + " 이벤트가 " + event.currentTarget + " 에서 발생했다.");
  alert("이벤트 발생 좌표 -> " + event.clientX + ":" + event.clientY );
};
</script>

위와 같이 이벤트 객체에서 지원하는 프로퍼티는 다양하게 있다.
이벤트 타입에 따라 이벤트 객체에서 제공하는 프로퍼티 또한 다르다.


Modern JavaScript Tutorial

0개의 댓글