김채은

김채은

열심히 공부하자!

Event

2 minute read

EVENT

Why?

JavaScript를 이용한 개발은 event-driven개발이라고도 한다. 즉 대부분의 인터랙티브한 기능이 이벤트이다.

브라우저는 scroll, resize, form전송과 같은 기본 이벤트를 지원한다. 개발자가 원하는 이벤트를 등록해서 인터랙티브한 웹을 만드는 것이 가능하다. 이벤트 등록과 동작방식에 대한 이해는 웹프론트엔드 개발에 생명력을 불어넣는 방법에 대한 이해라고 할 수 있다.

학습 목표

  • Event등록을 할 수 있다.
  • Event. handler가 무엇인지안다.
  • Event type, Event object에 대해서 안다.
  • Event가 비동기적으로 어떻게 동작하는 지 설명할 수 있다.

배경 지식

Event의 이해

Event

브라우저에는 많은 이벤트가 발생합니다. 브라우저 화면의 크기를 마우스로 조절할때도, 스크롤을 할때도, 마우스로 이동하거나 무언가를 선택할때도 이벤트가 발생합니다.

이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤일을 하라고 할일을 등록할 수가 있습니다.

다시말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스관련)가 발생했을때 특정 행위를(어떤 일)하고 싶다면, 대상엘리먼트를 찾고 어떤일을 등록하면 된다. 그것을 자바스크립트로 구현할 수 있습니다.

이벤트 종류(event reference)

이벤트는 네트워크, 마우스, 키보도, css transition, form 처리 등 브라우저에서 일어나는 것들에 대한 Event가 존재한다. 아래 reference를 훑어보고. 어떤 event들이 있는지 미리 살펴보는 게 좋다. 무엇이 있는지는 알아야 필요할때 이를 가져다 쓸 수 있다. https://developer.mozilla.org/en-US/docs/Web/Events

이벤트 등록

이벤트 등록 표준방법입니다. addEventListener함수를 사용할 수 있습니다.

var el = document.getElementById("outside");
el.addEventListener("click", function(){
//do something..
}, false);
코드복사

addEventListener함수의 두번째 인자는 함수다. 이 함수는 나중에 이벤트가 발생할때 실행되는 함수로 이벤트핸들러 또는 이벤트리스너라고 합니다.

Event Handler (Event Listener) 콜백함수는 이벤트가 발생할 때 실행 됨.

이벤트 객체

이벤트리스너가 실행될때 어떤 이벤트에 의해서 실행됐는지, 이벤트 객체를 매개변수로 생성합니다.

따라서 이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 됩니다.

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);
코드복사

가장 많이 쓰이는 건 event.target입니다. 해당 이벤트가 발생한 element를 가리킵니다. element도 객체임으로, 그 안에 classname이나 element가 가진 속성을 사용할 수 있습니다.

이벤트 등록은 DOM 의 element node라면 다 등록할 수 있다.

document.body.addEventListener("click", ()=>{});
window.addEventListener("DOMContentLoaded", ()=>{});
코드복사

그리고 window에도 이벤트 등록이 가능하다.

window.addEventListener("scroll", ()=>{});
//참고 : https://developer.mozilla.org/en-US/docs/Web/Events/scroll
코드복사

event객체에는 이벤트가 발생한 지점의 좌표를 알려준다. Y좌표 기준으로 pageY, clientY , screenY, offsetY 등 여러개가 있는데 그 차이를 알아두어야 필요할때 정확한 좌표값을 기준으로 컨트롤 할 수가 있다.

참고 : https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

event 객체의 preventDefault 메서드.

browser에서 element 별로 제공되는 기본event를 막을 수 있다. 예를들어서 anchor 태그의 동작을 일으키지 않게 할 수 있다. 실용예제를 찾아서 이해해보자.

onclick 속성을 사용한 이벤트핸들러등록

    document.body.onclick = function() {}
코드복사

이렇게 할수 있는 건 유용해보이지만, 이벤트 등록을 여러개 할 수 없기 때문에 효과적이지 않다. 따라서 이런방식은 참고로 알아두고, 이벤트 등록은 addEventListener를 사용한다. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

Event 학습 더 하기

아래 사이트에서 Event에 대해서 더 학습한다.

  • https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties
  • https://developer.mozilla.org/en-US/docs/Web/Events

이벤트의 다양한 type에 대해서도 공부한다.

정리

event 의 종류는 꽤 다양하다. 이를 잘 기억하고 필요한 것들을 적절히 잘 사용하는 것이 좋다.

event객체 역시 많은 정보를 포함하고 있으니, 이를 잘 활용해서 개발하도록 한다.

이 미션을 풀이한 다름 사람의 코드를 꼭 살펴보자. 나와 어떻게 다르게 구현했는지 서로 리뷰하는 것이 필요하다.

You may also enjoy